Tailwind 一种任意颜色在写为变量时不起作用

Question

Tailwind 声明，当涉及到我们不想污染 tailwind 配置的任意颜色时，以下情况是可能的：

bg-[#e73d3dFF]

现在在代码中，当像这样编写所述颜色时，它可以工作：

bg-[#e73d3dFF]

这是让我感到困惑的部分，当使用任何形式的编译编写时（我将显示所有示例），它不起作用。字符串正确打印到 HTML 上，但颜色未呈现。

实施例1

`bg-[${navItem.bg.hex}]`

实施例2

const classStyle = `bg-[${navItem.bg.hex}]`;
classNames({[classStyle]: true}); 

示例3：

'bg-[' + {navItem.bg.hex} + ']'; 

上面的所有示例都会正确打印 HTML，因此我们确实看到：

<li class="bg-[#e73d3dFF]">

但是，问题在于，颜色没有显示，规则没有应用，就像颜色规则不是由 Tailwind 创建的一样。

有任何想法吗？

Answer 1

不幸的是，您不能使用模板文字字符串来构建 tailwind 类。他们也在文档中对此发出警告：https ://tailwindcss.com/docs/content-configuration#dynamic-class-names