Tailwind 动态拼接 className 会导致样式丢失，因其 JIT 编译器仅静态扫描字面量类名，无法识别 text-${color}-500 等模板字符串；正确做法是显式列出所有可能类名，或用 clsx + twMerge 封装 cn() 函数。
直接拼接 className={`text-${color}-500`} 这类字符串，样式在生产环境必然丢失——Tailwind 的 JIT 编译器根本看不到它，不会生成对应 CSS 规则。
为什么动态字符串拼接会让 Tailwind 样式失效
Tailwind 不是运行时解析 class 字符串的库，它靠静态扫描源码里「字面量出现的类名」来生成 CSS。你写 text-${color}-500，构建工具只看到一个模板字符串，完全无法推断出 text-red-500、text-blue-500 等具体组合，结果就是这些类压根不进最终 CSS 文件。
- 本地开发可能“看起来有效”，是因为 JIT 开启了热扫描或 dev server 有宽松 fallback，但 build 后必丢
-
hover:text-${state}-500、md:w-[${width}]同理，所有带变量插值的部分都会被忽略 - 哪怕只漏一个
bg-opacity-20，按钮 hover 半透明效果就彻底消失，且控制台无报错
安全写法：用三元/逻辑运算符显式列出所有可能 class
让每个可能的类都作为纯字符串出现在源码中，Tailwind 才能扫描到。不是“避免拼接”，而是“把所有分支都写死”。
- ✅ 正确：
className={isSuccess ? 'text-green-600' : 'text-red-500'} - ✅ 正确：
className={['p-4', isRounded && 'rounded-lg', isDisabled && 'opacity-50'].filter(Boolean).join(' ')} - ❌ 错误：
className={`p-${padding}-4 text-${color}-500`} - ❌ 错误：
className={dynamicClasses}（其中dynamicClasses是运行时计算出的字符串）
推荐封装：用 clsx + twMerge 组合成 cn()
手写 .filter(Boolean).join(' ') 容易漏空格、混入 undefined，而 clsx 自动过滤假值，twMerge 解决冲突（比如 p-4 p-6 只留 p-6），这才是工程化底线。
- 安装：
npm install clsx tailwind-merge - 封装：
export const cn = (...inputs) => twMerge(clsx(inputs)) - 使用：
className={cn('px-4 py-2', { 'bg-blue-500': isPrimary, 'opacity-75': isDisabled })} - 注意：
twMerge仅识别 Tailwind 官方类名语义（如知道text-red-500和text-blue-500冲突），自定义类名不参与合并
复杂场景：修饰符（dark:、hover:、md:）不能动态生成
你不能写 `${breakpoint}:text-lg` 或 `${state}:bg-blue-500` —— JIT 同样扫不到。修饰符必须和基础类一起作为完整字面量出现。
- ✅ 正确：
className="text-lg md:text-xl dark:bg-gray-800 hover:bg-gray-700" - ✅ 正确：
className={isDarkMode ? 'dark:bg-gray-800' : 'bg-white'} - ❌ 错误：
className={`${themeMode}:bg-gray-800`} - ❌ 错误：
cn(`${size}:px-4`, `hover:${variant}-bg`)（cn内部仍是字符串插值）
最常被忽略的一点：即使用了 cn()，只要参数里存在任何模板字符串插值，整个链路就失效。安全边界非常清晰——所有类名必须是源码里肉眼可见的、带引号的字符串，不多也不少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
