建议使用 clsx 与 tailwind-merge 替代手动拼接 className：clsx 可自动过滤假值并支持对象及数组语法，tailwind-merge 则能有效解决类名冲突与覆盖问题，确保 JIT 编译器能够识别所有条件类名。
直接用 class 属性拼接会破坏 JIT 编译机制
许多开发者在编写 Tailwind 时习惯通过字符串拼接来实现动态样式控制，例如 class={`${isSuccess ? 'text-green-600' : 'text-red-500'}`}。这种写法在 JIT 模式下会直接失效——因为 Tailwind 的 JIT 编译器只能在构建阶段扫描静态的 class 字符串，运行时动态拼接的内容无法被识别。结果就是，某些样式虽然在逻辑上存在，但对应的 CSS 规则并未生成，页面中直接缺失这些样式。
正确的做法其实很简单：将可能用到的所有 class 提前“写死”在模板中，让编译器能够完整扫描。具体来说，需要注意以下几点：
- 使用三元表达式或逻辑运算符列出完整的 class 列表，而非拼接字符串
- 避免
className={dynamicClasses}这种变量赋值方式，因为编译器无法穿透变量追踪其内容 - 如果使用 class 工具函数（如 clsx），必须确保传入的是确定的 class 字面量，而非变量拼接后的结果
React 中推荐用 clsx 或 twMerge 处理条件 class
提到工具函数，clsx 和 twMerge 是目前最轻量且兼容性最优的选择。它们本质上都是将条件判断转换为静态可分析的 class 列表，JIT 编译器能够识别这些字面量组合。
以下是一个 React + TypeScript 的示例：
import clsx from 'clsx';
function Badge({ status }: { status: 'success' | 'error' | 'warning' }) {
return (
{status}
);
}
有一点需要区分：twMerge 更适合处理 class 冲突的场景，比如同时出现 text-red-500 和 text-blue-500 时，它能自动合并并覆盖。而 clsx 更加轻量快速，仅负责条件拼接。两者都不支持运行时任意字符串输入——这一点至关重要，如果试图传入一个运行时才确定的字符串，JIT 依然无法识别。
Vue 中 class 绑定语法天然具备安全性
相比之下，Vue 的 :class 对象/数组语法本身就是静态可分析的，Tailwind 能正确提取其中的 class，无需像字符串拼接那样额外处理：
{{ label }}
不过有两个常见的坑需要注意：
- 不能写成
:class="computedClassString"，因为计算属性返回的字符串属于运行时变量，编译器无法进行静态分析 - 对象写法同样完全可行：
:class="{ 'bg-green-500': isOnline, 'bg-red-500': !isOnline }"，编译器能够识别其中的 key
服务端渲染或动态主题切换时，避免依赖 JS 计算 class
如果主题色来自 API 或用户配置，比如 primaryColor: 'indigo'，直接拼写 bg-${color}-500 会导致 JIT 缺失样式。此时必须预定义好可用颜色集，将主题限制在一个有限的 palette 内（例如 ['blue', 'indigo', 'purple', 'teal']），然后在模板中穷举所有合法组合：color === 'indigo' && 'bg-indigo-500 border-indigo-600'。
另一种方案是利用 CSS 自定义属性，配合 bg-[var(--primary)] 样式，但需要启用 content 配置，同时要注意 CSP 限制。真正难以处理的是完全未知的 hex 值——Tailwind 无法为其生成 class，此时只能退回到内联 style 或 CSS-in-JS 方案，而非硬套 Tailwind。毕竟工具是为开发者服务的，在合适的场景下应当灵活切换。
