We all know CSS is a necessary evil of web design. It’s finicky, it’s often hard to understand, and sometimes it’s just downright rage inducing.
But it is absolutely required if you don’t want your website to look like this.
So, if you are like me, when you start a new web project, you do a search like this
css frameworks 2019. And you’ll find the usual suspects:
None of them really fit what you are going for, but the alternative of starting from scratch is unthinkable. Sure going through Flexbox Froggy and CSS Grid Garden are fun and useful, but how long does your memory of those confusingly named properties actually last?
So you end up going with your ol’ faithful, whether that be bootstrap, bulma, or whatever. I have always tended to lean towards bulma in these situations. But you’re never fully satisfied.
Enter Tailwind CSS
Tailwind is a self-described “utility-first CSS framework for rapidly building custom designs” which at initial glance had me thinking “yeah, yeah… that’s what they all say”. But with Tailwind they mean it.
Now I actually first heard about Tailwind about a year ago, but I didn’t give it the attention it deserves. The past few months, for anything CSS I have been turning straight to Tailwind. It really is great.
At first glance it reminded me of inline styles which immediately turned me off. But don’t let your (understandable) prejudice against inline styling to prevent you from exploring this one.
Tailwind allows you to explore and experiment new ideas without having to leave your HTML or JSX. You can design at the speed your brain can think.
Here is an example of how easy it is to create a nice responsive component:
<div class="md:flex"> <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase"> </div> <div class="mt-4 md:mt-0 md:ml-6"> <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div> <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a> <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p> </div> </div>
The coolest part
As much as I talked about all the pain of CSS at the beginning, when you use a framework like Bootstrap or Bulma you are abstracted away from the CSS. Because of this, you end up with cookie-cutter designs since you don’t want to figure out how to customize those beasts.
On the other hand, when you are using Tailwind, you are back to just using CSS attributes, just without nearly as much of the usual headache. So you are actually improving your CSS-game and are making truly custom designs.
Back before Bootstrap and friends hit the scene, the web was a much more interesting place. I will never hate on Bootstrap or other CSS frameworks, they provide enormous utility and have enabled so many people to create wonderful websites and applications that wouldn’t exist without them.
But when I see your new SaaS and can tell exactly which CSS framework you are using because it looks like every other new SaaS on HN it makes me wish for more excitement.
Thankfully Tailwind has made it much easier to do your own thing.
So, if you couldn’t already tell, I give Tailwind CSS a big thumbs up.