背景介绍
TailwindCSS 是一款非常流行的 CSS 框架，它提供了一系列预定义的样式类供开发者使用，可以大幅度提高开发效率。但是，使用 TailwindCSS 也会产生一些问题，最突出的就是打包后的文件大小，有时甚至会超过几十兆。这让开发者在使用 TailwindCSS 时需要更加谨慎，以避免过度的打包大小。
PurgeCSS 是一种可以帮助优化打包大小的工具，它可以扫描项目中的 HTML、CSS、JavaScript 代码，用正则表达式匹配出所有使用到的 CSS 类名，并将未使用到的类名删除，从而大幅度减少打包后的文件大小。在使用 TailwindCSS 时，我们可以结合 PurgeCSS 来优化打包体积，从而提高项目的性能。
安装 PurgeCSS
PurgeCSS 是一款基于 Node.js 的命令行工具，首先需要使用 npm 安装：
npm install -g purgecss
使用 PurgeCSS
首先，我们需要删除 tailwindcss 的默认配置文件（tailwind.config.js），并新建一个 purgecss 的配置文件（purgecss.config.js）：
module.exports = {
content: ['./public/**/*.html', './src/**/*.vue'],
css: ['./src/**/*.css'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
}其中，content 属性指定了需要扫描的 HTML 和 Vue 文件的路径，css 属性指定了需要优化的 CSS 文件的路径。defaultExtractor 属性指定了正则表达式，用于匹配 CSS 类名，这是 PurgeCSS 整个的核心。
接下来，我们需要在打包命令中执行 PurgeCSS：
npx tailwindcss build ./src/styles.css -o ./dist/tailwind.css && purgecss -config purgecss.config.js -o ./dist/tailwind.css
这里我们将 TailwindCSS 编译后的 CSS 文件放置在 dist 目录下，并使用 PurgeCSS 进行优化。
示例代码
以下是一个使用了 TailwindCSS 的示例 HTML 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ------------
----- ---------------- ---------------------------
-------
------
---- ----------- -------------- ------------ -------- -------------
---- --------------------
--- --------------- --------- ------------ -----------
-- -------------------- -- - ---- ---- --- ----------------
------
------
-------
-------在打包后，我们可以发现 tailwind.css 文件大小从 1.5 MB 降到了 4.4 KB，大幅度减少了项目大小，从而提高了页面的加载速度和性能。
总结
在使用 TailwindCSS 开发项目时，我们需要更加谨慎地处理打包大小的问题，以避免影响项目的性能。通过结合 PurgeCSS 进行优化，我们可以在保证样式完整的前提下，大幅度减少项目的大小，提高页面的加载速度，实现更加优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647eed7848841e9894e9c30a
