Sage 10: Whitelist Tailwindcss classes on Purge

fabianwurk · October 1, 2020, 4:17pm

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

Brad_Paul · October 2, 2020, 12:26pm

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

How to set up a tailwind prefix:

Whitelist patterns:

github.com

FullHuman/purgecss-docs/blob/master/whitelisting.md#patterns

# Whitelisting

You can whitelist selectors to stop PurgeCSS from removing them from your CSS. This can be accomplished with the PurgeCSS options `whitelist` and `whitelistPatterns`, or directly in your CSS with a special comment.

## Specific selectors

You can whitelist selectors with `whitelist`.

```javascript
const purgecss = new Purgecss({
    content: [], // content
    css: [], // css
    whitelist: ['random', 'yep', 'button']
})
```

In the example, the selectors `.random`, `#yep`, `button` will be left in the final CSS.

## Patterns

This file has been truncated. show original

fabianwurk · October 2, 2020, 2:47pm

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,
   });

Brad_Paul · October 2, 2020, 3:26pm

@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-.*/,
]

fabianwurk · October 2, 2020, 4:51pm

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

doug · October 8, 2020, 6:29pm

@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

fabianwurk · October 8, 2020, 9:41pm

@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.

doug · October 9, 2020, 7:59am

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:

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

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)

system · November 12, 2020, 4:17pm

This topic was automatically closed after 42 days. New replies are no longer allowed.