tailwind jit无法识别classname={text-${color}-600}，因其仅扫描源码中写死的完整字符串字面量，不执行js插值、不推测变量值，故该模板字符串在构建时未被解析为实际类名，导致对应css规则未生成。
Tailwind JIT 为什么看不到 className={`text-${color}-600`}
它根本没执行 JS，也不猜变量值——JIT 编译器只在构建时用正则或 AST 扫描源码里**已经写死的完整字符串**，比如 text-blue-600 或 bg-gradient-to-b。text-${color}-600 在源码中就是一段模板字面量，中间的 ${color} 是 JS 表达式，编译器直接跳过，不会展开、不求值、不拼接。
现象是 DOM 里 class 属性显示正常（如 text-blue-600），但浏览器开发者工具查不到对应 CSS 规则；本质是该类名压根没进最终 CSS 文件。
- 开发服务器（
npm run dev）和生产构建（npm run build）全都会失效 -
!important、调整 class 顺序、加 wrapper div 都没用——规则不存在，覆盖无从谈起 - 哪怕你把
content配得再全，也扫不到运行时才“算出来”的字符串
哪些写法会被 JIT 完全忽略
只要类名被拆开、插值、或依赖运行时逻辑，JIT 就无法提取。常见失效模式包括：
-
className={`bg-[${hex}]`}—— 自定义颜色插值，JIT 不解析变量hex -
className={`text-${size}-font-bold`}—— 中间${size}是变量，扫描器只看到text-和-font-bold两段 -
className={`from-${type}-500 to-${type}-800`}—— 即使type只有 3 个取值，JIT 也不会穷举 -
class="md:text-${size}"（Vue 模板）或:class="`p-${padding}`"—— 同理，非字面量即不可见
注意：tw`text-red-500`（用 tailwind-merge 或 @headlessui/react 的 tagged template）能被识别，是因为它仍是静态字符串字面量；而任何带 ${...} 的模板字符串都不行。
如何让 JIT “看见”你想要的类名
核心原则：让每个可能用到的类名，都以**完整、静态、无插值**的形式出现在源码中。可行路径只有两条：
-
预定义完整类名：把组合逻辑提到数据层，例如
const sizes = { sm: 'text-sm p-2', lg: 'text-lg p-4' }，然后className={sizes[size]} -
配置
safelist：当取值有限且可枚举时（如line-clamp-1到line-clamp-6），在tailwind.config.js里显式声明：module.exports = { safelist: [ 'line-clamp-1', 'line-clamp-2', 'line-clamp-3', // 或用正则：{ pattern: /line-clamp-\d+/ } ] }
别试图用 content: ["./src/**/*"] 拯救动态拼接——路径配对了也没用，JIT 不会执行 JS；也别把自定义类（如 my-button）漏加 safelist，否则 PurgeCSS 会把它删掉。
内联样式是不是更简单？什么时候该用
对纯动态值（比如用户输入的颜色、实时计算的 padding 像素），style 属性确实绕过所有限制：
-
style={{ backgroundColor: hex, paddingTop: `${px}px` }}—— 完全 runtime，零构建依赖 - 适合单次、低频、不可枚举的样式控制（如图表色块、拖拽尺寸）
- 缺点：失去 Tailwind 的响应式前缀（
md:bg-red-500）、状态变体（hover:bg-blue-600）、以及原子类的可组合性
真正容易被忽略的是：JIT 的“静态扫描”不是 bug，而是性能基石。它让你的 CSS 体积严格跟随实际使用，而不是打包一堆永远用不到的 text-2xl、bg-opacity-95。一旦开始混用内联样式和动态类名，维护边界就模糊了——哪个该进 safelist？哪个该转 style？建议团队统一约定：可枚举 → safelist；不可枚举 → style；其余一律预定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
