Tailwind 配置中“内容”的用途

Question

我在 Nuxt 应用程序中使用 tailwind，并在 Tailwind CSS v3.0 中收到有关清除/内容选项更改的警告，并且在将清除更改为内容或保留它之后，因为它没有更改任何内容，甚至没有删除该警告。

据我了解，此选项（内容/清除）告诉 tailwind 在哪里搜索其类名。但即使该列表中没有任何选项，一切都正常。

有人可以解释为什么即使我的“内容”为空也没有任何变化吗？

tailwind.condig.js

module.exports = {
  mode: 'jit',
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  // ...
}

Answer 1

Purge 选项告诉引擎在哪里查找已使用的类名，以便它可以删除未使用的类名以获得更好的性能，因此即使没有此选项，Tailwind CSS v2.x 中的一切都可以正常工作，并且只会有助于提高性能。

\n

在 Tailwind CSS v2.x 中，有一个名为 Just-in-Time 引擎的预览功能，您可以通过在 tailwind.config.js 中启用它来使用它（模式：\'jit\'）；在 Tailwind CSS v3 中，新的 Just-in-Time 引擎取代了 Tailwind 中的经典引擎。\n根据 Tailwind 官方网站，由于 Tailwind 不再使用 PurgeCSS，他们\xe2\x80\x99 已将 \'purge\' 重命名为“purge”。 \' 选项到 \'content\' 以更好地反映它\xe2\x80\x99 的用途。

\n

所以基本上他们只是在版本 3 中将“purge”选项重命名为“content”。如果您现在使用 Tailwind CSS v3，您应该在配置文件中重命名它，并且还应该删除模式：\ 'jit\'因为不再需要它，否则无需重命名清除选项，您可以安全地忽略该警告。

\n

重要提示： 在 Tailwind CSS v3 中，\xe2\x80\x99 使用 \'content\' 选项配置模板路径至关重要，否则编译的 CSS 将为空。

\n

相关链接：\n #migration-to-the-jit-engine

\n