如何在 Tailwind CSS 中使用动态类名？

动态类名和 Tailwind CSS

在 JavaScript 中动态构造类名是一种常见的做法，但是当涉及到 Tailwind CSS 时，它提出了挑战。 Tailwind CSS 依赖于从源文件中提取完整完整的类名。

根据 Tailwind 的文档，使用字符串插值或串联动态构造类名将导致 Tailwind 找不到类，因此无法生成相应的 CSS。例如：

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

在此示例中，text-red-600 和 text-green-600 字符串不作为完整的类名存在，因此 Tailwind 会忽略它们。

解决方案：

要解决这个问题，有几种解决方案：

• 使用完整的类名称：
  确保您使用的任何类名称都以其完整形式存在。

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

• 在变量中定义类名：
  定义类名在可以直接引用的变量中。

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

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

• 利用 style 属性：

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

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