PurgeCSS whitelist patterns with TailwindCSS

Question

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\-'],

Answer 1

If you run newer versions of tailwind: whitelist and whitelistPatterns merged into safelist. This info cost me a day of research.

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

}

Answer 2

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

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