PurgeCSS isn't allowing the compilation classes with prefix

vicainelli commented 6 years ago

Hi guys,

I don't know why, but, when I try to use hover:text-green or md:w-1/2 on any element for example, the .css file in /dist/ path does not contain these prefixes.

If I put a comment on this line, it works. https://github.com/simonswiss/tailwind-starter/blob/a8f5baa3ad0cac2ea005a7195543cfbc40222fd4/gulpfile.js#L17

Does it happen to anyone else?

brandonhz commented 6 years ago

I had that same exact issue and your solution seemed to work.

simonswiss commented 6 years ago

Thanks for pointing that out, and sorry for the long delay in my answer!

To avoid the : prefixed classes to be stripped out, a custom extractor is needed for purgeCSS.

I have updated the gulpfile to cater for that, as per the Tailwind documentation:

// Custom extractor for purgeCSS, to avoid stripping classes with `:` prefixes
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:\/]+/g) || [];
  }
}

and then, in the CSS task:

.pipe(
      purgecss({
        content: [paths.dist.base + "*.html"],
        extractors: [
          {
            extractor: TailwindExtractor,
            extensions: ["html", "js"]
          }
        ]
      })

This is now fixed as per https://github.com/simonswiss/tailwind-starter/commit/ef11c9ddd3217a2daadd910391883771282d2077

simonswiss / tailwind-starter

PurgeCSS isn't allowing the compilation classes with prefix #2