Tailwind vs. Semantic CSS

Over the last week or two, I’ve written about why Tailwind is bad.

Yesterday, I stumbled upon this article from Tero Piirainen comparing semantic CSS to Tailwind…

Semantic version is 8 × smaller, renders faster, and requires no JavaScript bundlers / tooling.

The article is fully of wonderfully quotable statements, like this…

Tailwind needs significantly more coding because you are completely lacking the power of CSS: the way it cascades and the richness of the selectors.

And this…

Tailwind CSS is seven times larger: 33K vs 4.6K. Overall you need eight times more HTML/CSS code with Tailwind to render the page (108K vs 12.6K). The most surprising thing is that Tailwind uses more global/semantic CSS than the semantic approach itself.

And this…

Most of the semantic CSS is re-usable on other pages and only a fraction of the CSS is specific to the front page. It’s easy to create new pages when the groundwork is already done.

As I wrote on Monday, it’s important to understand the medium you work in.

Do yourself a favor and go read Tero’s whole article. It’s fantastic!