Tailwind中拼接字符串类名失效原因及解决方案咨询

在React项目里用Tailwind CSS时，拼接字符串生成的动态颜色类名没法给元素应用样式，只能靠style属性凑活。我的场景是用户通过颜色选择器选色后要动态设置背景色，不可能预定义所有bg-[color]类名，测试代码如下：

const red500 = "red-500";
const red600Hex = "#dc2626";
const bgColor = "bg-[" + red600Hex + "]";
const bgColor2 = "bg-[" + "#dc2626" + "]";

function App() {
    return (
        <>
            <h1 className={` bg-${red500} `}>Hello</h1>
            <h1 className={` bg-[${red600Hex}] `}>Hello</h1>
            <h1 className={` bg-${`[${red600Hex}]`} `}>Hello</h1>
            <h1 className={` ${bgColor} `}>Hello</h1>
            <h1 className={` ${bgColor2} `}>Hello</h1>
        </>
    );
}

问题原因 #

• Tailwind的JIT编译器是构建时静态扫描所有类名来生成CSS规则的，动态拼接的类名在构建阶段是变量，编译器识别不出来，自然不会生成对应的样式。
• 你代码里bg-${red500}能生效，是因为red-500是Tailwind预定义的类名，编译器能识别bg-red-500这个完整的静态类名模式。

解决办法 #

1. 直接用style属性（最适配动态用户输入场景） #

既然用户选的颜色是完全动态的，没法提前枚举，直接用内联style是最省事的方案：

<h1 style={{ backgroundColor: red600Hex }}>Hello</h1>

2. 用Tailwind的style函数（v3.3及以上版本支持） #

要是想保留Tailwind的语法风格，可以用官方提供的style函数生成内联样式：

import { style } from '@tailwindcss/react';

const bgStyle = style({ backgroundColor: red600Hex });

function App() {
  return <h1 className={bgStyle}>Hello</h1>;
}

3. 配置允许动态颜色值（不推荐，会增大CSS体积） #

如果一定要用类名的方式，可以在tailwind.config.js里配置允许动态颜色值，但会导致CSS体积变大，只适合有限范围的动态颜色：

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        dynamic: ({ opacityVariable, opacityValue }) => ({
          DEFAULT: `rgb(var(--dynamic-color) / ${opacityValue ?? 1})`,
        }),
      },
    },
  },
};

然后在组件里设置CSS变量：

function App() {
  // 把hex颜色转成rgb格式
  const hexToRgb = (hex) => {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `${r}, ${g}, ${b}`;
  };

  return (
    <h1 
      className="bg-dynamic"
      style={{ '--dynamic-color': hexToRgb(red600Hex) }}
    >
      Hello
    </h1>
  );
}

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