Tailwind 是一个流行的 CSS 框架，它提供了一组类，可以快速构建响应式和定制化的界面。但是，使用 Tailwind 生成的 CSS 文件往往非常大，这会对页面性能产生负面影响。本文将介绍一些优化技巧，以减小 Tailwind 生成的 CSS 文件的大小。
1. 使用 PurgeCSS
PurgeCSS 是一个工具，可以根据 HTML 文件中实际使用的类来删除未使用的 CSS。使用 PurgeCSS 可以显著减小 Tailwind 生成的 CSS 文件的大小。以下是使用 PurgeCSS 的示例代码：
----- -------- - -------------------- ----- -- - -------------- ----- ------- - ----------------------------------------- ----- ------ - ---------------- -------- ---------- ---- ----------------- --- ------------------------------------ ---------------
在上面的代码中，我们首先读取 HTML 文件的内容，然后使用 PurgeCSS 删除未使用的 CSS，最后将结果写入文件中。使用 PurgeCSS 可以减小 Tailwind 生成的 CSS 文件的大小，但是需要注意的是，如果使用动态类，例如 bg-red-500，PurgeCSS 可能无法检测到其使用情况，因此需要手动添加白名单。
2. 使用 JIT 模式
Tailwind 2.1.0 引入了 JIT（Just-In-Time）模式，它可以根据实际使用的类来动态生成 CSS，从而减小 CSS 文件的大小。使用 JIT 模式需要先安装 Tailwind 2.1.0 或更高版本：
--- ------- ------------------
然后，在 tailwind.config.js 中启用 JIT 模式：
-------------- - - ----- ------ ------ ----------------- -- --- --
在上面的代码中，我们将 mode 设置为 jit，并指定要删除未使用 CSS 的 HTML 文件路径。使用 JIT 模式可以显著减小 Tailwind 生成的 CSS 文件的大小，但是需要注意的是，JIT 模式需要更多的 CPU 和内存资源。
3. 手动优化
除了使用 PurgeCSS 和 JIT 模式外，还可以手动优化 Tailwind 生成的 CSS 文件。以下是一些手动优化的技巧：
3.1. 移除不必要的类
Tailwind 提供了大量的类，有些类可能不需要使用。可以通过手动删除不必要的类来减小 CSS 文件的大小。例如，以下是一个包含不必要类的 HTML：
---- ----------- ------------ -------------- -------- --- ---------- --------- --------------- ---------- -------------- --- -------------------- ------- ----------- ------------ ----------- ------- ----------- ---- ----------- ---------- ------- ----------------- ---------- ------------------- ----------- ------
其中，hover:shadow-lg 和 hover:bg-blue-600 类在默认情况下不会生效，可以将它们删除，从而减小 CSS 文件的大小。
3.2. 合并重复类
有时候，我们会在多个元素中使用相同的类，这会导致 CSS 文件中出现重复的样式。可以手动合并相同的类，从而减小 CSS 文件的大小。例如，以下是一个重复类的 HTML：
---- ----------- ------------ -------------- -------- --- ---------- --------- --------------- ---------- -------------- --- -------------------- ------- ----------- ------------ ----------- ------- ----------- ---- ----------- ---------- ------- ----------------- ---------- ------------------- ----------- ------ ---- ----------- ------------ -------------- -------- --- ---------- --------- --------------- ---------- -------------- --- -------------------- ------- ----------- ------------ ----------- ------- ----------- ---- ----------- ---------- ------- ----------------- ---------- ------------------- ----------- ------
其中，两个 div 元素中使用了相同的类，可以将它们合并为一个类，从而减小 CSS 文件的大小。
总结
以上是几种优化 Tailwind 生成的 CSS 文件大小的方法。使用 PurgeCSS、JIT 模式和手动优化都可以减小 CSS 文件的大小，提高页面性能。需要根据具体情况选择适合的优化方法，并注意不要过度优化，以避免影响代码可读性和维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e1b5831886fbafa4ea5ba3