Tailwind CSS 对状态变化无响应

Question

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

export default App;

然而，在我希望构建的应用程序的更大背景下，这对我没有多大好处。简单地存储颜色会更有帮助。我不清楚为什么第一种方法不起作用，考虑到在这两种情况下，完整的字符串都成功地放入了 className 中。有任何想法吗？

Answer 1

这是 Tailwind 的预期行为，原因如下： https: //tailwindcss.com/docs/content-configuration#class-detection-in-deep

一种选择是使用此处描述的安全列表：https ://tailwindcss.com/docs/content-configuration#safelisting-classes