Утилиты для управления длительностью переходов CSS.
Используйте утилиты duration-{amount} для управления продолжительностью перехода элемента.
<button class="transition duration-150 ease-in-out ...">Наведи на меня</button>
<button class="transition duration-300 ease-in-out ...">Наведи на меня</button>
<button class="transition duration-700 ease-in-out ...">Наведи на меня</button>Чтобы управлять продолжительностью перехода элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите продолжительности перехода. Например, используйте md:duration-500, чтобы применить утилиту duration-500 только при средних размерах экрана и выше.
Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию Tailwind предоставляет восемь универсальных утилит для продолжительности перехода. Вы изменяете, добавляете или удаляете их, настраивая раздел transitionDuration в конфигурации темы Tailwind.
// tailwind.config.js
module.exports = {
theme: {
extend: {
transitionDuration: {
+ '0': '0ms',
+ '2000': '2000ms',
}
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
По умолчанию, только responsive варианты создаются для утилит transition-duration.
Вы можете контролировать, какие варианты создаются для утилит transition-duration для изменения свойства transitionDuration в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ transitionDuration: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения transition-duration, Вы можете полностью отключить их, установив для transitionDuration свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ transitionDuration: false,
}
}