TailwindCSS 自定义背景颜色不起作用

Question

因此，我目前正在为我正在构建的网站使用 tailwindcss，我想用自定义颜色制作一个小圆圈。现在我用了这个方法

<span className={`h-3 w-3 rounded-full bg-[#${role.color.toString(16)}]`} />

基本上，role.color.toString(16)返回一个十六进制代码。我已经检查过了，是的，它确实发送了有效的十六进制代码。现在当我查看该网站时，它没有添加颜色。有人知道这个问题的解决办法吗？

Answer 1

Tailwind 基于调色板工作。包含默认配置，您可以在 tailwind 配置文件中调整您的配置，如文档中所述：https: //tailwindcss.com/docs/customizing-colors

然而，顺风并不是为动态颜色而设计的，这违背了顺风的“约束”原则（请检查此线程以获取更多信息： https ://github.com/tailwindlabs/tailwindcss/discussions/3065 ）

但是，有一个简单的解决方案可以解决您的问题，添加内联样式

<span className="h-3 w-3 rounded-full" style={{ backgroundColor: `#${role.color.toString(16)}`}} />

重新编辑：认为有一个使用 JIT 和现代顺风版本的解决方案，但是使用 JIT 的事件，真正的动态值无法管理（https://v2.tailwindcss.com/docs/just-in-time-mode# Arbitration-value-support ）