Tailwind JIT失效的根本原因是其编译器仅静态扫描源码中字面量存在的完整类名，无法解析模板字符串（如text-${color}-600）或运行时拼接的动态表达式，导致对应CSS规则未生成。
为什么直接拼接字符串会导致Tailwind JIT失效
Tailwind的JIT编译器只扫描源码中**静态出现的类名字符串**，比如 className="text-blue-500 bg-white"。一旦你用变量、模板字面量或条件拼接（如 className={`${base} ${isHovered ? 'hover:bg-gray-100' : ''}`），JIT就无法在构建时识别这些类，最终它们不会被生成到CSS中——页面上就看不到效果，但控制台也没报错，非常隐蔽。
安全拼接的三种可行方式
核心原则：所有类名必须在构建时可静态分析。以下方法都满足这点：
- 用
clsx或classnames—— 它们是JIT友好的，因为Babel插件能解析其参数结构。示例：className={clsx('text-sm', isPrimary && 'bg-blue-600', disabled && 'opacity-50')} - 用数组 +
join(' ')—— 纯原生，无依赖。JIT能识别数组字面量里的每个字符串项：className={['text-sm', isPrimary ? 'bg-blue-600' : '', disabled ? 'opacity-50' : ''].join(' ')} - 提前定义完整组合类名变量 —— 适合固定几种子状态。例如：
const buttonClasses = { primary: 'bg-blue-600 text-white', secondary: 'bg-gray-200 text-gray-800' };，再用className={buttonClasses[variant]}
哪些写法绝对要避开
这些看似简洁的写法都会让JIT“看不见”类名：
- 模板字面量嵌套三元：
className={`p-${size} ${isActive ? 'bg-green-500' : 'bg-gray-200'}`→p-${size}是动态的，整个字符串被当作不可分析的黑盒 - 从对象取值拼接：
const classes = { sm: 'p-2', lg: 'p-6' }; className={classes[size] + ' text-red-500'}→ 字符串连接运算打断静态分析 - 调用自定义函数返回类名：
className={getButtonClass(variant)}→ JIT不执行JS函数，只扫描字面量
遇到「类名没生效」先查这三点
不是代码逻辑错，而是JIT根本没生成对应CSS：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，检查元素的
class属性是否真的存在那些类名（比如bg-blue-600）；如果存在但没样式，说明JIT没打包它 - 搜索项目里是否有
tailwind.config.js中配置了content路径遗漏了当前组件文件 - 确认没在类名里混入运行时计算的值，比如
text-[${dynamicColor}]（这是任意值插值，JIT默认禁用，需显式配置safeList）
最常被忽略的是：开发时热更新可能缓存旧的CSS产物，改完类名后最好清掉 .next/cache 或 dist 目录再重跑构建。
