Tailwind vs. Semantic CSS

A really interesting study by Tero Piirainen, comparing a build of the exact same page using Tailwind vs semantic CSS.


This is a really fascinating article to read through. It’s very weighted towards semantic CSS, but the data doesn’t lie: it’s clearly better all around than atomic utility CSS.

But, the atomic approach does work for certain contexts and certain teams. As Tero says:

Because mastering CSS requires practice. It takes several failed attempts before you get it. Most developers haven’t gone through that so they only remember the bad things.

The thing about practice is, it takes time. The problem with that is the tech industry is very much “move fast” (or blazingly fast lol) which means developers don’t get time to master their CSS skills, unless they’re in the privileged position to be able to work on their skills outside of work.

For developers not in that position, the utility approach can work really well. It also services developers who truly don’t care for CSS, which is a reality.

I’d always aim for a semantic approach, personally, but I’m also in a lucky position. I get to call the shots on projects in the studio and also, the team that work there are exceptionally talented at writing CSS. If that weren’t the case, maybe the atomic approach would work better for us too.

Either way, this is a great article and I really enjoyed reading it.

Check it out