如何使用 Tailwinds `safelist` 处理动态类

Tailwind CSS 是一种流行的实用程序优先 CSS 框架，允许开发人员快速高效地创建自定义设计。默认情况下，Tailwind CSS 生成各种实用程序类，这可能会导致文件大小过大。为了解决这个问题，Tailwind CSS 配备了一个名为 PurgeCSS 的内置功能，可以从生产版本中删除未使用的样式，从而使最终的 CSS 文件更小、性能更高。但是，当在应用程序中动态或有条件地使用某些样式时，这种自动删除有时可能会导致问题。在本文中，我们将深入探讨 Tailwind CSS 中的安全列表功能，了解如何将特定样式列入白名单，并探索使用安全列表会有所帮助的各种场景。

1. 了解 Tailwind CSS 中的 PurgeCSS

PurgeCSS 是一个功能强大的工具，可以扫描项目文件中使用的任何类名，并从最终的 CSS 文件中删除未使用的类名。这显着减小了生成的 CSS 的大小，使您的应用程序加载速度更快。

默认情况下，Tailwind CSS 包含 PurgeCSS 配置，可扫描 HTML、JavaScript 和 Vue 文件中的任何类名称。您可以轻松调整在配置文件的内容数组中拾取哪些文件。

在某些情况下，您可能需要防止删除特定样式，即使在您的文件中未检测到它们。这就是安全列表功能发挥作用的地方。

2. 安全列表简介

安全列表是 Tailwind CSS 中的一项功能，允许您将某些样式列入白名单，这样它们就不会在清除过程中被删除。当您有通过 JavaScript 生成的动态类名或基于用户交互应用的动态类名时，这特别有用。安全列表的另一个非常常见的用例是从 CMS 或后端框架驱动颜色或样式。一个这样的示例可能是一个系统，该系统允许网站管理员编辑 CMS 中类别的颜色，从而更改该类别的导航项的颜色。 Tailwind 将看不到实际的类名，因为该文件将包含输出颜色的服务器端代码。

通过将这些类名添加到安全列表中，您可以确保它们始终包含在您的最终 CSS 文件中，无论 PurgeCSS 是否可以在您的项目文件中找到它们。

3.在tailwind.config.js中配置安全列表

要在 Tailwind CSS 项目中配置安全列表，您需要修改 tailwind.config.js 文件。安全列表是您想要保留在最终 CSS 文件中的类名数组，即使在项目文件中找不到它们也是如此。以下是如何将类名添加到安全列表的示例：

// tailwind.config.js
module.exports = {
  content: [
    // your content files here
  ],
  safelist: [
    'bg-red-500', 
    'text-white', 
    'hover:bg-red-700'
  ],  
  // other configurations
};

在此示例中，bg-red-500、text-white 和 hide:bg-red-700 类已添加到安全列表中。这些类将始终包含在您的最终 CSS 文件中，即使 PurgeCSS 在您的项目文件中找不到它们。

4.更高级的配置

如果您在安全列表中有很多类需要管理，可能是由于多种颜色以及需要支持变体/修饰符，例如 :hover、:focus、:active 和 dark: 那么管理很快就会变得非常困难这些在安全列表内。这个列表很快就会变得很大。

这就是模式的用武之地。Tailwind 支持安全列表中的正则表达式：

safelist: [
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

通过这 2 个条目，我们有效地添加了 12 个类。 from-{color}-200 和 to-{color}-100，其中 {color} 是列表中的所有颜色。它使管理列表变得更加容易。请记住，tailwind.config.js 只是一个 JavaScript 文件，因此如果您要管理大量重复的颜色列表，则可以管理文件顶部的变量。

还可以为列表中的所有内容定义变体，而无需在正则表达式中显式列出它们：

safelist: [
  {
    pattern: /text-(blue|green|indigo|pink|orange|rose)-(600|400)/,
    variants: ['hover'],
  },
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

5. 安全列表示例和用例

在多种情况下使用安全列表功能会很有帮助：

动态类名称：如果您根据某些数据或用户输入动态生成类名称，PurgeCSS 可能无法检测到这些类并将它们从最终的 CSS 文件中删除。通过将这些动态类添加到安全列表，您可以确保它们在您的应用程序中始终可用。

// Example of a dynamic class name based on user input
const userInput = 'success'; // This value might come from an API or user input
const alertClass = `alert-${userInput}`;

// Generated class name: 'alert-success'

在此示例中，alertClass 变量根据用户输入或来自 API 的数据生成类名称。由于 PurgeCSS 无法检测到此动态类名，因此您应该将其添加到 tailwind.config.js 文件中的安全列表中。

Conditional styles: If you have styles that only apply under specific conditions, such as a dark mode or a mobile view, you can use the safelist to ensure those styles are always included in your final CSS file.

// Example of a conditional style based on a media query
@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }
}

In this example, the hidden-mobile class is only applied when the viewport width is less than 768 pixels. Since this class might not be detected by PurgeCSS, you should add it to the safelist in your tailwind.config.js file.

6. Best Practices for Safelisting

When using the safelist feature in Tailwind CSS, keep the following best practices in mind:

• Only add classes to the safelist that are truly necessary. Adding too many classes can bloat your final CSS file and negate the benefits of PurgeCSS.
• If you have many dynamic class names or a complex application, consider using a function or regular expression to generate the safelist array. This can help keep your configuration cleaner and more maintainable.
• Test your production build to ensure that all required styles are included. This can help you catch any issues early on and avoid surprises when deploying your application.

Summary

The safelist feature in Tailwind CSS provides a powerful way to whitelist specific styles and ensure they are included in your final CSS file, even if they are not detected by PurgeCSS. By understanding how to configure the safelist and use it effectively in various scenarios, you can make your Tailwind CSS projects more robust and maintainable. Remember to follow best practices when using the safelist to ensure your final CSS file remains lean and performant.

Feel free to look over the Tailwind Docs on Safelist usage.

以上是如何使用 Tailwinds `safelist` 处理动态类的详细内容。更多信息请关注PHP中文网其他相关文章！