配置 Tailwind JIT 模式的常见错误及解决方法

阅读时长 4 分钟读完

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-24h-24mx-auto 类名将被合并为一个类名,并被动态生成。如果这个类名没有被手动添加到 purge 配置中,则将不会被 JIT 编译器编译,也就是说,Tailwind 的 JIT 功能失效。

tailwind.config.js 文件中添加 purge 配置:

-- -------------------- ---- -------
-------------- - -
  ----- ------
  ------ -
    -------- -----------------------------
    --------- --------------
  --
  ------ ---
  --------- ---
  -------- ---
-

safelist 选项告诉 JIT 编译器始终包含列出的类名,即使它们在扫描您的代码时未被使用。

结论

Tailwind 的 JIT 模式可以帮助开发人员更高效地编写 CSS,但使用时也需要留意一些错误。通过针对这些错误的详细解释和相应的解决方法,有助于开发人员更加深入地理解 Tailwind 的 JIT 模式,进而更加熟练地使用。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67068bafd91dce0dc85e7eb8

纠错
反馈