使用 TailwindCSS 的 PurgeCSS 白名单模式答案

【问题标题】：PurgeCSS whitelist patterns with TailwindCSS使用 TailwindCSS 的 PurgeCSS 白名单模式
【发布时间】：2020-07-14 06:48:02
【问题描述】：

我试图在通过 PurgeCSS 处理时保留所有 TailwindCSS 颜色类（即 bg-green、bg-red、text-green、text-red）。这些颜色类是在 CMS 而不是代码中设置的，因此我们无法在代码中搜索它们，因为它们（全部）不存在于此处。

因此，我想使用 PurgeCSS 的 whitelisting feature 来保留所有带有 'bg-' 或 'text-' 的类。但是，我在下面的模式似乎没有奏效？任何想法如何调整它？

whitelistPatterns: ['^bg\-', '^text\-'],

【问题讨论】：

【解决方案1】：

问题似乎只是使用正则表达式，而不是字符串。

whitelistPatterns: [/^bg-/, /^text-/], // Retain all classes starting with...

【讨论】：

【解决方案2】：

purge: {
  options: {
    safelist: ["whitelisted"],
  },
  // ...
}

【讨论】：

【解决方案3】：

如果您运行较新版本的顺风：whitelist 和 whitelistPatterns 合并到 safelist。这些信息花费了我一天的研究时间。

purge: {
  options: {
    safelist: ["bg-red-50"],
  },
  // ... or even
  options: {
    safelist: [/^bg-/, /^text-/]
  },

}

【讨论】：

【解决方案4】：

我是根据official suggestion 这样做的：

whitelistPatterns: [/\-blue\-/],
whitelistPatterns: [/\-pink\-/],
...etc

带有结尾或开头的选择器不符合您的需求。想想这个

.xl\:hover\:bg-pink-900:hover

或者这个

.xl\:bg-cover

【讨论】：