Stop Writing CSS — Tailwind CSS

Tailwind CSS allows you to never need to write another line of CSS again.

I admit I’m a little late to the party — but as with many of my developer peers, I delayed diving into Tailwind because I was skeptical. I told myself, “How could this possibly be different from Bootstrap 4”.

What is Tailwind and how is it different from Bootstrap?

It’s very different.

Tailwind isn’t a library of set styles like Bootstrap is. Tailwind is a library of utility classes you can use for full control of each element’s styles.

With Bootstrap, for example, the buck stops at the developer’s ability to implement Bootstrap’s component-first classes. At its core, Bootstrap is a componentized system of CSS styles. Sure it’s customizable, but just barely. And that is the problem with Bootstrap — all Bootstrap projects look the same unless a lot of custom CSS is implemented.

Tailwind, on the other hand, is utility-first. The developer has full control over every style implemented onto their element. While there are many ways to build a form input in Tailwind without the use of custom CSS classes, in Bootstrap, there is only one.

An example of an input field using only Tailwind classes. https://tailwindcss.com/docs/preflight

<input class=”focus:border-light-blue-500 focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-10" type=”text” aria-label=”Filter projects” placeholder=”Filter projects” />

And here’s a Bootstrap-only equivalent. https://getbootstrap.com/docs/5.0/forms/form-control/

<input type="text" class="form-control form-control-lg " aria-label=”Filter projects” placeholder=”Filter projects”>

How does it work?

A workflow diagram depicting how Tailwind implements its library of utility classes, is then customized by a user config file, and then subsequently pruned of all its unused classes via a PostCSS build automation.

It’s genius.

The Tailwind workflow allows the developer to never need to write any CSS code. Albeit with the caveat that they memorize all possible utility combinations — but even then, the team at Tailwind has provided tools like this VS Code extension to further improve the developer experience. Additionally, Tailwind uses straightforward, plain English, standard pattern naming conventions for all their utilities making it really easy to understand precisely what a specific class’s function is.

So if you haven’t given TailwindCSS a test drive yet, I highly recommend that you do in order to fully understand all its benefits and potentials.