动态添加时未应用 Tailwind 的背景颜色

Question

我正在尝试使用 Tailwind 设置动态背景颜色。

但是，背景颜色未应用于 div。我很困惑，因为当我检查检查器时，我可以看到在浏览器中，正确的 bg-${colors[index]} 被应用到每个 div，但是颜色没有被渲染。

const colors = ['#7a5195', '#bc5090','#ef5675']

export default function App() {
  const names = ['Tyler', "Charles", 'Vince']
  let labels = {}

  names.forEach((name,index)=>{
    labels[name] = `bg-[${colors[index]}]`
  })

  return (
    <>
    {
      names.map((name)=>{
        return(
          <div className={`${labels[name]}`}>
        {name}
      </div>
          )
      })
    }
      
    </>
  );
}

Answer 1

在 Tailwind 中，您不能使用动态 class 命名，例如 bg-${color}。

这是因为当 Tailwind 编译其 CSS 时，它会查找您的所有代码并检查 class 名称是否匹配。

如果你想要动态名称 classes 你应该写所有 class 名称。

但对于您的特定用例，我不会使用 Tailwind 的 JIT，而是使用 style 属性并动态更改 backgroundColor 值。

它会使用更少 CSS 并且不会让您头疼。

最后，这是我的建议

const colors = ['#7a5195', '#bc5090','#ef5675'];

export default function App() {
  const names = ['Tyler', "Charles", 'Vince']
  const labels = {};

  names.forEach((name, index) => {
    labels[name] = colors[index];
  });

  return (
    <>

    {
      names.map((name) => (
        <div style={{ backgroundColor: `${labels[name]}` }}>
          {name}
        </div>
      )
    }
      
    </>
  );
}

动态添加时未应用 Tailwind 的背景颜色

Tailwind's background color is not being applied when added dynamically

reactjs

tailwind-css