用于控制 CSS 过渡延迟的功能类。
<button class="transition delay-150 duration-300 ease-in-out ...">Hover me</button>
<button class="transition delay-300 duration-300 ease-in-out ...">Hover me</button>
<button class="transition delay-700 duration-300 ease-in-out ...">Hover me</button>要在特定的断点处控制元素的过渡-延迟，请在任何现有的过渡-延迟实用程序中添加 {screen}: 前缀。例如，使用 md:delay-500 来应用 delay-500 功能，只适用于中等以上的屏幕尺寸。
关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。
默认情况下，Tailwindb提供了八个通用的过渡-延迟功能。您可以通过定制您的 Tailwind 主题配置的 transitionDelay 部分来改变，添加或删除这些功能。
// tailwind.config.js
module.exports = {
theme: {
extend: {
transitionDelay: {
+ '0': '0ms',
+ '2000': '2000ms',
}
}
}
}在主题定制文档中了解更多关于定制默认主题的信息。
默认情况下， 针对 transition-delay 功能类，只生成 responsive 变体。
您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 transitionDelay 属性来控制为 transition-delay 功能生成哪些变体。
例如，这个配置也将生成 hover and focus 变体:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ transitionDelay: ['hover', 'focus'],
}
}
}如果您不打算在您的项目中使用 transition-delay 功能，您可以通过在配置文件的 corePlugins 部分将 transitionDelay property to false in the corePlugins section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ transitionDelay: false,
}
}