Вращение

Справочник классов по умолчанию

Класс	Свойства
rotate-0	--tw-rotate: 0deg;
rotate-1	--tw-rotate: 1deg;
rotate-2	--tw-rotate: 2deg;
rotate-3	--tw-rotate: 3deg;
rotate-6	--tw-rotate: 6deg;
rotate-12	--tw-rotate: 12deg;
rotate-45	--tw-rotate: 45deg;
rotate-90	--tw-rotate: 90deg;
rotate-180	--tw-rotate: 180deg;
-rotate-180	--tw-rotate: -180deg;
-rotate-90	--tw-rotate: -90deg;
-rotate-45	--tw-rotate: -45deg;
-rotate-12	--tw-rotate: -12deg;
-rotate-6	--tw-rotate: -6deg;
-rotate-3	--tw-rotate: -3deg;
-rotate-2	--tw-rotate: -2deg;
-rotate-1	--tw-rotate: -1deg;

Применение

Поверните элемент, сначала включив преобразования с помощью утилиты transform, а затем указав угол поворота с помощью утилит rotate-{angle}.

<img class="transform rotate-0 ...">
<img class="transform rotate-45 ...">
<img class="transform rotate-90 ...">
<img class="transform rotate-180 ...">

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

Чтобы управлять поворотом элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите поворота. Например, используйте md:rotate-90, чтобы применить утилиту rotate-90 только для средних размеров экрана и выше.

<div class="transform rotate-45 md:rotate-90"></div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Масштаб вращения

По умолчанию Tailwind предоставляет семь универсальных утилит поворота. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.rotate вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      rotate: {
-       '-180': '-180deg',
        '-90': '-90deg',
-       '-45': '-45deg',
        '0': '0',
        '45': '45deg',
        '90': '90deg',
+       '135': '135deg',
        '180': '180deg',
+       '270': '270deg',
      }
    }
  }

Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.

Варианты

По умолчанию, только responsive, hover и focus варианты создаются для утилит rotate.

Вы можете контролировать, какие варианты создаются для утилит rotate для изменения свойства rotate в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты active и group-hover:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       rotate: ['active', 'group-hover'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения rotate, Вы можете полностью отключить их, установив для rotate свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     rotate: false,
    }
  }