Finding the Right Purgecss Extractor

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.

Drew Town

@drewtown_chi

Any idea why computed properties need to be in quotes to not get purged? @adamwathan? I'd love to be able to not have to use quotes here.

00:24 AM - 10 May 2019

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

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
      };
    }
  }

Comments

[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!

[Drew Town]

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.