Tailwind CSS动态拼接类名无法响应React状态变化问题

Tailwind CSS 是 构建时静态扫描生成样式 的工具，不会在运行时动态解析拼接生成的类名。
打包阶段Tailwind只会读取源码文件中出现的完整类名字符串，匹配到对应规则后才会生成对应的CSS代码。你第一种动态拼接类名的写法，源码中留存的是bg-[#${color}]这个带模板变量的片段，Tailwind扫描时无法识别出最终会生成bg-[#222222]、bg-[#DDDDDD]两个类，自然不会提前生成这两个类对应的背景样式。哪怕运行时DOM上确实挂载了正确的类名，没有匹配的CSS规则，样式自然不会生效。
第二种写法能正常运行，是因为源码中直接写死了两个完整的类名字符串，Tailwind扫描时可以直接识别到，就会提前生成对应的样式规则。

你可以根据实际业务的复杂度选对应方案：

• 方案1：配置safelist预生成需要的类
  如果动态使用的颜色数量有限、可以提前枚举，直接在Tailwind配置文件的safelist字段中声明所有需要动态使用的类，强制Tailwind生成对应样式，配置示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其余原有配置保持不变
  safelist: [
    'bg-[#222222]',
    'bg-[#DDDDDD]'
    // 后续新增动态颜色直接在这补充即可
  ]
}

• 方案2：动态值直接用内联样式实现
  既然业务中本身存储的就是原始颜色值，不需要强行封装成Tailwind类，直接通过内联style属性绑定动态颜色即可，完全不受Tailwind静态扫描规则限制，适合动态值多、无法提前枚举的复杂场景：

import React, { useState } from "react";

function App() {
  const [color, setColor] = useState('222222')
  const toggleColor = () => color === '222222' ? setColor('DDDDDD') : setColor('222222');
  return (
    <div className='h-screen w-full flex flex-col justify-center items-center'>
        <button onClick={toggleColor}>Toggle Color</button>
        <div 
          className="w-[100px] h-[100px]"
          style={{ backgroundColor: `#${color}` }}
        ></div>
    </div>
  )
}

export default App;

• 方案3：提前定义类名映射表
  如果不想修改Tailwind配置、也不想混用内联样式，可以提前定义颜色值到完整Tailwind类名的映射对象，保证源码中存在完整的类名字符串供Tailwind扫描识别：

import React, { useState } from "react";

// 映射表中的完整类名会被Tailwind正常扫描到
const COLOR_CLASS_MAP = {
  '222222': 'bg-[#222222]',
  'DDDDDD': 'bg-[#DDDDDD]'
}

function App() {
  const [color, setColor] = useState('222222')
  const toggleColor = () => color === '222222' ? setColor('DDDDDD') : setColor('222222');
  return (
    <div className='h-screen w-full flex flex-col justify-center items-center'>
        <button onClick={toggleColor}>Toggle Color</button>
        <div className={`${COLOR_CLASS_MAP[color]} w-[100px] h-[100px]`}></div>
    </div>
  )
}

export default App;

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