React中Tailwind CSS动态拼接颜色类名样式异常问题

这是Tailwind CSS静态生成机制导致的典型问题，和React框架本身无关。
Tailwind在构建阶段会静态扫描代码文件里出现的完整类名字符串，只会把扫描匹配到的类对应的CSS打包进最终产物，它不会执行JavaScript逻辑去解析拼接出来的动态类名。
你写的className={`bg-${colors[index]}`}属于运行时拼接类名的写法，构建阶段Tailwind根本没法预判colors[index]的实际取值，找不到bg-red-500、bg-blue-500这类完整类名的匹配项，自然不会生成对应的样式代码。
之所以偶尔能渲染出红色、白色背景，是因为你项目其他位置刚好写死过bg-red-500、bg-white-500这两个完整类名，被Tailwind扫描到后打包进了产物，剩下的颜色类因为从来没有以完整字符串形式出现在代码里，没有对应的样式规则，自然不会生效。

方案1：数组直接存完整类名（优先推荐） #

不要拆分Tailwind类名的前缀和后缀，把完整的类名直接存在数组里，保证Tailwind扫描时能直接匹配到完整字符串：

// 直接存储完整的背景色类名
const colors = [
  "bg-red-500",
  "bg-blue-500",
  "bg-green-500",
  "bg-yellow-500",
  "bg-cyan-500",
  "bg-white-500",
  "bg-orange-500"
]

使用时直接取数组对应项即可，不需要额外做字符串拼接：

<h1 className={colors[index]}></h1>

方案2：配置safelist强制生成指定类 #

如果确实需要保留类名拼接的写法，可以在Tailwind配置文件的safelist字段里，把所有需要动态使用的类名列出来，强制Tailwind构建时生成这些类的样式，不管代码里有没有扫描到完整匹配：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 原有配置的扫描路径
  ],
  safelist: [
    'bg-red-500',
    'bg-blue-500',
    'bg-green-500',
    'bg-yellow-500',
    'bg-cyan-500',
    'bg-white-500',
    'bg-orange-500',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这个方案的缺点是后续新增、修改颜色类的时候需要同步更新配置，维护成本比第一种高，只适合动态类范围固定、不方便调整原有拼接逻辑的场景。

开发时要注意：只要Tailwind类名不是以完整字符串的形式直接写在代码里，默认就不会被Tailwind识别生成对应样式，尽量不要用字符串拼接、截取、动态组合的方式写Tailwind类名。

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