Tailwind 配置中 'content' 的用途

Question

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

据我了解，此选项 (content/purge) 告诉 tailwind 在哪里搜索其 class 名称。但即使该列表中没有任何选项，一切正常。

有人可以解释为什么即使我 'content' 为空也没有任何变化吗？

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 选项告诉引擎在哪里寻找使用过的 class 名称，这样它就可以删除未使用的名称以获得更好的性能，所以即使没有这个选项，Tailwind 中的一切都可以正常工作 CSS v2.x，它只会帮助提高性能。

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

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

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

相关链接： #migrating-to-the-jit-engine

Tailwind 配置中 'content' 的用途

Purpose of 'content' in tailwind config

vue.js

nuxt.js

tailwind-css