使用 Tailwind CSS 时最常见的错误（动态css构建后不生效）bg-{{ color }}-500这个写法通常

bg-{{ color }}-500这个写法通常会碰到很诡异的问题，这个问题在github的issue列表也屡见不鲜，构建后不生效，开发过程中完美运行。避免它很容易，希望能帮到更多的开发人员。

错误场景

以下是我们在 HTML 中简单地使用 Tailwind CSS 类名的方法：

<div class="bg-red-500"></div>
<div class="bg-green-500"></div>
<div class="bg-blue-500"></div>

但是，通常我们为了实现更具动态性的代码。经常会这样写：

<div class="bg-{{ color }}-500"></div>

一切都很好...
😠 直到我们为生产环境构建了我们的应用程序，并且您意识到颜色设定不起作用，变得非常苦恼。

为什么它不起作用？

Tailwind CSS 原理上是通过扫描您的 HTML 文件并查找类名。然后，它根据找到的类名生成一个 CSS 文件。就是这么简单。因为编译过程中并不存在该字符串，所以它根本不会为它生成 CSS。bg-red-500``bg-{{ color }}-500

阅读有关在 Tailwind CSS 中使用动态类名的更多信息。

但它在开发环境中工作！

是的，它正常工作了，因为您可能首先在您的文件中保存了文件，并且类名已添加到您的 CSS 中。然后，您将其更改为并再次保存该文件。不再在您的 HTML 中，但它仍在您的 CSS 文件中。因此，它适用于开发环境，但不适用于生产环境。bg-red-500``.bg-red-500``bg-{{ color }}-500``bg-red-500

有些类名有效，有些则无效！

可能是因为您在另一个文件中以正确的方式使用了这些类名（如字符串）。bg-red-500

解决方案

如何解决？

只是不要使用动态类名，例如 .确保文件中存在字符串形式的整个类名。bg-{{ color }}-500

let color = 'bg-red-500'
<div class="{{ color }}"></div>

如果你真的必须这样做，你有 3 种方法可以规避此问题：

解决方案 1：在文件中的某个位置添加类名

将所需的类名映射到文件中的某个位置。它可以是一个对象、一个评论或任何东西。

解决方案 2：安全列表文件

在安全列表文件中列出所有必需的类名，并将其添加到文件中tailwind.config.js``content

module.exports = {
  content: ["./path/safelist.txt"],
  // ...
}

./path/safelist.txt文件可以是这样的：

bg-red-500
bg-green-500
bg-blue-500

解决方案 3：安全列表配置

将文件中所有必需的类名列入安全列表。tailwind.config.js

module.exports = {
  content: ["./pages/**/*.{html,js}", "./components/**/*.{html,js}"],
  // ...
  safelist: ["bg-red-500", "bg-green-500", "bg-blue-500"],
  // ...
}

您还可以在安全列表中使用正则表达式模式：

module.exports = {
  content: ["./pages/**/*.{html,js}", "./components/**/*.{html,js}"],
  // ...
  safelist: [
    "bg-teal-700",
    {
      pattern: /bg-(red|green|blue)-(400|500|600)/,
    },
  ],
  // ...
}

使用 Tailwind CSS 时最常见的错误（动态css构建后不生效）