Наклон
Утилиты для наклона элементов с трансформацией.
Применение
Наклоните элемент, сначала включив преобразования с помощью утилиты transform, а затем указав угол наклона с помощью утилит skew-x-{amount} и skew-y-{amount}.
<img class="transform skew-y-0 ...">
<img class="transform skew-y-3 ...">
<img class="transform skew-y-6 ...">
<img class="transform skew-y-12 ...">Адаптивность
Чтобы управлять перекосом элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите наклона. Например, используйте md:skew-6, чтобы применить утилиту skew-6 только при средних размерах экрана и выше.
<div class="transform md:skew-6 ..."></div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Кастомизация
Шкала наклона
По умолчанию Tailwind предоставляет семь универсальных утилит для перекоса. Вы изменяете, добавляете или удаляете их, настраивая раздел skew в конфигурации вашей темы Tailwind.
// tailwind.config.js
module.exports = {
theme: {
extend: {
skew: {
+ '25': '25deg',
+ '60': '60deg',
}
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
Варианты
По умолчанию, только responsive, hover и focus варианты создаются для утилит skew.
Вы можете контролировать, какие варианты создаются для утилит skew для изменения свойства skew в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты active и group-hover:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ skew: ['active', 'group-hover'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения skew, Вы можете полностью отключить их, установив для skew свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ skew: false,
}
}