tailwindcss: Whitelisting no longer works in Tailwind Options

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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 15
Comments: 22 (2 by maintainers)

Most upvoted comments

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

kswedberg on Oct 14, 2020

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

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

c3s4r on Jan 4, 2021

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

wallopthecat on Jul 14, 2020

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.

jhull on Jul 13, 2020

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.

hecktarzuli on Jul 2, 2020

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

redbastie on Jan 23, 2021

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

Atinux on Jan 6, 2021

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

leon0399 on Jul 23, 2020

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.

jake-101 on Jul 22, 2020