加了transition类却没动画，是因为只写了“怎么变”而没定义“从哪变到哪”；必须成对使用基础态与状态变更类（如hover:、active:或JS切换class），且transition-property需匹配可动画属性（如transform、opacity），duration和ease也须在常态类中声明。
加了 transition 类却没动画，不是 Tailwind 坏了，而是你只写了“怎么变”，没写“从哪变到哪”。必须成对出现状态类，否则过渡永远不触发。
transition 类为什么单独写没反应
它只是设置 transition-property 和 transition-duration，不负责驱动变化。浏览器需要明确的起始态和结束态才能插值动画。
-
div transition-all单独存在 → 没有样式变更，无动画 -
div transition-colors hover:text-blue-500→ 有基础色 + 悬停色，颜色平滑过渡 - 用 JS 切换 class 时，确保切换的是可动画属性（如
opacity、transform），别切display或未设初值的height
哪些属性真能平滑过渡，怎么选
不是所有 CSS 属性都支持过渡。Tailwind 默认的 transition 只覆盖颜色、边框、文本装饰等安全项；想动得顺，得手动指定目标属性。
-
transform和opacity是 GPU 加速的，首选：用transition-transform hover:scale-110 -
width/height易触发重排，transition-width在 v3.0+ 已默认禁用；改用transform: scaleX()模拟更稳 -
max-height可动画，适合菜单展开；但必须设足够大的目标值（如max-h-96），不能用max-h-full - 避免
transition-all：它会连box-shadow、filter一起过渡，可能卡顿或抖动
duration 和 timing 必须写在常态元素上
动画时长（如 duration-300）和缓动函数（如 ease-in-out）必须放在非 hover / 非 active 的基础类里，否则离开时没动画。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
transition-transform duration-300 ease-in-out hover:scale-105 - ❌ 错误：
transition-transform hover:scale-105 hover:duration-300（离开瞬间跳回） -
duration-类单独写无效，必须和某个transition-类共存才生效
移动端 hover 不生效，该用什么替代
手机没有 hover，纯 hover: 类在触摸设备上基本失效。需要兼容时，优先考虑 active: 或 group-hover:（配合 group 容器）。
- 按钮点击反馈：用
active:scale-95替代hover:scale-105 - 下拉菜单触发区：把触发元素包进
group，再用group-hover:控制子菜单 - 别依赖
hover:做核心交互逻辑，尤其表单或导航类组件
最易被忽略的一点：过渡效果是否生效，和类名顺序无关，但和 DOM 状态是否真实变化强相关——JS 动态插入元素后，如果没等节点挂载完成就加动画类，或者 React/Vue 中状态更新异步延迟，都会导致动画“一闪而过”或根本不启动。
