TailwindCSS 2.2：如何使用 PurgeCSS 来优化 CSS 文件-JavaScript中文网-JavaScript教程资源分享门户

TailwindCSS 是一种流行的前端 CSS 框架，它提供了大量的 CSS 类，可以轻松地构建出现代化的用户界面。然而，使用 TailwindCSS 会导致生成的 CSS 文件非常大，这会影响页面加载速度和性能。为了解决这个问题，我们可以使用 PurgeCSS 来优化 CSS 文件。

什么是 PurgeCSS？

PurgeCSS 是一种工具，可以从 CSS 文件中删除未使用的 CSS 类。这个工具可以大大减小 CSS 文件的大小，从而提高页面加载速度和性能。

如何使用 PurgeCSS？

在 TailwindCSS 2.2 中，PurgeCSS 已经被集成到了框架中，因此你无需安装任何额外的依赖。你只需要在构建过程中添加一些额外的配置即可启用 PurgeCSS。

配置 PurgeCSS

在你的 tailwind.config.js 文件中，你需要添加一个 purge 属性，来告诉 TailwindCSS 哪些文件需要被 PurgeCSS 处理。下面是一个示例配置：

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  // 其他配置
}

这个配置告诉 TailwindCSS，需要在 ./src 目录下的所有 HTML、Vue 和 JSX 文件中寻找使用的 CSS 类，并删除未使用的类。

构建项目

一旦你完成了 PurgeCSS 的配置，你就可以构建你的项目了。在构建过程中，TailwindCSS 会自动运行 PurgeCSS，并删除未使用的类。

npm run build

校验 PurgeCSS

如果你想校验 PurgeCSS 的工作是否正确，你可以在构建之后查看生成的 CSS 文件。你应该能够看到，只有使用到的 CSS 类被保留了下来，未使用的类被删除了。

结论

使用 PurgeCSS 可以大大减小 TailwindCSS 生成的 CSS 文件的大小，从而提高页面加载速度和性能。在 TailwindCSS 2.2 中，PurgeCSS 已经被集成到了框架中，因此你只需要添加一些额外的配置即可启用 PurgeCSS。如果你想了解更多关于 PurgeCSS 的信息，请参考官方文档。

示例代码

<div class="bg-gray-200 p-4">
  <h1 class="text-2xl font-bold">Hello, World!</h1>
  <p class="text-gray-800 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

-- -------------------- ---- -------
-- ------------------
-------------- - -
  ------ -
    ------------------
    -----------------
    -----------------
  --
  ------ -
    ------- ---
  --
  --------- ---
  -------- ---
-

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67638582856ee0c1d41f8297