Tailwind 是一种十分流行的前端 CSS 框架，它的特点是相对于其它的前端 CSS 框架，Tailwind 框架使用了大量的 utility class ，这样，开发者可以通过将这些 class 直接应用到 HTML 标签上完成样式的设置，而无需写繁琐的 CSS 代码。
然而，随着应用规模增大，Tailwind 的构建过程也会变得越来越耗时。本文将介绍一些优化 Tailwind 构建性能的方法，使其在构建时更加快速和高效。
1. 使用 JIT
Tailwind JIT （Just-in-Time）是 Tailwind 官方在 Tailwind v2.1 版本中发布的一种全新的构建方式。它采用了实时编译和动态删减 CSS 样式的方法，使 Tailwind 构建过程更加过程高效和快速。
使用 JIT 只需要在 tailwind.config.js 文件中将 mode 属性设置为 jit 即可：
// tailwind.config.js
module.exports = {
mode: 'jit', // 设置为 jit 模式
// ...
}2. 压缩 PurgeCSS 的扫描范围
PurgeCSS 是 Tailwind 构建过程中的一个重要工具，它可以通过扫描项目中的 HTML、CSS 和 JavaScript 文件来判断哪些类是被使用过的，进而删除其余未被使用的类，从而达到减少代码大小的目的。
然而，当项目规模较大时，PurgeCSS 扫描的时间也会变得很长。此时，可以通过设置扫描的文件范围来减少其扫描的时间。
例如，可以将扫描 HTML 文件和 Vue 单文件的范围缩小为部分关键目录：
-- -------------------- ---- -------
-- ------------------
-------------- - -
------ -
-------- ------------------- ------------------
-------- -
---------- -----------
--
--
-- ---
-3. 禁用安全模式
在 Tailwind v2.0 版本中引入了一种安全模式，用于阻止 PurgeCSS 删除所有 Tailwind 类，从而使得应用没有样式。然而，当你确定你的应用已经引用了所有必要的 Tailwind 类时，你可以禁用安全模式，以加速构建过程。
// tailwind.config.js
module.exports = {
purge: false, // 禁用安全模式
// ...
}4. 缓存 Tailwind 构建结果
缓存 Tailwind 构建结果可以避免 Tailwind 在每次构建时重新计算相同的类，并重写构建输出结果，因此可以加快后续构建的速度。
-- -------------------- ---- -------
-- ------------------
-------------- - -
------- -
--------------------- -----
----------------------------- -----
--
------ ---------------- ----------------- ------------------
------------ -
-- ------ ------- -- ---------- ---- ------ ----
---------- ------
--
-- ---
-以上为优化 Tailwind 构建速度的主要方法，我们可以根据项目的实际情况来采取相应措施加速 Tailwind 的构建速度。
总结
本文介绍了优化 Tailwind 构建速度的一些方法，包括使用 JIT、压缩 PurgeCSS 的扫描范围、禁用安全模式和缓存 Tailwind 构建结果。这些方法可以让我们更高效地使用 Tailwind，并且更加快速地构建和优化前端应用。
示例代码参考：
-- -------------------- ---- -------
-- ------------------
-------------- - -
----- ------ -- -- ---
------ -
-------- ------------------- ------------------ -- ------
-------- -
---------- -----------
--
--
------ ------ -- ------
------- - -- -- -------- ----
--------------------- -----
----------------------------- -----
--
------------ -
-- ------ ------- -- ---------- ---- ------ ----
---------- ------
--
-- ---
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6453b33a968c7c53b07f0f19