Наклон

Применение

Наклоните элемент, сначала включив преобразования с помощью утилиты transform, а затем указав угол наклона с помощью утилит skew-x-{amount} и skew-y-{amount}.

Адаптивность

Чтобы управлять перекосом элемента в определенной контрольной точке, добавьте префикс {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,
    }
  }