cssnano VS purgecss

Use free tools like Terser for JavaScript and CSSNano for CSS:

Minify CSS: Strip out comments, whitespace, and redundant code with tools like CSSNano or CleanCSS. A 100KB stylesheet might shrink to 70KB, speeding up downloads.

cssnano has had some complicated ownership turnover[0], I'm glad to see someone took the mantle again though.

I do find that CSSO[1] with structural optimizations can be more effective still, perhaps that will be less true overtime though.

I think once lightning CSS is more stable (in particular, some bugs are addressed around ordering) it will be the clear winner in this space though.

[0]: https://github.com/cssnano/cssnano/issues/833

[1]: https://github.com/css/csso

cssnano/cssnano - A modular minifier, built on top of the PostCSS ecosystem.

There are a number of tools available to minify CSS in development or as part of your build pipeline including, but not limited to, cssnano and Vite. If you’re using sass, it’s as straightforward as adding --style=compressed to your sass command. The results you achieve may vary depending on the complexity of your CSS, but you may see numbers similar to this (processed with sass):

Since Tailwind is a PostCSS plugin, we can also add cssnano plugin to compress the bundle.

Minifying your CSS involves removing unnecessary whitespace, comments, and reducing property names. This results in smaller file sizes and faster downloads. Use tools like UglifyCSS and CSSNano for this purpose.

For the sake of simplicity, my example setup uses a single-file plugin and puts all styles directly into a single style.css file without using further theme.css or theme.json files, which we might want to use depending on the requirements for customizability. Likewise, SASS / SCSS support can be added if it makes life easier for the developer(s) involved. But as we already use PostCSS to control autoprefixing and cssnano minification, we can also use it to support the latest and even upcoming CSS sytax like native CSS nesting.

The cssnano plugin can minify/compress CSS and make it suitable for production use. Install cssnano plugin using this command:

Tools like PurgeCSS and UnCSS can remove unused CSS rules by analyzing your HTML. This is especially useful if you’re using large frameworks like Bootstrap or Tailwind.

Manually remove unused CSS with tools like PurgeCSS

👉 Check out PrugeCSS for more details.

PurgeCSS is a powerful tool that scans your project files for any class names used and removes the unused ones from the final CSS file. This significantly reduces the size of the generated CSS, making your application load faster.

As a starting point, Tailwind used to use PurgeCSS [0] but I'm not sure what they use now.

[0] https://purgecss.com

A similar question was already posted here but, I think looking at the raw html, we will be able to better determine the required css than what Purgecss does.

PurgeCss

Webpack minifies JS and CSS files by default when we build them in production mode. But it does not remove useless styles or classes. For this, you can use libraries like https://purgecss.com/ Do not forget to check the dependency, connect only the functionality that you use.

When I searched online I couldn't find an "industry standard" solution to this problem. What I ended up doing was using the popular tool PurgeCSS along with a quick Python script to generate the appropriate command. What the PurgeCSS tool does is search for all your HTML files, gather all the CSS classes used, and then "purge" all the unused ones from the CSS file. You just need to declare all the HTML files you have.

Skeleventy gives you a rock-solid foundation to build fast and accessible static websites, with clean, understated design. Features include a minimal build pipeline with Laravel Mix, the Sass-powered utility class generator Gorko, Purge CSS, an HTML minifier, SEO-friendly page metadata, image lazy loading, responsive navigation, and an XML sitemap.