You should avoid Tailwind

İlyas Akın
3 min readMar 2, 2021

--

So you started to use a CSS framework called Tailwind. You can write components lightning fast, you don’t need to create a separate CSS file for styles, everything is perfect right?.. right?

No.

I’ll try to explain in few points.

Fundamentally Wrong

Let’s start with what the term “CSS” stands for.

“Cascading Style Sheets”

Representation of a sheet

This square will represent a single sheet in the next images.

Cascading Sheets

This image is the representation of the CSS. Think of these sheets as classes. See how they cascading each other and forming a single shape?

Tailwind

And this image is the representation of the Tailwind.

Seen the difference? There is no cascading and there is no order, everything either next to each other or overlapping each other. These should have been a single sheet, not separate sheets.

We could have sworn we ditched inline CSS!!

It’s been nearly one and a half-decade since we last wrote HTML like this. Not only it was ugly, but it was also hard to maintain too.

So, we separated CSS and HTML.

Now let’s see in Tailwind.

It’s better now. But is it good? What will happen if you have like 15–20 Tailwind classes. What will happen if you add some media queries? The answer is simple. It will be a mess… even for a single tag.

Now imagine you coded your entire project with Tailwind. There are all sorts of things, bats flying, things get fancy on hover, fireworks setting off on focus, etc. and you started some other project and some other, and other and other.

Will you understand what you wrote when you come back to the project 6 months later? (Classic.) Eventually, yes. But the cognitive load will be heavier.

I don’t mean writing pure CSS will make your code more readable. You can write pure CSS and it can be infinitely more messed up than the Tailwind one. I highly encourage people to use the Maintainable CSS approach for ultimate readability.

Customizability for the worse

This is not necessarily an issue with Tailwind. Tailwind can’t cover every feature with every possible combination of them. So, it’s only natural they added a customization feature.

Tailwind lets you overwrite and add new utilities. This is a blessing and a curse. Let’s say you overwrote everything and implemented your design system over Tailwind. Now a person needs to memorize Tailwind utilities per-project basis. It gets a bit exhausting to check the config after a while, trust me.

Conclusion

In the end, every framework, tool, or language is good if they get your job done. And Tailwind is not an exception to that. But I think you should avoid it.

--

--