Вращение оттенка

Применение

Используйте утилиты hue-rotate-{amount} вместе с утилитой filter, чтобы повернуть оттенок элемента.

<div class="filter hue-rotate-15 ...">
  <!-- ... -->
</div>

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

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

<div class="filter hue-rotate-15 md:hue-rotate-60 ...">
  <!-- ... -->
</div>

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

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

Вы можете настроить, какие утилиты hue-rotate будут генерироваться, используя ключ hueRotate в разделе theme вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       hueRotate: {
+         '-270': '-270deg',
+         270: '270deg',
+       }
+     }
    }
  }

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

Варианты

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

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

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

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       hueRotate: ['hover', 'focus'],
      }
    }
  }

Отключение

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

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