transition类单独使用无效，因其仅定义“如何过渡”而不触发状态变化；必须配合起点与终点样式（如opacity-0→opacity-100）及hover/focus/JS等触发机制才能生效。
transition类单独加在元素上为什么没动画
因为transition类只定义“怎么变”，不决定“变不变”——它等同于 CSS 的transition-property和transition-duration，但不会自动触发状态变化。浏览器需要两个明确的样式快照（比如opacity-0 → opacity-100）才能插值动画。
常见错误是这样写：div transition-all，然后指望悬停就动。结果什么都没发生。真正起作用的是组合：必须有起点 + 终点 + 触发机制。
- ✅ 正确示例：
transition-opacity duration-300 hover:opacity-75（默认opacity-100，悬停时变成opacity-75） - ❌ 错误写法：
transition-all单独存在，或只写hover:scale-110却不配transition-transform - JS 控制时，别用
hidden/block切换——display不可过渡；改用opacity-0+invisible+pointer-events-none模拟隐藏
为什么hover时有动画、移开却直接跳回
说明transition类被错误地写进了hover:或active:这类伪类里，而不是基础状态中。浏览器只在有transition声明的状态下才记录起始值；移出时若该声明已消失，就只能硬切。
打开 DevTools 的 Elements 面板，选中元素，在 Styles 侧边栏里搜索transition，确认它是否稳定出现在“默认样式”下，而不是仅在:hover规则里。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确结构：
transition-opacity duration-200 ease-in-out hover:opacity-80（transition-和duration-始终生效） - ❌ 错误结构：
hover:transition-opacity hover:duration-200 hover:opacity-80（移出瞬间transition丢失） - Vue/React 中用 JS 切换 class 时，把
transition-类放在基础 class 里（如fade-el），状态类只管值（如fade-el--in）
哪些属性能平滑过渡？哪些根本不行
Tailwind 默认的transition只覆盖颜色、边框、背景等安全项。想让 transform 或 opacity 动起来，必须显式声明对应类，否则浏览器根本不尝试插值。
更关键的是：某些属性压根无法过渡，不是 Tailwind 的锅，是 CSS 规范限制。比如height: auto没有数值基准，display: none会销毁渲染树，浏览器连起点都抓不到。
- ✅ 安全可过渡：
opacity（用transition-opacity）、transform（用transition-transform）、margin/padding、color - ⚠️ 慎用/需绕过：
height→ 改用max-h-0→max-h-96+overflow-hidden；width同理 - ❌ 别碰：
display、visibility（虽可切但无过渡）、text-decoration（下划线得用border-bottom或伪元素模拟）
动态拼接类名或 JS 添加时 transition 失效
不是 JS 写错了，而是 Tailwind 构建阶段没扫描到这些类名——JIT 编译器只认源码里的字面量，不解析字符串拼接或变量插值。
比如className={`transition-all ${isActive ? 'opacity-100' : 'opacity-0'}`}没问题，但className={`from-${color}-500`}这种就失效，因为from-blue-500没进最终 CSS。
- ✅ 解决方案：把可能用到的类加进
safelist，例如safelist: ["opacity-0", "opacity-100", /from-[a-z]+-500/] - ❌ 避免通配正则如
/.*-500/——CSS 体积爆炸，构建变慢 - 检查
content路径是否覆盖所有源文件，尤其注意.tsx、.mdx、index.html是否漏掉；Vite 用户必须显式包含public/index.html - 多个类名拼成一串（如
container-addTask）会被当做一个类——空格不能少：container addTask
