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

score 16 · Accepted Answer · answered Apr 07 '20 at 10:53

16

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

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

answered Apr 07 '20 at 10:53

dungey_140

2,602
7
34
68

score 14 · Answer 2 · answered Oct 21 '21 at 23:53

14

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-/]
  },

}

answered Oct 21 '21 at 23:53

Haukez

141
1
6

I too wasted a day on this, but with react-bootstrap – Riptide Aug 28 '22 at 09:00

score 3 · Answer 3 · answered Jan 13 '21 at 13:00

3

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

answered Jan 13 '21 at 13:00

Oleg

121
1
2

Julian · Answer 4 · 2022-12-09T10:35:52.757

3

In TailwindCSS version 3.0.24 it is integrated a bit differently.

// Example tailwind.config.js (see my config file)

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'],
    },
  ],
  // ...
}

Source: Documentation

edited Dec 09 '22 at 10:35

answered May 24 '22 at 09:27

Julian

598
8
23

1

is there a way to adjust this pattern to include ALL colours, rather than specifying individually? – dungey_140 Sep 09 '22 at 10:19
@dungey_140 this answer should help: https://stackoverflow.com/a/73936087/12440036 – LaZza Oct 03 '22 at 13:23

score 1 · Answer 5 · answered Aug 25 '20 at 22:55

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

score 0 · Answer 6 · answered Oct 03 '22 at 13:21

0

Based on this tailwind documentation, using something like this worked for a similar problem I had. The '+' works as wildcard.

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

answered Oct 03 '22 at 13:21

LaZza

360
3
7

PurgeCSS whitelist patterns with TailwindCSS

6 Answers6

Linked