Tailwind CSS动态设置的背景色样式未生效问题

Tailwind 采用构建时静态扫描的机制生成样式：它会遍历项目源码文件，提取所有出现过的完整类名，再生成对应的CSS规则。通过字符串模板动态拼接出来的类名（比如你代码里的bg-[${colors[index]}]）不会被扫描器识别，构建阶段根本不会生成这些类对应的样式。所以哪怕你在浏览器检查器里看到div上挂了正确的类名，没有匹配的CSS规则，背景色自然不会渲染。

方案1：映射表直接写全静态类名 #

不要用变量拼接类名，把用到的完整类名直接写在映射对象里，保证Tailwind扫描时能直接识别到所有类：

const colors = ['#7a5195', '#bc5090','#ef5675']

export default function App() {
  const names = ['Tyler', "Charles", 'Vince']
  // 直接写全完整类名，不做运行时拼接
  const labels = {
    Tyler: 'bg-[#7a5195]',
    Charles: 'bg-[#bc5090]',
    Vince: 'bg-[#ef5675]'
  }

  return (
    <>
    {
      names.map((name)=>{
        return(
          <div className={labels[name]}>
            {name}
          </div>
        )
      })
    }
    </>
  );
}

方案2：动态值直接用内联样式 #

如果颜色值后续可能动态扩展、不方便提前写全类名，直接用内联样式设置背景色是成本最低的方案，完全绕开Tailwind的类扫描限制：

const colors = ['#7a5195', '#bc5090','#ef5675']

export default function App() {
  const names = ['Tyler', "Charles", 'Vince']

  return (
    <>
    {
      names.map((name, index)=>{
        return(
          <div style={{ backgroundColor: colors[index] }}>
            {name}
          </div>
        )
      })
    }
    </>
  );
}

方案3：配置Tailwind安全列表 #

如果一定要保留动态拼接类名的写法，可以在Tailwind配置文件的safelist字段里声明所有需要用到的类，强制Tailwind在构建时生成这些类的样式，不管扫描阶段有没有找到对应的完整字符串：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其余配置保持不变
  safelist: [
    'bg-[#7a5195]',
    'bg-[#bc5090]',
    'bg-[#ef5675]'
  ]
}

配置完成后重启开发服务，原有代码即可正常渲染背景色。

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