DEV Community

loading...

Finding the Right Purgecss Extractor

drewtownchi profile image Drew Town Originally published at drewtown.dev ・1 min read

When I was writing the tutorial on Setting up Tailwind with Purgecss I was running into an issue where my Vue.js computed styles were getting purged by Purgecss. I was having a hell of a time and hat tip to @adamwathan, the creator of Tailwind, for pointing me in the right direction.

When considering the "default" extractor for Tailwind /[A-Za-z0-9-_:/]+/ it would absolute make sense that hidden: would be considered a valid class name. Unfortunately if hidden: is the only place that our hidden class name appears then the class name that we really want hidden will no longer be in our CSS file.

Playing around with the RegEx and my Vue files I was able to adjust my RegEx to use the \b meta character on both the beginning and end of the RegEx.

/\b[A-Za-z0-9-_:/]+\b/g
Enter fullscreen mode Exit fullscreen mode

This has worked perfectly for me as I do not use any special characters to start or end my CSS classes and I do not see any cases where Tailwind does either. So now in my computed properties the RegEx finds only hidden and not hidden:.

  computed: {
    navClasses() {
      return {
        block: this.navOpen,
        hidden: !this.navOpen
      };
    }
  }
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

pic
Editor guide
Collapse
prajngen profile image
prajngen

How about when i have a library that adds their own classes.

Eg. (Slick Slider or any other carousel Library)

If purgeCSS has plugins for these libraries, that'll be sweet!

Collapse
drewtownchi profile image
Drew Town Author

The extractor is only going to work if you are adding the markup into your files and the library isn't generating the code/classes and inserting them into the DOM.

Likely with a library you need to use Purgecss's Whitelisting and hope the library you are using has a sane CSS naming convention.