Tailwind CSS中模板字面量动态拼接类名无法正常生效

该问题由Tailwind CSS的静态构建扫描机制和动态类名拼接的写法不兼容导致：

• Tailwind 不会在构建阶段运行你的业务JS/TS代码，只会对源码文件做静态字符串扫描，提取所有完整、可直接识别的类名字符串，再生成对应的CSS规则。动态拼接、拆分的类名片段无法被扫描识别，自然不会生成对应样式。
• 你当前的写法是将bg-前缀和变量存储的颜色值拆分后再拼接，构建阶段Tailwind只能扫描到零散的bg-字符串和变量名，根本识别不到bg-[#AAA32E]这类完整的任意值类名，因此不会生成对应的背景色CSS。

你观察到的「部分颜色可正常生效」，本质是这部分颜色对应的Tailwind类刚好在项目其他位置被完整写死过，Tailwind提前生成了对应CSS，和动态拼接逻辑本身无关。

直接写死className="bg-[#AAA32E]"能正常生效，是因为构建阶段Tailwind直接扫描到了这个完整的类名字符串，会正常生成对应的样式规则。

可行修复方案 #

• 方案1（适合颜色值可枚举的场景）：不要拆分拼接类名，直接在变量中存储完整类名，同时在Tailwind配置的safelist中添加所有可能传入的颜色值，确保构建时不会漏生成样式：

let cardColourClass: string;
if (cardColour) {
  cardColourClass = `bg-[${cardColour}]`;
} else {
  cardColourClass = "bg-white/50"
}

// 渲染时直接使用完整类名变量
<div className={cardColourClass}></div>

• 方案2（适合颜色值完全动态、不可枚举的场景）：直接使用内联样式设置背景色，完全绕开Tailwind类名扫描逻辑，不会出现样式丢失问题：

<div 
  style={{ 
    backgroundColor: cardColour ? cardColour : 'rgba(255, 255, 255, 0.5)' 
  }}
></div>

内容的提问来源于stack exchange，提问作者user1753491