小编Hun*_*off的帖子

React 中这个非常简单的切换不适用于 tailwind CSS。当我单击“切换颜色”按钮时，div 的 className 在 bg-[#222222] 和 bg-[#DDDDDD] 之间变化，但 div 实际上从未着色 - 它具有 className，但 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={`bg-[#${color}] w-[100px] h-[100px]`}></div>
    </div>
  )
}

export default App;

澄清一下，如果我存储完整的字符串“bg-[#2222222]”或“bg-[#DDDDDD]”，然后将其直接放入 className 中，它就可以工作。（又名，在下面的代码段中，div 以正确的颜色呈现并正确切换：

import React, { useState } from "react";

function App() …