前言
TailwindCSS 是一个非常受欢迎的 CSS 框架，它基于类名来构建样式，可以让我们快速地创建出美观的 UI 界面。但是，由于 TailwindCSS 的类名非常多，如果我们不加限制地使用它，最终生成的 CSS 文件会非常大，加载时间也会变得很长。这时候，我们就需要使用 PurgeCSS 来优化 TailwindCSS，让我们的网站加载速度更快。
PurgeCSS 简介
PurgeCSS 是一个可以删除未使用 CSS 代码的工具，它可以在构建项目时自动扫描 HTML、JS 和 CSS 文件，把未使用的 CSS 代码删除掉。使用 PurgeCSS 可以大大减小 CSS 文件的体积，提高页面加载速度。
安装 PurgeCSS
在使用 PurgeCSS 之前，我们需要先安装它：
npm install -D purgecss
配置 PurgeCSS
在使用 PurgeCSS 之前，我们需要在项目中添加一个配置文件 purgecss.config.js，用来指定需要扫描的文件和需要保留的类名。下面是一个示例配置文件：
module.exports = {
content: [
'./src/**/*.html',
'./src/**/*.js',
'./src/**/*.vue',
],
css: [
'./src/**/*.css',
],
whitelist: [
'bg-red-500',
'text-blue-700',
],
}配置文件中，content 属性指定了需要扫描的文件，css 属性指定了需要处理的 CSS 文件，whitelist 属性指定了需要保留的类名。
使用 PurgeCSS
在配置好 PurgeCSS 之后，我们可以在构建项目时使用它。下面是一个使用 PurgeCSS 的示例命令：
purgecss --config purgecss.config.js --out dist/css/
命令中，--config 参数指定了配置文件的路径，--out 参数指定了输出目录。
TailwindCSS 和 PurgeCSS 的结合使用
在使用 PurgeCSS 之前，我们需要先在项目中安装 TailwindCSS：
npm install -D tailwindcss
然后，我们需要在项目中创建一个 tailwind.css 文件，用来导入 TailwindCSS 的样式：
@tailwind base; @tailwind components; @tailwind utilities;
在项目中使用 TailwindCSS 的类名后，我们可以使用 PurgeCSS 来删除未使用的样式。下面是一个示例 index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="css/tailwind.css">
</head>
<body>
<div class="bg-red-500 text-blue-700 p-4">
Hello, world!
</div>
</body>
</html>在这个文件中，我们使用了两个 TailwindCSS 的类名 bg-red-500 和 text-blue-700。为了让 PurgeCSS 不删除这些样式，我们在配置文件中添加了 whitelist 属性，把这两个类名加入到白名单中。
最后，我们可以使用下面的命令来构建项目：
purgecss --config purgecss.config.js --out dist/css/ && postcss -c postcss.config.js -o dist/css/tailwind.css
这个命令会先使用 PurgeCSS 来删除未使用的 CSS 代码，然后使用 PostCSS 来处理 TailwindCSS 的样式，并把结果输出到 dist/css/tailwind.css 文件中。
总结
使用 PurgeCSS 可以大大减小 CSS 文件的体积，提高页面加载速度。在使用 PurgeCSS 优化 TailwindCSS 时，我们需要在配置文件中指定需要保留的类名，以免被 PurgeCSS 删除。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c16fbfadd4f0e0ffb61ee8