Utility-first CSS - You have to try it first!

Years ago, Bootstrap has already provided us with a set of utility classes. For example text-center for text-align: center;. Over the years, such frameworks started shipping more and more just like this.

Probably my favorite ones are spacing utilities. mt-1 for margin-top: 2px;, px-3 for padding-left: 8px; padding-right: 8px;, m-auto for margin: auto etc. Gone are the days where I have to invent a class name for something abstract, just so I can give it some padding.

So recently, version 1.0 of Tailwind CSS was released. Its approach is vastly different from traditional CSS frameworks. Rather than providing high level styles and components, it keeps everything low level, focusing only on utility classes.

<div class="md:flex bg-white hover:bg-gray-200 rounded-lg p-6">
    <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg">
    <div class="text-center md:text-left">
      <h2 class="text-lg">Erin Lindford</h2>
      <div class="text-purple-500">Customer Support</div>
      <div class="text-gray-600">[email protected]</div>
      <div class="text-gray-600">(555) 765-4321</div>
    </div>
</div>

This looks horrendous! My HTML will be forever ruined!!

This is probably most people's first reaction when they see this. Hey, this is breaking various best practices on semantics after all.

It just feels wrong... Until you try it for yourself!

I repeat, you have to try it out to understand it!

Open up codepen and try recreating something from here.

At least for me, it feels weirdly natural and productive. No longer having to switch between HTML and CSS is a bliss. If you think about it, when was the last time you edited HTML without changing its styles at the same time?

So let's tackle the most common question!

Why not just write inline styles?

• With inline styles you are very limited. No media queries or pseudo classes.
• With tailwind CSS you pick from a set of classes, so rather than thinking up a new font size, color, margin, padding, etc. evertime you add styles, you just pick something from the existing set. As Adam Wathan puts it Designing with constraints. This has two major benefits.

1. You will save a lot of time not having to come up with new sizes and colors all the time
2. Reusing the same sizes, etc. will naturally also improve the UI a lot.

Let's go through some more benefits

• No more wasting time inventing bad classnames like this-wrapper, that-body.
• breakpoint prefixes! Let me say that again, breakpoint prefixes!! In other words, get rid of 99.999% of media queries. xs:p-3, md:text-center...
• Customizable to the core. Don't like a certain property? Override the default in the configurations! You can even add your own utility classes while still making use of breakpoints, pseudo classes etc.
• JS Framework agnostic. Works out of the box with vue, react, angular, blade, traditional sites etc. That means you don't have to learn a new CSS framework just because you decide to use a different JS framework.
• Find yourself repeating a set of classes? No problem, it's called "utility-first", not "utility-only". TailwindCSS even helps you making new classes using existing utilities

.btn {
  @apply rounded-full text-sm text-white bg-blue-400 shadow-lg;
}

• You no longer need to maintain huge CSS/SCSS files. CSS grows very very fast after all.
• This goes together with the previous benefit. With a utility-first approach, you will be much more confident making changes.
• No framework lock-in that dictates how your buttons etc. should look and feel like. This will make your design unique.

If you still have doubts, watch the creator of TailwindCSS make a website from scratch.

TailwindCSS also ranked extremely high in The State of CSS 2019.

Conclusion

Did you know GitHub is following this approach as well?

Maybe I just really like it because it is feels so refreshing. Maybe I am overlooking the drawbacks and only focus on the benefits it provides. That is definitely possible. So let's see how I feel about this in a year from now. But for the time being, I am really enjoying it!

With all that being said, try it out for yourself and hopefully you will enjoy it as much as I do!