1

Using PurgeCSS along with Laravel Mix on a non Laravel project.

Everything works well but I want to use some special non CSS characters in my responsive utility classes but PurgeCSS is stripping them even if present in the markup.

My example class would be:

<div class="u<sm:hidden"></div>

In the css this is written as:

.u\<sm\:hidden {}

PurgeCSS has no issue with the colon symbol as the following class acts fine:

.u-sm\:hidden {}

Any way I can make this work as expected?

Thanks

Lovelock
  • 7,689
  • 19
  • 86
  • 186

1 Answers1

3

So I was facing the same issue and I did some digging and found the solution here https://lancecore.com/building-our-sites/.

The way I solved it was to use a custom extractor for Purgecss and in that extractor write a regex expression that correctly matches the way responsive classes are designed in tailwindcss.

Now, here is my postcss.config.js file where all this magic happened:

const purgecss = require('@fullhuman/postcss-purgecss')

class TailwindExtractor {
    static extract(content) {
      return content.match(/[A-z0-9-:\/]+/g)
    }
}

module.exports = {
    plugins: [
        require('tailwindcss')('./tailwind.js'),
        require('autoprefixer'),
        purgecss({
            content: [
                './pages/**/*.vue',
                './layouts/**/*.vue',
                './components/**/*.vue'
        ],
        extractors: [{
            extractor: TailwindExtractor,
            extensions: ['vue']
        }
      ],
      whitelist: ['html', 'body']
    })
  ]
}
Kudakwashe Paradzayi
  • 31
  • 3