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.

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. pic.twitter.com/4NTPTqttgs

— Drew Town (@drewtown_chi) May 10, 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
      };
    }
  }