2

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.

enter image description here

Here's what the site should look like.

enter image description here

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.

cantdutchthis
  • 31,949
  • 17
  • 74
  • 114
  • Look for `.lg\:grid-cols-4` instead. – Digvijay Mar 18 '21 at 04:11
  • The `.lg\:grid-cols-4` class also does not exist. – cantdutchthis Mar 18 '21 at 08:15
  • 1
    Does this help answer your question: [PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?](https://stackoverflow.com/questions/65554596/purgecss-and-tailwind-css-how-to-preserve-responsive-classes-using-the-command)? – juliomalves Mar 18 '21 at 17:29

1 Answers1

0

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

cantdutchthis
  • 31,949
  • 17
  • 74
  • 114