tailwind jit 模式仅识别字面量字符串类名，classname={text-${color}} 因动态拼接无法被扫描，导致构建后样式丢失；应使用 clsx 显式声明所有可能类名，并配合 twmerge 解决覆盖冲突。
直接拼接字符串生成 className 在构建时不可见，Tailwind JIT 编译器会漏掉这些类，上线后样式就没了——这不是 bug，是设计使然。
为什么 className={`text-${color}`} 会失效
Tailwind 的 JIT 模式只扫描源码中“字面量字符串”，比如 "text-red-500" 或 "bg-blue-600"。一旦你写成 `text-${color}`，哪怕 color 是确定的字符串（如 "red-500"），构建阶段也无法静态分析出完整类名，对应 CSS 规则就不会被生成。
- 开发时看着正常（因为浏览器能解析运行时拼出的类），但打包后缺失样式
- IDE 不提示、无法跳转、类型检查失效
- 用户输入污染
color时还可能引入非法类名（如text-;alert(1)）
用 clsx 安全组合条件类名
clsx 不是“锦上添花”，而是绕过 JIT 限制的必要手段：它把所有可能用到的类名以字面量形式显式列出，让 Tailwind 能扫描到。
- 安装：
npm install clsx - 基础写法：
className={clsx("p-2 rounded", isActive && "bg-blue-600", isDisabled && "opacity-50")} - 对象写法更清晰：
className={clsx({ "bg-blue-600": isActive, "cursor-not-allowed": isDisabled })} - 它自动跳过
false、null、undefined、空字符串，不会渲染出className="false"
当类名存在覆盖关系时，必须加 twMerge
比如同时需要 text-red-500 和 text-blue-500，或 hidden 和 flex——CSS 层叠顺序取决于字符串顺序，但手写拼接没法保证语义优先级。
-
clsx只做拼接，不理解类名含义；twMerge才能识别 Tailwind 类族语义 - 安装：
npm install tailwind-merge - 用法：
className={twMerge(clsx("text-sm", { "text-red-500": isError, "text-blue-500": isSuccess }))} - 它会自动剔除被覆盖项（如多个
text-中只留最后一个），并正确处理sm:hidden和md:flex这类响应式冲突
别在 clsx 或 twMerge 里调用函数
有人把状态判断逻辑封装成函数再传进去，比如 clsx(computeClasses(props))。这会导致每次渲染都执行该函数，如果函数里有计算、API 调用或 setState，就会引发性能问题或意外副作用。
- 所有传给
clsx/twMerge的值，必须是字面量、布尔表达式或已计算好的字符串 - 复杂逻辑应提前在组件顶层计算好，再作为纯值传入
- 尤其注意不要写成
clsx({ [dynamicKey]: true })—— 动态键名同样无法被 JIT 扫描
真正难的不是写对一个 className，而是在多人协作、组件复用、状态嵌套加深时，依然让每个类名可追溯、可预测、可删除。工具只是载体，关键是你是否始终把类名当作“显式声明”而非“运行时生成”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
