I recently overhauled the UI for
my letter builder web app, switching from Bootstrap to
a neat framework named Tailwind CSS. It’s been great so far.
I dabble in web development, but it’s not “my
thing”. Most of my time is spent on back-end systems and the
occasional native UI. When I’m building a web UI, I usually
spend a lot of time on
W3Schools looking up
Enter Tailwind. It’s a utility-first CSS framework, which in
practice means they give you a whole bunch of
“utility” classes which are effectively aliases for
common styles. Here’s an example from when I was styling a
<button class="bg-blue-dark text-sm text-white rounded
py-2 px-4 my-2"/>
With these classes, I’m saying that I want a dark blue
background, small white text, 2 units of padding on the top and
py-2), 4 units of padding on the left and
px-4), 2 units of margin on the top and bottom
my-2), and rounded corners. Whew!
Right away, we can notice a few advantages relative to the normal
way of doing things:
This is fast to iterate on. I can add another utility
class in-line without digging through my CSS file and reasoning
The class names are concise yet informative.
py-2 is clearly operating on the Y axis (top and
bottom), which is much easier to remember than a
padding style with multiple unlabeled values.
I have fewer choices to make. I didn’t need to worry about
whether to use
a dark blue, I just asked for dark blue. Same thing with
padding+margins, I just chose from a small set of integers
instead of wondering whether to do 0.5rem or 0.6rem.
Isn’t putting all your styles inline just asking for
Yes, this can get out of hand if you put too much stying inline –
but Tailwind utility classes can be extracted into components as
soon as you need some additional abstraction.
The authors even recommend that:
Tailwind encourages a “utility-first” workflow,
where new designs are initially implemented using only utility
classes to avoid premature abstraction.
While we strongly believe you can get a lot further with just
utilities than you might initially expect,
we don’t believe that a dogmatic utility-only approach
is the best way to write CSS.
Curation VS organic growth
I’m being a little hard on the “usual” way of
writing styles in CSS. The web grew more-or-less organically, so
it’s not fair to expect an overall design from the
mess of styles available to modern browsers. Thankfully,
that’s where projects like Tailwind come in.
It’s remarkable how much nicer it is to build web UIs when working
with a thoughtfully curated and documented subset of styles.
Sometimes a big step forward doesn’t need to come from a
clever technical breakthrough – simply organizing existing
information+symbols in a better way can reap massive benefits.