Tailwind 是一款流行的 CSS 框架，它可以大幅减少开发人员为项目编写 CSS 的工作量。JIT（即时编译）是 Tailwind 新版中的一个特性，可以提高编译速度并大幅减小输出 CSS 文件的大小。然而，在使用 JIT 的过程中，一些常见错误可能会遇见，本文将会介绍这些错误并提供相应的解决方法。
错误 1：使用了未知的类名
如果你只是简单地为一个 HTML 元素添加了一个类名而没有为 Tailwind 提供相应的配置，则在编译时， Tailwind 的 JIT 编译器将会认为这个类名是未知的，而抛出一个错误。
例如，在 HTML 中添加 <div class="w-24"> 这样的类名是没有问题的，但是如果你在 tailwind.config.js 文件中没有配置 w-24 这个 width 大小，则在执行命令 npm run dev 时就会遇到类似以下的错误：
----------------------------------------------------------------- ------- --------- ------ ---- -- ---- ----- --- ---- -------------------- --- ---- ------------
需要先在 tailwind.config.js 文件中配置 w-24 这个 width 大小：
-------------- - -
----- ------
------ -----------------------------
------ -
------- -
------ -
----- -------
--
--
--
-------- ---
-错误 2：未指定文件的 purge 选项
默认情况下，JIT 编译器只会对被使用的类名进行编译，而不是整个 Tailwind 库。这样会使编译速度快很多。这个功能是通过 purge 选项实现的。
在使用 JIT 模式时，需要指定 purge 选项以告诉 Tailwind 哪些文件包含您的类名。
例如，以下是在 Vue.js 文件中编写 Tailwind 中的类名的示例：
----------
---- -------------
--- --------------- --------- ----------- ------------- -------------- --- ---------
-- ----------- ---- ------------- ---------- ----------------------- ----------
------
-----------purge 选项需要包含需要被检查的文件的路径，例如 ./public/**/*.{html,vue}，在 tailwind.config.js 文件中配置：
-------------- - - ----- ------ ------ ----------------------------- ------ --- --------- --- -------- --- -
错误 3：JIT 模式下动态生成的类名没有被编译
JIT 模式下，当 Tailwind 遇到了未知的类名时，它会动态生成一些类似 tw- 这样的类名以代替。虽然这可以工作，但有些情况下这些类名需要被手动添加到 purge 配置中，否则将不会被编译。
例如，当使用 @apply 引用另一个 CSS 类时，会生成一个类名，如下面的例子：
------ ---------- - ------ ---- ---- -------- -
当我们使用类名 .component 时，w-24，h-24 和 mx-auto 类名将被合并为一个类名，并被动态生成。如果这个类名没有被手动添加到 purge 配置中，则将不会被 JIT 编译器编译，也就是说，Tailwind 的 JIT 功能失效。
在 tailwind.config.js 文件中添加 purge 配置：
-------------- - -
----- ------
------ -
-------- -----------------------------
--------- --------------
--
------ ---
--------- ---
-------- ---
-safelist 选项告诉 JIT 编译器始终包含列出的类名，即使它们在扫描您的代码时未被使用。
结论
Tailwind 的 JIT 模式可以帮助开发人员更高效地编写 CSS，但使用时也需要留意一些错误。通过针对这些错误的详细解释和相应的解决方法，有助于开发人员更加深入地理解 Tailwind 的 JIT 模式，进而更加熟练地使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67068bafd91dce0dc85e7eb8