React+Tailwind背景色状态更新但不渲染问题求助

问题 #

使用React + Tailwind CSS开发时，通过react-color的SketchPicker选择颜色，期望选中新颜色后更新页面背景色。日志显示状态已正确更新为对应的十六进制颜色码，但页面背景色没有渲染新颜色，反而变成白色。尝试截取颜色码#后的部分设置状态，问题依然存在。

代码示例 #

import React, { useState } from 'react';
import { SketchPicker } from 'react-color';

function TestPage() {
 const [backgroundColour, setBackgroundColour] = useState(`0099FF`)

 const handleChange = (event) => {
  console.log('event', event.hex);
  let str = event.hex
  let newStr = str.slice(1);
  console.log('newStr', newStr);
  setBackgroundColour(`${newStr}`)
 }

  console.log('backgroundColour', backgroundColour)
  return (
   <div className={`grid relative bg-[#${backgroundColour}] h-[100vh] w-full`}>
    <SketchPicker
     color={backgroundColour}
     onChange={handleChange}
    />
   </div>
  );
}

export default TestPage;

日志信息 #

backgroundColour 0968c7 TestPage.jsx:15

event #2b3d4e TestPage.jsx:8
newStr 2b3d4e TestPage.jsx:11
backgroundColour 2b3d4e TestPage.jsx:15

event #156fc3 TestPage.jsx:8
newStr 156fc3 TestPage.jsx:11
backgroundColour 156fc3

解决方案 #

问题核心是Tailwind CSS的静态编译机制：Tailwind在构建阶段只会扫描代码中写死的静态类名，像bg-[#${backgroundColour}]这种动态拼接的类名不会被识别，编译后没有对应的样式，背景色就会显示默认白色。

有两种可行的解决方式：

1. 直接使用内联样式
   放弃动态Tailwind类，给div设置style属性，React状态更新时能实时生效：

   <div 
     className="grid relative h-[100vh] w-full"
     style={{ backgroundColor: `#${backgroundColour}` }}
   >
     <SketchPicker
       color={backgroundColour}
       onChange={handleChange}
     />
   </div>
   

2. 借助CSS变量实现Tailwind风格
   先在全局CSS中定义变量，再通过内联样式更新变量值，最后在Tailwind类中引用：

   • 全局CSS（如index.css）：

     :root {
       --bg-color: #0099FF;
     }
     

   • 组件代码修改：

     function TestPage() {
       const [backgroundColour, setBackgroundColour] = useState(`0099FF`)
     
       const handleChange = (event) => {
         setBackgroundColour(event.hex.slice(1))
       }
     
       return (
         <div 
           className="grid relative bg-[var(--bg-color)] h-[100vh] w-full"
           style={{ '--bg-color': `#${backgroundColour}` }}
         >
           <SketchPicker
             color={backgroundColour}
             onChange={handleChange}
           />
         </div>
       );
     }
     

另外补充：SketchPicker的color属性支持直接传入带#的完整颜色码，不需要额外截取，可简化代码逻辑。

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