Roots Discourse

Sage 10: Whitelist Tailwindcss classes on Purge

How is best to setup Sage 10 to whitelist Tailwind classes on Purge, I have tried adding the following to tailwind.config.js, but it doesn’t seem to work.

  purge: {
    options: {
      whitelist: ['origin-bottom-right'],
    },
  },

Have you tried adding a Tailwind prefix and whitelist all those classes using a pattern?

How to set up a tailwind prefix:

Whitelist patterns:

1 Like

Thanks @Brad_Paul. They way I have it done now is by adding the whitelist classes to webpack:

   .purgeCss({
     whitelist: [
      require('purgecss-with-wordpress').whitelist,
      'tracking-widest',
      'p-24',
      ],
     whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
   });

@fabianwurk then in your whitelistPatterns add the /tw-.*/ prefix, or whatever prefix you decide to use. Setting a prefix for all tailwind classes will let you whitelist them with ease.

whitelistPatterns: [
require(‘purgecss-with-wordpress’).whitelistPatterns,
/tw-.*/,
]

1 Like

Thats great @Brad_Paul, I get what you what you mean now on the patterns and prefixing aspect - would make it much easier.

Thanks so much for advice here, its much appreciated :+1:

@fabianwurk are you using the “content” property in your PurgeCSS config to specify directories/file paths? Works great for me and I’ve only had to whitelist a few classes for 3rd-party plugins/JS libraries

1 Like

@doug, to be honest, we’re pretty new to the purgecss world. So, to get it working I’ve add some related whitelist classes to webpack.mix.js, and for other libraries, I’ve just used the following in my scss files:

/* purgecss start ignore */

and

/* purgecss end ignore */

Probably not best approach so I’d be very interested in hearing how the content property can be used?

Thanks.

Hi @fabianwurk - in fact I got it slightly wrong re: content property (or perhaps there are multiple options for the syntax). This is what my tailwind.config.js looks like:

Shared with CloudApp

and this is my webpack.mix file (lines 8-11 are the ones I think I had to change):

Shared with CloudApp

This works fine when I run build:production. it brings my CSS file down from 2.9MB to 36KB, and with no other whitelisting necessary (unless, as I mentioned before, I need to whitelist styles for 3rd-party plugins/libraries)

1 Like