React/TypeScript中Tailwind自定义颜色不生效问题及解决方案

在React/TypeScript项目中尝试用Tailwind CSS实现自定义十六进制颜色切换，点击按钮更新颜色变量后，元素背景色未随之变化。代码示例如下：

组件代码：

import React, { useState } from 'react';

const ColorChanger = () => {
const [color, setColor] = useState('#ffffff');

  const handleColorChange = () => {
    const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
    console.log("setColor = ", randomColor)
    setColor(randomColor);
  };

  return (
    <div>
      <div className={`w-20 h-20 bg-[${color}] mx-auto mb-4`}>{color}</div>

      <button
        type="button"
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        onClick={handleColorChange}
      >
        Changer la couleur
      </button>
    </div>
  );
};
function App() {
  return (
    <div className="App">
      <ColorChanger />
    </div>
  );
}

export default App;

index.css：

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

App.css：

...
@tailwind base;
@tailwind components;
@tailwind utilities;

原因分析 #

Tailwind CSS采用静态编译机制：构建时会扫描项目中所有硬编码的类名，仅生成这些类对应的CSS规则。你代码中动态拼接的bg-[${color}]属于运行时生成的类名，构建阶段不存在，因此Tailwind不会为其生成对应的背景色样式，导致更新颜色变量后元素样式无变化。

另外，index.css和App.css重复导入了Tailwind指令，属于冗余操作，只需在一个全局样式文件中导入即可（建议保留index.css中的导入，移除App.css里的）。

解决方案 #

方案1：使用内联style属性（最直接） #

放弃动态拼接Tailwind类名，直接通过React的内联style属性设置背景色，这种方式支持完全动态的颜色值：

修改组件中的div代码：

<div 
  className="w-20 h-20 mx-auto mb-4" 
  style={{ backgroundColor: color }}
>
  {color}
</div>

方案2：结合CSS变量使用Tailwind #

如果希望继续使用Tailwind的类语法，可以通过CSS变量实现动态颜色：

1. 在index.css中定义全局CSS变量：

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --dynamic-bg: #ffffff;
}

2. 修改组件代码，使用Tailwind的bg-[var(--dynamic-bg)]类，并在更新颜色时修改CSS变量：

import React from 'react';

const ColorChanger = () => {
  const handleColorChange = () => {
    const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
    console.log("setColor = ", randomColor);
    // 修改全局CSS变量
    document.documentElement.style.setProperty('--dynamic-bg', randomColor);
  };

  return (
    <div>
      <div className="w-20 h-20 bg-[var(--dynamic-bg)] mx-auto mb-4">
        {/* 获取当前CSS变量值显示 */}
        {getComputedStyle(document.documentElement).getPropertyValue('--dynamic-bg').trim()}
      </div>

      <button
        type="button"
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        onClick={handleColorChange}
      >
        Changer la couleur
      </button>
    </div>
  );
};

这种方式下，bg-[var(--dynamic-bg)]是硬编码的类名，Tailwind构建时会生成对应的CSS规则，运行时修改CSS变量即可动态更新背景色。

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