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

Question

我将 NuxtJS (VueJS) 与 TailwindCSS 和 PurgeCSS 一起使用。到目前为止，我一直在为 text-green-800、bg-red-400 等颜色指定完整的 CSS classes。但是在创建组件时它并不理想，因为颜色可以作为Prop，但也不可能直接执行 bg-{color}-400 while PurgeCSS while remove the background colors not found.

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

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

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

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

那么text-green-800class就保护成功了。所以我完全迷路了，似乎没有任何效果。而且显然只发生在生产环境中，很难调试。

我已经找到了这个 post，它给出了我所做的一切：

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

Answer 1

好的，我终于想通了！

首先，NuxtJS在2.3版本中使用了purgeCSS，使用了whitelist（字符串数组）和whitelistPatterns（正则表达式数组）。但是 TailwindCSS 也在应用 purgeCSS，但是在版本 3.x... using safelist (string|regex array)

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

误导性案例是，当您在 NuxtJS purgeCSS 白名单中定义 class（例如 bg-blue-200）时，TailwindCSS 不会清除此 class。为什么？我不知道。 TailwindCSS 似乎保留了 Nuxt 配置的白名单，但没有保留 whitelistPatterns...

所以，我的解决方案是删除 nuxt.config.js 中的 purgeCSS 配置（如果你有特定的其他 classes 要保护，请保留它），并在 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-/]
    }
  },

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

PurgeCSS ignore regex in whitelistPatterns and remove TailwindCSS classes (on NuxtJS)

nuxt.js

tailwind-css

nuxtjs

css-purge