PurgeCSS whitelist patterns with TailwindCSS

8
votes

I am trying to preserve all TailwindCSS colour classes (i.e bg-green, bg-red, text-green, text-red) when it is processed via PurgeCSS. These colour classes are set in the CMS rather than code so we cannot search the code for them as they don't (all) exist here.

Therefore I want to use the whitelisting feature of PurgeCSS to retain all classes that beging with 'bg-' or 'text-'. However, the pattern I have below doesn't seem to be doing the trick? Any ideas how to tweak it?

whitelistPatterns: ['^bg\-', '^text\-'],
3
csstailwind-csspost-processingcss-purge

3 Answers

12
votes

The issue appears to be simply to use regexp, not a string.

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

Im doing it based on official suggestion like this:

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

Selectors with ending or starting it does not fit your needs. Think this one

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

or this one

.xl\:bg-cover
1
votes
purge: {
  options: {
    safelist: ["whitelisted"],
  },
  // ...
}