Tailwind CSS

Category: Thought

Tailwind. Anti-Pattern or ...not?

I have been a fan of Adam Wathan for a while now, even before he created Tailwind. I had misgivings about the concept of making HTML look like a class index - it felt wrong to me. However, as time has passed, I find myself using it more and more. What has changed?

Is Tailwind a way to go?

My first impression was, Adam tries to have something on his own. Not very useful, but his. Okay. Let's have a test ride. And I didn't like it. Html document was looking gibberish, docs were incomplete and hard to query.
Many folks share this opinion, when you google "tailwindcss anti-pattern" you find tones of articles like this one from Enrico Gruner. There is a lot of true in there. But.
I still use it, when I need to prototype, do something fast, or just style an internal telemetry page.
To answer the question why: it is so simple to use, results are so clean.

Thinking a bit further, list of reasons is growing. First, the docs. They are amazing. Great job Tailwind team. You have set the bar really high for open source projects documentation.
Second: entire ecosystem, with tailwindui, heroicons, headlessui and others. Just waiting to kick off your project.
Third: continues development with attention to user comments. You think - this is missing, a few months later it is added. Like fine tuned gradient positions. Fourth: easy to extend to match your needs in more complicated work. Again, docs are there for you.
Fifth: which took me longest to appreciate, when you work in a larger team, it stops from growing so complicated, messy css.
To argue against Enrico comment (link above) "you’re not learning CSS patterns by using Tailwind", I think you actually do! Of course not on rock star level, but when you add Tailwind classes in your IDE, you can see by hovering what css is there, and understand what's happening under the hood. You don't learn inheritance and more advanced css selectors? Okay, the question is, do you really need them? You can achieve the result anyways, without creating a labyrinth of from where this style actually came?
To summarise, if you have relatively simple needs, not planning to be a css animation magician, use Tailwind. You will have the job done faster. Without one line of css.
Last point? This page is built with Tailwind.


The Ace 2.0
Michal's assistant eye