使用TailwindCSS将PurgeCSS白名单模式

Question

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

因此，我想使用PurgeCSS的whitelisting feature来保留所有以'bg-'或'text-'开头的类。但是，我下面的模式似乎并没有解决问题？有什么想法可以调整吗？

User.create({
   email: uname,
   password: psw
})
   .then(console.log('success'))
   .catch((err) => { console.log(err); });

Answer 1

问题似乎只是使用regexp，而不是字符串。

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

Answer 2

我是根据official suggestion这样做的：

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

以结尾结尾的选择器不符合您的需求。 想想这个

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

或这个

.xl\:bg-cover

Answer 3

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