Tailwindcss-module: Whitelisting no longer works in Tailwind Options

[jhull]

What worked in prior builds of Nuxt and TailwindCSS in the purgeCSS key in nuxt.config.js:

      whitelist: ['tip', 'warning', 'expert'],
      whitelistPatternsChildren: [/content.$/]

No longer works in the updated built-in options key for Tailwind:

  purge: {
    options: {
      whitelist: ['tip', 'warning', 'expert'],
      whitelistPatternsChildren: [/content.$/]
   }
}

The only thing that does work is to set enabled: false (contrary to this issue)--but then CSS is not purged.

[appinteractive]

have the same issue

[hecktarzuli]

I have this issue as well, and it seems the purge comments don't even work anymore.

/* purgecss start ignore */

/* purgecss end ignore */

These worked fine versions < 1.4.1

For me, NONE of my styles in tailwind.css were showing up no matter what. I had to move them to my layout file.

Oddly enough, if I had a placeholder style in my layout, THEN the style from tailwind.css would show up.

[appinteractive]

@hecktarzuli What do you mean with placeholder styles?

[bpeab]

I am having the same issues, especially the start/end ignore which don't work at all.

[hecktarzuli]

@appinteractive

tailwind.css
.blah { background-color: red;}

layouts/default.vue

And nothing really USES blah in the template

Result:
FINALLY .blah shows up in the page, and it's red! Kinda weird, I would have expected it to be purged since nothing uses it :P

[appinteractive]

@hecktarzuli uff thats really strange, I also did copy a whole styles into my components just to get it working but thats even strager

[jhull]

Noticed the last issue closed was three weeks ago - and no comments here for over a week. Is this still being actively maintained?

[wallopthecat]

It wasn't closed, it was marked as a bug

[jhull]

I meant the last time anyone touched this module was 3 weeks ago. It seems like enough people are experiencing issues with purgecss and I'm not sure if it's being addressed.

[wallopthecat]

I agree and misunderstood your comment to be referring to this issue, not issues in general

[jake-101]

I have the same issue when using the image slider Hooper. I have purgeCSS turned off for now but would like whitelist to be fixed or have another workaround.

[leon0399]

same issue with vue-awesome-swiper via SSR configuration using directive

[appinteractive]

@Atinux any thoughts on that topic?

[Atinux]

Can you please create a reproduction on CodeSandBox so I can quickly look at it and patch if necessary?

[ianchak]

As a workaround until this is fixed you could use

/*! purgecss start ignore */

/*! purgecss end ignore */

to whitelist items. (please note the exclamation mark)

This is working for us with the latest 3.0.2 version.

[Atinux]

Thank you @ianchak

Also, please take a look at https://tailwindcss.com/docs/controlling-file-size#removing-all-unused-styles

[kswedberg]

Not sure if this is the source of the problem, but I just noticed that PurgeCSS changed their blacklist and whitelist options to safelist and blocklist.

https://purgecss.com/configuration.html

[AndreasElia]

Also having this issue, the above comment is rather interesting as a possible cause though.

[Atinux]

I tried safelist and seems to work, could you confirm?

[c3s4r]

I just confimed t works if you use options and safelist:

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

[Atinux]

It would be awesome if anyone feel like opening a PR to add a block about whitelisting classes when using plugins on https://tailwindcss.nuxtjs.org/tailwind-config

[redbastie]

Just wanted to confirm @c3s4r solution is working for me! Use safelist not whitelist in your options.