Special characters and PurgeCSS not working as expected - sass

Question

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

Answer 1

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']
})
]
}