使用 Tailwind CSS 时最常见的错误（以及如何修复它）

在开发 daisyUI 的过程中，我看到很多人在使用 Tailwind CSS 时犯这个错误。

作为 daisyUI 的维护者，我每天都会在 GitHub 问题和 GitHub 讨论中帮助人们。我看到很多人在使用 Tailwind CSS 时犯这个错误。避免它非常简单，但我发现它在开发者中非常常见。

错误

这是我们在 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>

您甚至可能想对 daisyUI 类名执行相同的操作

<div class="btn btn-{{ type }}"></div>
instead of
<div class="btn-primary"></div>

很酷，对吧？ 它甚至可以在开发环境中工作。

一切都很好... 😠 直到我们为生产环境构建应用程序，您才意识到颜色不再起作用

为什么不起作用？

Tailwind CSS 扫描您的 HTML 文件并查找类名。然后，它根据找到的类名生成 CSS 文件。就这么简单。因为字符串bg-red-500不存在于bg-{{ color }}-500中，它根本不会为其生成 CSS。

阅读更多关于将动态类名与 Tailwind CSS 结合使用.

但它在开发环境中工作！

是的，它之所以有效，是因为您可能首先在文件中使用了bg-red-500，您保存了文件，并且.bg-red-500类名已添加到您的 CSS 中。然后您将其更改为bg-{{ color }}-500并再次保存文件。bg-red-500不再在您的 HTML 中，但它仍然在您的 CSS 文件中。因此它在开发环境中有效，但在生产环境中无效。

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

可能是因为您在另一个文件中以正确的方式（作为字符串，如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 安全列表.