PurgeCSS 忽略 whitelistPatterns 中的正则表达式并删除 TailwindCSS 类（在 NuxtJS 上）

Question

我将 NuxtJS (VueJS) 与 TailwindCSS 和 PurgeCSS 一起使用。 到目前为止，我一直在为 text-green-800、bg-red-400 等颜色指定完整的 CSS 类。但是在创建组件时它并不理想，虽然颜色可以作为 Prop 传递，但也不可能直接执行 bg-{color}-400 while PurgeCSS while 删除未找到的背景颜色。

所以，我想将这些类放在 PurgeCSS 的 whitelistPatterns 中，允许正则表达式保护一些类。 这是我设置的：

  purgeCSS: {
    whitelistPatterns: [/^bg-/, /^text-/, /^border-/]
  },

但是 PurgeCSS 完全忽略了配置。我尝试了很多正则表达式：/bg-/、/bg/、/^bg-.*/ 等。没有一个有效。 我认为它可能使用的是新版本的 PurgeCSS，它使用 safelist 代替，但是当我像这样设置 whitelistPatterns 时：

  purgeCSS: {
    whitelistPatterns: ['text-green-800', /^bg-/, /^text-/, /^border-/]
  },

那么text-green-800 类就被成功保护了。所以我完全迷失了，似乎没有任何工作。而且显然只发生在生产环境中，因此很难调试。

我已经找到了这篇文章，它给出了我所做的一切： PurgeCSS whitelist patterns with TailwindCSS

如果有人有线索...谢谢！

Answer 1

好吧，我终于想通了！

首先，NuxtJS 在 2.3 版本中使用 purgeCSS，使用白名单（字符串数组）和白名单模式（正则表达式数组）。 但是 TailwindCSS 也在应用 purgeCSS，但是在 3.x 版本中...使用安全列表（字符串|正则表达式数组）

在nuxt.config.js 文件中定义purgeCSS 配置实际上是没有用的。 tailwind.config.js 文件中的一切都在发生（对于顺风类）。

误导的情况是，当您在 NuxtJS purgeCSS 白名单中定义一个类（例如bg-blue-200）时，TailwindCSS 不会清除该类。为什么？我不知道。 TailwindCSS 似乎保留了 Nuxt 配置的白名单，而不是 whitelistPatterns...

所以，我的解决方案是删除 nuxt.config.js 中的 purgeCSS 配置（如果您有特定的其他类要保护，请保留它），并在 tailwind.config.js 中定义安全列表，如下所示：

  purge: {
    content: [
      './components/**/*.{vue,js}',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.{js,ts}',
      './nuxt.config.{js,ts}'

    ],
    options: {
    // Whitelisting some classes to avoid purge
      safelist: [/^bg-/, /^text-/, /^border-/]
    }
  },