JIT模式下Tailwind CSS在bg-[]中使用变量无法渲染颜色的问题

根本原理 #

JIT 模式的类名生成逻辑是构建时静态扫描，而非运行时动态解析：

• 构建阶段，Tailwind 会扫描所有源码文件中的文本，只有匹配类名规范的完整静态字符串，才会被识别为合法类名，并生成对应的 CSS 规则打包到产物中。
• 无论你是通过 props 传递颜色值，还是在组件文件内部定义颜色常量，只要类名是通过模板字符串拆分拼接得到的（比如bg-[${color}]），在构建扫描阶段看到的都只是bg-[加变量占位的片段，完全不满足 Tailwind 的类名匹配规则，不会被识别为需要生成样式的类名。
• 运行时 JS 执行完拼接逻辑后，你在 Chrome DevTools 里看到的bg-[#84AB86]只是最终挂在 DOM 上的类名字符串，但对应的 CSS 规则从来没有被构建流程生成过，自然无法生效。
• 为什么直接写死类名可以生效？因为bg-[#84AB86]是完整出现在源码里的静态字符串，构建阶段可以被正常扫描识别，对应样式也会被正常生成。

可行的解决方式 #

• 不要拆分类名结构，传递完整的可被静态扫描的类名片段
  错误的传值方式：传纯颜色值#84AB86，在组件内拼接bg-[${color}]
  正确的传值方式：把完整的类名作为常量存储在可被扫描到的代码位置，传完整类名：

  // 完整类名是静态存在于源码中的，可被正常扫描
  const colorClassMap = {
    primary: 'bg-[#84AB86]',
    success: 'bg-[#84CC79]'
  }
  // 调用组件时传完整类名
  <List text="something" bgClass={colorClassMap.primary} />
  // 组件内部直接使用传入的完整类名
  <div className={bgClass}>内容</div>
  

• 对需要动态使用的类名，在 Tailwind 配置的content扫描白名单中明确声明，确保构建阶段为这些类名生成对应样式
• 完全动态的属性值，直接使用原生内联样式实现，绕过 Tailwind 的类名扫描逻辑，例如：

  // 直接通过内联样式绑定动态颜色，无需依赖 Tailwind 类名
  <div style={{ backgroundColor: color }}>内容</div>
  

内容的提问来源于stack exchange，提问作者Maxime Ghéraille