Purgecss Whitelist Patterns with Tailwindcss

PurgeCSS whitelist patterns with TailwindCSS

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

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

PurgeCSS ignore regex in whitelistPatterns and remove TailwindCSS classes (on NuxtJS)

Ok, I finally figured it out!

First, NuxtJS is using purgeCSS in version 2.3, using whitelist (string array) and whitelistPatterns (regex array).
But TailwindCSS is also applying purgeCSS, but in version 3.x... using safelist (string|regex array)

Defining purgeCSS configuration in nuxt.config.js file is actually useless. Everything is happening (for tailwind classes) in tailwind.config.js file.

The misleading case was that when you define a class (bg-blue-200 for example) in the NuxtJS purgeCSS whitelist, TailwindCSS doesn't purge this class. Why? I don't know. TailwindCSS seems to keep the whitelist from Nuxt config, but not the whitelistPatterns...

So, my solution is just to remove the purgeCSS config in nuxt.config.js (keep it if you have specific other classes to protect), and define the safelist in tailwind.config.js like this :

  purge: {
    content: [
      './components/**/*.{vue,js}',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.{js,ts}',
      './nuxt.config.{js,ts}'

    ],
    options: {
    // Whitelisting some classes to avoid purge
      safelist: [/^bg-/, /^text-/, /^border-/]
    }
  },

TailwindCSS / PurgeCSS whitelist not working

I was using the wrong option name, it had to be safelist instead of whitelist.

How to deal with Tailwind & PurgeCSS and A LOT of different folders?

You don't have to target every single sub-folder, the glob pattern will match those for you. Using ** will match zero or more folders.

purge: {
    layers: ['components', 'utilities', 'base'],
    content: [
        '../A.Umb.E.Platform.Frontend/Assets/**/*.css',
        '../A.Umb.E.Platform.Vue/src/Apps/**/*.vue',
        '../A.Umb.E.Platform.Web/Views/**/*.cshtml'
    ]
}

How to whitelist or Safelist, attribute selectors with purgeCSS (Tailwindcss)?

Here is how I solved this
Because pure CSS is dumb, it looks for the strings that match the content it needs to purge. So to fool it, we can simply add the classes or attributes which we want to be saved.

like this

<main class="[dir=rtl] [dir=ltr] container">
{some content}
</main> 

---

Related Topics