How to stop TailwindCSS from deleting unused styles

在使用 TailwindCSS 时，由于其工具会在生产阶段删除所有未使用的样式，以减小最终文件的大小，这确保了加载效率。然而，有时我们可能需要保留一些我们认为未来会使用的样式，或者是动态类名的样式，这些可能在构建时无法被直接识别为“使用中”。为了防止这些样式被删除，我们可以采取以下几种策略：

1. 使用 TailwindCSS 的 safelist 选项

在 TailwindCSS 的配置文件中，有一个名为 safelist 的选项，我们可以显式地指定哪些样式不应该被删除。例如，如果我们知道某些动态生成的类名可能在用户与页面互动时被用到，我们可以提前将这些类名添加到 safelist 中。

javascript
// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
    safelist: ['bg-red-500', 'text-center', /bg-green-/],
  },
  // ...
}

在这个例子中，bg-red-500 和 text-center 将始终被保留，而且所有以 bg-green- 开头的类也不会被删除。

2. 在代码中间接引用样式

有时，为了确保某些样式不被删除，我们可以在项目的某个 JavaScript 文件中间接引用这些样式。例如，我们可以创建一个数组或对象来存储这些类名，即使这些类名并没有直接用于 HTML 或组件中，但它们的存在可以阻止它们在构建过程中被删除。

javascript
// styles.js
const keepStyles = ['text-blue-500', 'hover:bg-green-500'];
export default keepStyles;

3. 使用 PurgeCSS 的配置

TailwindCSS 在内部使用 PurgeCSS 来移除未使用的样式。我们可以通过更详细地配置 PurgeCSS 来避免删除特定的样式。例如，使用 whitelist 和 whitelistPatterns 选项添加更多的保留规则。

javascript
// purgecss.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  whitelist: ['random-class', 'another-class'],
  whitelistPatterns: [/some-regex-/],
}

4. 环境条件判断

在某些情况下，我们可能只想在开发环境保留所有样式，以便更容易地调试和设计页面，但在生产环境中我们仍希望去除未使用的样式。这可以通过环境变量来控制 Tailwind 的 purge 选项。

javascript
// tailwind.config.js
module.exports = {
  purge: process.env.NODE_ENV === 'production' ? {
    content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
    safelist: ['some-important-class'],
  } : false,
  // ...
}

这样，当我们在开发环境时，所有样式都会被保留，而在生产环境中，只有需要的样式和明确指定保留的样式会被包含在构建文件中。

通过这些策略，我们可以有效地控制 TailwindCSS 的样式过滤行为，确保必要的样式不会被误删，同时还能保持生产环境下的效率和性能。