Tailwind 是一种基于类的 CSS 框架，它提供了大量的 CSS 类，可以帮助我们快速构建页面。但是，随着我们使用的类越来越多，生成的 CSS 文件也会越来越大，这会影响页面的加载速度。本文将介绍如何优化 Tailwind 的 CSS 文件大小，以提高页面的加载速度。
1. 使用 PurgeCSS
PurgeCSS 是一种用于删除未使用 CSS 的工具，可以帮助我们减小 CSS 文件的大小。我们可以使用 PurgeCSS 来删除未使用的 Tailwind 类。
首先，我们需要安装 PurgeCSS：
npm install -D purgecss
然后，我们需要创建一个 PurgeCSS 配置文件，比如 purgecss.config.js：
module.exports = {
content: ['./src/**/*.html', './src/**/*.js'],
defaultExtractor: (content) => {
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
return broadMatches.concat(innerMatches)
}
}这个配置文件告诉 PurgeCSS 去哪里查找未使用的 CSS 类，并且如何提取 CSS 类。
最后，我们可以在 package.json 中添加一个脚本来运行 PurgeCSS：
{
"scripts": {
"build": "purgecss --config purgecss.config.js --css dist/tailwind.css --output dist/tailwind.css"
}
}这个脚本告诉 PurgeCSS 去查找 dist/tailwind.css 中未使用的 CSS 类，并将结果输出到 dist/tailwind.css 中。
2. 使用 JIT 模式
Tailwind 2.1 引入了 JIT（Just-In-Time）模式，它可以根据需要动态生成 CSS，而不是生成所有可能的 CSS 类。这样可以大大减小 CSS 文件的大小。
要使用 JIT 模式，我们需要将 mode 设置为 jit：
// tailwind.config.js
module.exports = {
mode: 'jit',
// ...
}然后，在开发过程中，我们可以使用 JIT 模式来动态生成 CSS。例如，我们可以在 HTML 文件中添加一个类名 text-red-500：
<p class="text-red-500">Hello, world!</p>
当我们运行开发服务器时，Tailwind 会动态生成 CSS，包含 text-red-500 类。这样可以减小 CSS 文件的大小，同时保证我们可以使用所有的 Tailwind 类。
3. 自定义配置
Tailwind 提供了大量的配置选项，我们可以根据需要自定义配置，以减小 CSS 文件的大小。
例如，我们可以禁用一些不必要的插件：
-- -------------------- ---- -------
-- ------------------
-------------- - -
-- ---
-------- -
------------------------------
-----------------------------------
-------------------------------------
-- ---
--
-这样可以减小 CSS 文件的大小，同时保证我们可以使用所有必要的插件。
结论
优化 Tailwind 的 CSS 文件大小可以大大提高页面的加载速度。我们可以使用 PurgeCSS 来删除未使用的 CSS 类，使用 JIT 模式来动态生成 CSS，以及根据需要自定义配置来减小 CSS 文件的大小。这些技巧可以帮助我们更好地使用 Tailwind，提高页面的性能。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
----- ---------------- -------------------------
-------
------
-- --------------------------- ----------
-------
--------- -------------------- ---- -------
-- ------------------
-------------- - -
----- ------
------ ------------------- -----------------
-------- -
------------------------------
-----------------------------------
-------------------------------------
-- ---
--
-{
"scripts": {
"build": "purgecss --config purgecss.config.js --css dist/tailwind.css --output dist/tailwind.css"
}
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674664d4f84d1ff1035927f0