模板文字在顺风CSS中不能正常工作

Question

我正在传递一个十六进制颜色到一个道具，并试图用它来设置元素的背景。下面是我的代码:

let cardColourRGB: string;
if (cardColour) {
cardColourRGB = "[" + cardColour + "]";
console.log(cardColourRGB);
} else {
cardColourRGB = "white/50"
}

return函数中:

<div className={`bg-${cardColourRGB}`}></div>

传递一些颜色有效，但其他颜色无效。例如，传入#AAA32E作为道具不会设置颜色，但是直接设置颜色就可以了:

<div className={`bg-[#AAA32E]`}></div>

为什么会这样?

Answer 1

根据tailwind.css的官方文件，不希望有这样的classNames

如文档所述:

• Tailwind提取类名最重要的含义是，它只会找到在源文件中作为完整的字符串存在的类。

• 如果你使用字符串插值或将部分类名连接在一起，Tailwind将不会找到它们，因此不会生成相应的CSS:

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

相反，请确保您使用的所有类名都以完整的

形式存在。

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

因此，对于您的情况，使用以下代码:

<div class="{{ cardColour ? 'bg-[#AAA32E]' : 'bg-white-50' }}"></div>

希望有帮助!

Answer 2

TailwindCSS不允许动态生成类。因此，当您使用以下代码生成类…

`bg-${cardColourRGB}`

…TailwindCSS不会把它作为一个有效的TailwindCSS类，因此不会产生必要的CSS。

相反，您必须在源代码中包含类的全名。您可以像这样返回完整的值

let cardColourRGB: string;
if (cardColour) {
cardColourRGB = "bg-[" + cardColour + "]";
console.log(cardColourRGB);
} else {
cardColourRGB = "bg-white/50"
}

cardColourRGB在哪里你的价值你传递。

通过这种方式，每个类的整个字符串都在源代码中，因此TailwindCSS将知道如何生成适用的CSS。

阅读更多:https://tailwindcss.com/docs/content-configuration#class-detection-in-depth