React中className无法随useState更新，随机颜色切换功能失效求助

你的问题出在Tailwind CSS对动态类名的处理机制上。Tailwind在构建阶段会静态扫描所有代码中的类名，只有明确写死的类才会被生成对应的CSS样式。你用bg-[${color}]这种动态拼接的方式生成类名，Tailwind无法提前识别这些随机生成的颜色类，所以当color状态更新后，新的bg-[xxx]类根本不存在，导致背景色无法正常切换（甚至会 fallback 到无样式的初始状态）。

修复方案 #

直接通过React的style属性设置背景色，绕过Tailwind的静态扫描限制：

"use client"
import { ReactElement, useState } from "react";

function randomColor() {
    const hexa = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]
    return "#" + hexa[Math.floor(Math.random()*16)] +
                 hexa[Math.floor(Math.random()*16)] +
                 hexa[Math.floor(Math.random()*16)] +
                 hexa[Math.floor(Math.random()*16)] +
                 hexa[Math.floor(Math.random()*16)] +
                 hexa[Math.floor(Math.random()*16)]
}

const ColorFlipper = (): ReactElement => {
    const [color, setColor] = useState("#ff0000");
    function updateColor() {
        const newColor = randomColor();
        setColor(newColor);
        console.log(newColor); // setState是异步操作，直接打印新生成的值更准确
    }
    return (
        <div className="flex h-full w-full" style={{ backgroundColor: color }}>
            <button onClick={updateColor} className="w-1/3 h-1/3">
                Alterar cor
            </button>
        </div>
    )
}

export default ColorFlipper

额外说明 #

1. 关于console.log(color)的问题：React的setState是异步操作，调用setColor后立刻打印color得到的是更新前的旧值，所以先存新生成的颜色再打印更合理。
2. 如果一定要用Tailwind的动态颜色类，只能提前定义所有可能用到的颜色（显然不适合随机颜色场景），或者通过theme.extend配置自定义颜色，但随机颜色场景下用style属性是最直接高效的方案。

内容的提问来源于stack exchange，提问作者João Lucas Rodrigues da Silva