React 中使用 Tailwind 的动态 class 切换时，若直接在模板字符串中拼接变量（如 opacity-${isVisible ? 50 : 0}），会导致类名生成错误（如 opacity-50 变成 opacity-50 虽看似正确，但 scale-[180%] 等动态值无法被 Tailwind 正确解析），从而让 transition 失效。根本原因是 Tailwind 仅在构建时静态解析类名，不支持运行时动态插值。
react 中使用 tailwind 的动态 class 切换时，若直接在模板字符串中拼接变量（如 `opacity-${isvisible ? 50 : 0}`），会导致类名生成错误（如 `opacity-50` 变成 `opacity-50` 虽看似正确，但 `scale-[180%]` 等动态值无法被 tailwind 正确解析），从而让 transition 失效。根本原因是 tailwind 仅在构建时静态解析类名，不支持运行时动态插值。
在 React 中配合 Tailwind 实现平滑过渡动画，关键在于确保所有参与动画的类名都是 Tailwind 预定义的完整原子类（atomic classes），而非依赖运行时字符串插值生成的非标准类名（例如 scale-[180%] 或 opacity-${n}）。Tailwind 的 JIT（Just-in-Time）引擎虽支持部分动态值（如 scale-[1.8]），但它不会扫描 JavaScript 模板字符串中的变量表达式——也就是说，scale-[${isVisible ? "180%" : "100%"}] 中的 ${...} 在构建阶段被忽略，最终生成的类名可能无效或未被编译，导致浏览器无法识别对应 CSS 属性，transition 自然失效。
✅ 正确做法是：将条件逻辑完全移出 className 字符串，用三元运算符分别拼接完整的、已知存在的 Tailwind 类名：
<img
src={background}
alt="background"
className={`
absolute top-[20%] -left-[20%] transform z-0
transition duration-2000 ease-in-out
${isVisible ? 'opacity-50 scale-180' : 'opacity-0 scale-100'}
`}
/>? 提示：
top-[20%]和-left-[20%]是合法的任意值语法（需开启safelist或使用 JIT 模式），可保留；但scale-[180%]不是标准类，应替换为scale-180（等价于transform: scale(1.8)）。同理，opacity-50对应opacity: 0.5，而opacity-0是opacity: 0—— 这些才是 Tailwind 官方预设并保障编译的类。
? 补充注意事项：
立即学习“前端免费学习笔记（深入）”；
-
避免混合单位写法：
scale-180是合法的（表示scale(1.8)），但scale-[180%]不被识别；同理，优先用translate-x-4而非translate-x-[20px]（除非已配置 safelist）。 -
确保 transition 属性覆盖目标样式：
transition默认只作用于color,background-color,opacity,transform等属性。本例中scale和opacity均属 transform + opacity，因此transition无需额外指定property，但建议显式写全以增强可读性：transition-opacity transition-transform duration-2000 ease-in-out。 -
初始状态一致性：组件挂载时
isVisible为false，务必保证初始 class（如opacity-0 scale-100）与动画起点完全匹配，否则可能出现跳变。
总结：Tailwind 的 class 必须“静态可分析”。所有条件分支都应输出明确的、存在于 Tailwind 配置中的完整类名组合，而非依赖 JS 插值构造新类名。这是保障动画可靠性的核心原则。
