Tailwind JIT失效是因为编译器仅静态扫描源码中完整、静态、字面量存在的类名，不执行JS或展开模板字符串，如text-${color}-600在构建时未被识别，导致对应CSS规则缺失。
直接用模板字符串拼接（比如 className={`p-${size} ${isActive ? 'bg-blue-500' : 'bg-gray-200'}`}）在 Tailwind v3 JIT 模式下必然失效——不是写法错，是编译器根本没生成对应 CSS 规则。
为什么 className={`text-${color}-600`} 会失效
Tailwind v3 的 JIT 编译器不执行 JS，只扫描源码中**完整、静态、字面量存在的类名字符串**。它看到的是 text-${color}-600 这个未展开的模板字面量，而不是 text-blue-600 或 text-red-600。这些类不会出现在最终 CSS 文件里，浏览器即使渲染出 class 属性，也无样式可应用。
- 错误现象：元素 DOM 上有
class="text-blue-600"，但文字颜色没变 - 验证方式：搜索
dist/*.css或.next/static/css/里的文件，确认text-blue-600是否真实存在 - 开发服务器热更新缓存可能掩盖问题，改完务必重启
npm run dev
安全拼接的三种写法（v3 全支持）
核心原则：所有类名必须作为字符串字面量出现在源码中，不能藏在变量、函数或插值里。
-
clsx()：最推荐。自动过滤false/null/undefined，支持对象和嵌套数组className={clsx('p-3', isPrimary && 'bg-blue-600', size === 'lg' && 'text-lg')} - 数组
.filter(Boolean).join(' ')：零依赖，JIT 可静态分析每个数组项className={['p-3', isPrimary ? 'bg-blue-600' : '', disabled ? 'opacity-50' : ''].filter(Boolean).join(' ')} - 提前定义完整键值对：适合有限、确定的状态组合
const variants = { primary: 'bg-blue-600 text-white', outline: 'border border-blue-600' };className={variants[variant]}
哪些写法绝对不能用
哪怕看起来“能跑通”，也会导致 JIT 编译漏掉类名，上线后样式消失。
立即学习“前端免费学习笔记（深入）”；
- 模板字符串含变量：
className={`p-${size} ${theme}-bg`} - 运行时拼接：
const cls = baseClasses + ' text-red-500'; className={cls} - 从对象取值再拼：
const map = { sm: 'p-2' }; className={map[size] + ' rounded'} - 自定义函数返回类名：
className={getClasses({ size, variant })}（JIT 不执行 JS 函数）
需要动态值怎么办？用 safelist
当类名必须来自用户输入、API 返回或不可穷举的数字（如 line-clamp-5），就得显式告诉 Tailwind：“这些模式我确定会用”。
- 写正则时必须匹配完整类名：
{ pattern: /^line-clamp-\d+$/ }，不能写/line-clamp-/ - 响应式前缀要显式包含：
{ pattern: /^(md|lg):text-red-500$/ } - HEX 颜色等任意值需用
bg-[#3b82f6]语法，并加入safelist或启用content中的extract配置 - 改完
safelist必须重启开发服务器，缓存不会自动刷新
最常被忽略的点：你以为是逻辑 bug，其实是 JIT 根本没打包那个类；你以为清了缓存就行，其实得关掉 dev server 再重开。Tailwind v3 不是运行时库，它只认你亲手敲进代码里的每一个字符。
