如何在Tailwind CSS中构建动态类名 拼接类名不生效问题求解

问题根因 #

你使用的动态拼接类名写法不符合Tailwind CSS的官方使用规范。Tailwind的JIT编译器在构建阶段会静态扫描项目所有代码文件里的完整类名字符串，只会为扫描到的、完整存在的类生成对应样式。

你通过模板字符串拼接的bg-${color}-500在构建阶段不存在完整的类名字符串，因此JIT编译器不会生成bg-primary-500、bg-secondary-500等类的样式，即使运行时DOM里渲染出了正确的类名，也没有对应样式可以生效。你手动写死完整类名可以生效，就是因为编译器扫描到了完整的类名字符串，提前生成了对应样式。

解决方案 #

方案1：使用类名映射表（最推荐） #

提前枚举所有可选颜色对应的完整Tailwind类名，存入映射对象，组件运行时直接根据传入的prop读取对应完整类名即可，编译器会扫描到映射表中所有的完整类名并生成样式：

const colorClassMap = {
  primary: 'bg-primary-500',
  secondary: 'bg-secondary-500'
}

// 组件内使用
<button
  className={`
    w-40 rounded-lg p-3 m-2 font-bold transition-all duration-100 border-2 active:scale-[0.98]
    ${colorClassMap[color]}
  `}
  onClick={onClick}
  type="button"
  tabIndex={0}
>
  {children}
</button>

方案2：配置safelist强制生成样式 #

如果颜色可选值较多不想写映射表，可以在tailwind.config.js中添加safelist配置，强制Tailwind生成指定类的样式，无论编译器有没有扫描到对应类名：

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          500: '#B76B3F',
        },
        secondary: {
          500: '#344055',
        },
      },
    },
  },
  safelist: [
    'bg-primary-500',
    'bg-secondary-500'
  ]
}

可选值较多时也可以用正则批量匹配：

safelist: [
  {
    pattern: /bg-(primary|secondary)-500/,
  }
]

方案3：内联样式（仅适用于完全动态的特殊场景） #

如果颜色值完全无法提前枚举，可以把颜色值通过style属性直接传入，这种方式不需要依赖Tailwind的类生成，适合自定义程度极高的场景。

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