使用 TailwindCSS 进行 PurgeCSS 白名单模式

Question

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

因此我想使用 PurgeCSS 的白名单功能来保留所有以 'bg-' 或 'text-' 开头的类。然而，我下面的模式似乎并没有起到作用？有什么想法如何调整它吗？

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

Answer 1

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

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

Answer 2

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

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

}

Answer 3

在 TailwindCSS 版本 3.0.24 中，它的集成方式有点不同。

// tailwind.config.js 示例（请参阅我的 配置文件）

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
      variants: ['lg', 'hover', 'focus', 'lg:hover'],
    },
  ],
  // ...
}

来源：文档

Answer 4

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

Answer 5

基于这个顺风文档，使用类似的东西可以解决我遇到的类似问题。 “+”用作通配符。

module.exports = {
 // ...
 safelist: [
   {
      pattern: /bg-+/
   },
   {
     pattern: /text-+/
   },
 ],
 // ...

Answer 6

我是根据官方建议这样做的：

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

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

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

或者这个

.xl\:bg-cover