为什么我不能在 Tailwind CSS 中使用动态类名？

为什么动态类名不能在 Tailwind CSS 中使用

在 Tailwind CSS 中，类名从源代码中提取为完整的不间断字符串。这意味着，如果您尝试使用字符串插值或连接动态构造类名，Tailwind 将无法识别它们，也不会生成相应的 CSS。

示例

作为示例，请考虑以下内容代码片段：

<p classname="{`bg-[${colors.secondary}]" text-text-white></p>

在此示例中，className 属性设置为将 color.secondary 变量与字符串组合在一起的模板文字文本-​​文本-白色。 Tailwind 无法识别 bg-[${colors.secondary}] 类名，也不会生成相应的 CSS。

解决方案

有两种方法可以解决此问题：

1. 在定义中使用完整的类名，如：

const colors = {
    secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
};

2. 使用 style 属性动态设置背景颜色，如：

<p classname="text-text-white"></p>

通过遵循这些准则，您可以确保您的 Tailwind CSS 类名称已正确生成，并且您的样式已按预期应用。

以上是为什么我不能在 Tailwind CSS 中使用动态类名？的详细内容。更多信息请关注PHP中文网其他相关文章！