The biggest problem with Tailwind CSS...

The first impression

My first encounter with Tailwind happened during a project presentation by a student at a jury. When we asked him to explain his choice of this library for his project, he graced us with these few words that still resonate within me:

Because it's better than bootstrap.

Although bootstrap isn't perfect, I had a hard time believing this statement for the simple and good reason that the code he was presenting to us looked like this:

Ah... the nostalgia of css entirely written inline, reminding us of the darkest hours of web development... what a pleasure.

Once the nostalgia had passed, I did everything I could to hold back the wave of nausea that suddenly rose in me: the code didn't even fit on the projector screen!

As you might expect, when he was asked to change the color of all the links in his application in front of us, his face turned redder faster than the links themselves... He realized his mistake and explained to us that Tailwind has a way to factorize all that thanks to a directive, but that he hadn't taken the time to use it. (Too bad)

This directive is called: @apply

A few weeks ago, I felt like taking a closer look at this famous Tailwind, after all I have nothing against the "utility-based" approach if it's applied correctly! Even though our first encounter was quite disappointing, the fault lay with the developer who had done nothing to make the code readable... Or so I thought.

A deep dive into the docs

What a surprise it was to read in Tailwind's official documentation that almost ALL the code examples provided in the docs are written inline, and the use of @apply is mentioned briefly but without ever encouraging developers to use it systematically.

Ok, utility-based can be great, but leading developers to believe that it's worthwhile to write everything inline like this, even in web components that avoid repetition, I find that deplorable.

Use Tailwind as much as you want (I'll be joining you soon) but please use the power of the directives provided with it and avoid using the monsters that are inline pseudo-classes.

A little hall of fame of unreadable code, taken directly from the official docs:

A magnificent email field accompanied by its focus pseudo-class

A modern alert resting on its flexbox bed

A responsive card with its thousand and one flavors of text