硬编码类名可用，拼接参数却失效？Tailwind样式问题求助

我在试验Tailwind CSS，想要开发一个接收颜色名称、展示该颜色所有色值层级的组件，代码如下：

const Square = ({ clr }: { clr: string }) => {
  return <div className={twMerge("w-[50px] h-[75px]", clr)}></div>;
};

const ColorLine = ({ color }: { color: string }) => {
  return (
    <div className="flex">
      <Square clr={`bg-${color}-50`} />
      <Square clr={`bg-${color}-100`} />
      <Square clr={`bg-${color}-200`} />
      <Square clr={`bg-${color}-300`} />
      <Square clr={`bg-${color}-400`} />
      <Square clr={`bg-${color}-500`} />
    </div>
  );
};

但遇到了问题：方块没有背景色，传入ColorLine的color值为orchid-white。直接写死clr={"bg-orchid-white-300"}就能生效，改回拼接写法后有时也能正常工作，但初始状态下拼接写法完全不生效，十分困惑。

问题原因 #

Tailwind的JIT编译器是静态扫描代码生成CSS类的，初始时用模板字符串拼接bg-${color}-50这类动态类，编译器无法提前识别到bg-orchid-white-50这类具体类名，所以不会生成对应的CSS样式。而手动写死类名后，编译器扫描到该类并生成了样式，之后再改回拼接写法时，因为CSS已经存在，所以能生效。

解决办法 #

• 方法一：添加类名白名单
  在tailwind.config.js中配置safelist，告诉Tailwind要生成指定模式的颜色类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  safelist: [
    {
      pattern: /bg-orchid-white-(50|100|200|300|400|500)/,
    },
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

配置后，无论动态拼接还是直接写类名，Tailwind都会生成对应的背景色样式。

• 方法二：使用内联样式（适合自定义颜色场景）
  如果颜色是动态可变的，不想逐个加白名单，可以直接传递颜色值作为内联样式，但需要自己知道颜色层级对应的具体色值：

const Square = ({ bgColor }: { bgColor: string }) => {
  return <div className="w-[50px] h-[75px]" style={{ backgroundColor: bgColor }}></div>;
};

• 方法三：提前枚举所有可能的类名
  如果能提前确定所有可能的color值，可以枚举所有颜色层级类名，让Tailwind能扫描到：

const colorShades = ["50", "100", "200", "300", "400", "500"];

const ColorLine = ({ color }: { color: string }) => {
  return (
    <div className="flex">
      {colorShades.map((shade) => (
        <Square key={shade} clr={`bg-${color}-${shade}`} />
      ))}
    </div>
  );
};

这种方式下，Tailwind会扫描到所有拼接后的类名，生成对应的CSS。

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