You will love Tailwind CSS

Intro

There are few technologies that I fell in love with. React is one of those, Redux is another, even if I don’t use it as much today. I never fell in love with a CSS framework, until I discovered Tailwind, so I want to share my joy with you, sure that you will love it, too.

Briefly, Tailwind is one of those frameworks that make you write long class names like text-3xl sm:text-5xl text-center font-gray-600 leading-tight and this is the thing that scares most of the developers approaching it.

In this post I’m going to tell you the main reasons why Tailwind is very good for me and my team, sorting them by the impact they have on my everyday “job to be done”.

A built-in design system

I find myself creating better interfaces just because I use Tailwind.

It has a good design system built-in. What does it mean? Tailwind limits your choices, lowering the cognitive load and making your design better.

There’s a fixed (overridable) and well-thought set of font-sizes, colors, paddings, widths, shadows and so on. When you use this low-level design system you have more coherent interfaces from day one.

No context switching

I work just on the JSX code, without going back and forth to a CSS file. I almost never write CSS anymore. Super-productive!

No naming problem

I am very fussy when it comes to naming things. With Tailwind no one in my team will ever write a new class with a name that I don’t like 😊. Everyone uses the same self-explanatory classes.

On the other hand, I know everyone immediately understands the meaning of my CSS classes (I know the others don't like my names, too 😉).

Complete, flexible, lightweight

Everything can be customized using tailwind.config.js: colors, fonts, spacings… everything!

To make this work on a React / Next.js / Gatsby project, you need to configure postcss. And this is great, because it gives you a method, and a very good one.

When you have this configuration in place, not only you can configure the framework, but you can easily add purgecss to the equation and remove all the unused styles, dramatically reducing the size of the CSS bundle.

Easy to learn

People may convince themself that a new way of doing things is great only if they start doing things the new way. And if a technology has a steep learning curve, the trial phase becomes a nightmare, the first impression is bad and the old way is the one that wins.

With Tailwind, the onboarding process is as easy as throwing some classes in the code and seeing the result. As soon as developers start using responsive utility variants, they are often already with you, pleased to use it.

Conclusion

With Tailwind CSS I am more productive, more satisfied of my work and, at the end of the day, I am happier 😃. Try it to believe!