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

Haukez · Accepted Answer · 2021-10-21 23:53:50Z

18

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, 2021 at 23:53

Haukez

2252 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Riptide Over a year ago

I too wasted a day on this, but with react-bootstrap

dungey_140 · Accepted Answer · 2020-04-07 10:53:02Z

17

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

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

answered Apr 7, 2020 at 10:53

dungey_140

2,8329 gold badges43 silver badges75 bronze badges

Comments

Julian · Accepted Answer · 2022-12-09 10:35:52Z

5

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 9, 2022 at 10:35

answered May 24, 2022 at 9:27

Julian

77711 silver badges24 bronze badges

2 Comments

dungey_140 Over a year ago

is there a way to adjust this pattern to include ALL colours, rather than specifying individually?

LaZza Over a year ago

@dungey_140 this answer should help: stackoverflow.com/a/73936087/12440036

Oleg · Accepted Answer · 2021-01-13 13:00:12Z

3

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

answered Jan 13, 2021 at 13:00

Oleg

1311 silver badge2 bronze badges

Comments

LaZza · Accepted Answer · 2022-10-03 13:21:02Z

3

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 3, 2022 at 13:21

LaZza

4386 silver badges9 bronze badges

1 Comment

Daniel Guedes Over a year ago

What about pseudo selectors? For example "hover:border-t-${color}"?

Stavros · Accepted Answer · 2020-08-25 22:55:15Z

1

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

answered Aug 25, 2020 at 22:55

Stavros

84111 silver badges20 bronze badges

Collectives™ on Stack Overflow

PurgeCSS whitelist patterns with TailwindCSS

6 Answers 6

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related