3

I want to ignore all classes started with w- and all breakpoint width classes like lg:w- in Tailwind Utility classes.

This is what I did in my tailwind.config.js file: 

purge: {
    options: {
      whitelistPatterns: [/^w-/]
    }
  },

But it seems not ignoring w- classes. How can I do this?

user1012181
  • 8,648
  • 10
  • 64
  • 106
  • Reconsider doing this. Including all these classes in your output CSS will enlarge it by a few kB and affect your performance. Even if you have widths specified dynamically in cms or whatever is the reason you are doing this - at least consider reducing viewports or dropping. Perhaps you do not need all the possible combinations. – kravis Sep 29 '20 at 17:44
  • Aside from that, what's your environment? Webpack? Vue config? It looks valid, therefore my initial guess would be that either it does work, but you need to rebuild your assets after this, or, it's a vue config used in webpack (or something like that). – kravis Sep 29 '20 at 17:44

1 Answers1

0

I don't think your regex is working as expected in your whitelistPatterns if you take a look at https://regexr.com/5kifo. It will match all w- classes thanks to the addition of + at the end.

The regex for those who don't want to click on the link: /w-+/g