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.
Technically, this is a duplicate question. The solution can be found here.