应使用clsx和tailwind-merge替代手拼className：clsx自动过滤假值并支持对象/数组语法，tailwind-merge解决类名冲突与覆盖问题，确保JIT编译能识别所有条件类名。
直接用 class 属性拼接会破坏 JIT 编译
Tailwind 的 JIT 模式只编译你在源码中显式写出的 class 字符串，运行时拼接的字符串（比如 class={`${isSuccess ? 'text-green-600' : 'text-red-500'}`）在构建阶段无法被静态分析，导致样式丢失或 CSS 文件里没生成对应规则。
真正安全的做法是把所有可能用到的 class 提前“写死”在模板里，让 Tailwind 能扫描到：
- 用三元表达式或逻辑运算符列出完整 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 (
<span className={clsx(
'px-2 py-1 rounded text-xs font-medium',
status === 'success' && 'bg-green-100 text-green-800',
status === 'error' && 'bg-red-100 text-red-800',
status === 'warning' && 'bg-yellow-100 text-yellow-800'
)}>
{status}
</span>
);
}
注意：twMerge 更适合需要覆盖冲突 class 的场景（比如同时有 text-red-500 和 text-blue-500），而 clsx 更轻、更快；两者都不支持运行时任意字符串输入。
Vue 里 class 绑定语法天然安全
Vue 的 :class 对象/数组语法是静态可分析的，Tailwind 能正确提取其中的 class：
<div :class="[
'px-3 py-1 rounded',
status === 'active' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700',
isDisabled && 'opacity-50 cursor-not-allowed'
]">
{{ label }}
</div>
但要注意两点：
- 不能写成
:class="computedClassString"（变量返回字符串） - 对象写法也 OK：
:class="{ 'bg-green-500': isOnline, 'bg-red-500': !isOnline }"
服务端渲染或动态主题切换时，别依赖 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。
