simonswiss/tailwind-starter

PurgeCSS isn't allowing the compilation classes with prefix

vicainelli opened this issue · 2 comments

vicainelli commented

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.

tailwind-starter/gulpfile.js

Line 17 in a8f5baa

.pipe(purgecss({ content: [paths.dist.base + "*.html"] }))

Does it happen to anyone else?

brandonhz commented

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

simonswiss commented

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 ef11c9d

  • ❤️2