顺风配置中“内容”的目的

Posted 2023-03-07

【中文标题】顺风配置中“内容”的目的

【英文标题】：Purpose of 'content' in tailwind config

【发布时间】：2022-01-16 01:25:01

【问题描述】：

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

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

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

tailwind.condig.js

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

【参考方案1】：

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

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

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

重要提示： 在 Tailwind CSS v3 中，使用“内容”选项配置模板路径至关重要，否则编译后的 CSS 将为空。

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