The Laksamana - official blog of M. Shahrim
23/6/2025
It's a great satisfaction to include beautiful CSS library into our web projects. Unfortunately, such libraries are often huge in sizes, when in reality, we only want to apply styles just for few components (buttons, inputs) and want nothing for Cards or Tabs.
The obvious route to take is "treeshaking" - a standard practice these days. We can use Webpack, Vite or PostCSS to achieve it. But, my project is small and I feel like Vite is overkill.
Today I learned how to do it the simplest way, without having to resort to complex tools, in just 3 steps.
The objective of this lessson is to strip large CSS file, removing styles that we don't need. We are going to use PurgeCSS. For the CSS library, we will use Tabler.
Don't include tabler.min.css in your HTML yet, instead, include this filename "output.css" (you'll see why). Try to style a button using Tabler.
npm i -g purgecss
Run this command:
purgecss --css tabler.min.css --content index.html -o output.css
A new CSS file will be produced, output.css, and because you already included it earlier in the HTML file, your page is now styled. The outputted CSS is the slimmed Tabler.
I applied the demonstration into this page and Tabler went from 514kb to 34kb!
Click here to go back to original.
Development tools does not have to be complex, bloated and overengineered. Even Tailwind has its own "just the CLI".
If you know just what you need, and understand the modularity of complex tools, you can find them. Not following the industry is not a sin.
Mohamad Shahrim
author of The Laksamana