duration-类必须与transition-类配合使用才生效，单独设置如duration-300仅定义时长但无过渡属性，无法触发动画；需搭配transition-colors、transition-transform等明确过渡目标。
duration-类必须和transition-类一起用才生效
单独写 duration-300 不会触发任何动画，它只是设置 transition-duration: 300ms，但没声明“对哪些属性过渡”，浏览器根本不知道该动什么。常见错误是只加 duration-200 就以为悬停会变慢，结果毫无反应。
正确组合方式是：先用 transition-colors、transition-transform 或 transition-all 明确过渡目标，再加 duration- 类。例如：
<button class="transition-colors duration-200 hover:bg-blue-600">Click me</button>
-
transition-colors告诉浏览器只监听颜色相关变化（color、background-color等） -
duration-200定义这个变化耗时 200ms - 缺一不可，顺序也无关紧要
自定义 duration 值要改 tailwind.config.js 的 theme.extend.transitionDuration
默认的 duration-75 到 duration-1000 覆盖大部分场景，但有些动效需要更精细控制，比如按钮点击反馈用 120ms、模态框入场用 280ms，这时就得手动扩展。
在 tailwind.config.js 中添加：
module.exports = {
theme: {
extend: {
transitionDuration: {
'120': '120ms',
'280': '280ms',
'2000': '2000ms'
}
}
}
}
- 键名（如
'120'）会生成对应类名duration-120 - 值必须带单位，
'120ms'有效，120或'120'无效 - 重启构建工具（如
npm run dev）才能生效，热更新不识别新配置
响应式 duration 要用 {screen}: 前缀，不能靠媒体查询手写
小屏设备上过长的过渡（比如 duration-500）容易显得拖沓，而大屏可能需要更舒缓的节奏。Tailwind 不支持 @media (hover: hover) 这类媒体查询变体，但原生支持断点前缀。
-
md:duration-300→ 仅在中屏及以上应用 300ms -
hover:duration-150默认不生成，需在variants.extend.transitionDuration中显式开启 - 移动端慎用 hover 触发的 duration，优先考虑
active:或group-hover:替代
多个 transition 属性共用一个 duration，无法单独指定不同时间
Tailwind 的 duration- 类是全局作用于整个 transition 声明的，不像原生 CSS 可以写 transition-duration: 0.2s, 0.6s 给 opacity 和 transform 分配不同耗时。
这意味着：
- 如果同时用了
transition-colors transition-transform，那么颜色变化和缩放都走同一个duration-值 - 想实现“颜色快变、缩放慢动”，只能拆成两个独立元素，或改用 CSS-in-JS / 自定义 keyframes
-
transition-all+duration-300是最省事的组合，但可能意外过渡box-shadow或filter，造成卡顿
真正需要差异化时间控制时，duration- 类就到边界了，得切回原生 transition 写法或引入插件（如 tailwindcss-transitions）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
