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