PurgeCSS misses Tailwind classes that use a colon:

Question

I have a website that uses tailwind. I'd like to keep the css size small, so I decided to use purgecss. I'm building the static site with python, so I'd like to use the CLI. Here's the code in my Makefile that handles this.

NODE_ENV=production npx purgecss --css css/*.css --content public/*.html public/**/*.html --output demo
npx uglifycss demo/*.css > public/style.css
rm -rf demo/*.css

Here's the thing though; it seems to make the css files smaller, but purgecss seems to completely skip any classes that have a colon (like sm:grid-cols-2 ). Take this html snippet:

<ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 pt-4">
   ...
</ul>

Here's what the site looks like.

Here's what the site should look like.

The grid switches to grid-cols-1 while the lg:grid-cols-4 class should be triggered. Looking at the public/style.css I can also confirm that the lg:grid-cols-4 class isn't listed.

Am I calling the purgecss -command wrong? It feels like I'm missing something.

Answer 1

Technically, this is a duplicate question. The solution can be found here .