Utility first CSS – observations / lessons learnt

People talk about Component First vs Utility First CSS frameworks – in my opinion the important word here is “first” – you should use your own best judgement to combine the two techniques.

Start prototyping the design using atomic styles.

Observe where you’re reusing the same styles a lot and/or it’ll be a pain (e.g. paragraphs of body text)

Build components for these using @apply in your CSS file (between @tailwind components; and @tailwind utilities;)

Don’t bother build components for things you are unlikely to reuse.

Does the HTML source code look a horrible with all those styles?

A bit when you very first see it. But:

most code you didn’t write yourself looks confusing initially

maybe your CSS file looks confusing close up too

There are several ways Utility First can save time:

You’ll be switching back and forth between HTML and CSS rather less

There won’t be as much friction in the early stages of building the site (you’ll be plugging in atomic classes and seeing the results straight away, you won’t be worrying about how to name things or constructing BEM selectors) – however you should keep an eye out for when you need to build a component.

Obviously for a while you’ll be referring to the framework’s documentation a lot to learn the class names, but in the case of Tailwind CSS there’s an autocomplete search field on the site. The abbreviations for margin, padding, flexbox etc., once learnt, are logical and easy to remember.

I find specifying code for screen breakpoints a lot simpler (typically I end up with lots of nesting in conventional CSS/SASS).

There are two aspects to this, the CSS file size/download speed, and the speed the browser can process the quantity of selectors in it.

By default Tailwind will generate a very large CSS file with several thousand selectors. But with a little optimisation (turning off unused colours and screen sizes) you can dramatically reduce this. Also, the size is modest if served minified and gzipped.