Tailwind is a Leaky Abstraction

I have to admit: as I’ve watched Tailwind enthusiastically adopted by more and more of the frontend community, I’ve remained skeptical. But, having never used it, I decided to keep quiet until I had an informed opinion.

Well, I’ve spent the past few months at work learning Tailwind with an open mind. I can now confidently say that I do, in fact, dislike Tailwind, and I wouldn’t use it for any new projects.

Tailwind is commonly described as “utility classes”, but that’s a bit of an understatement. It’s essentially a small language you write in the class attributes of your HTML that compiles to a combination of CSS rules and selectors — an abstraction over CSS. But all abstractions leak, and Tailwind is very leaky.

Read in full here:

This thread was posted by one of our members via one of our news source trackers.

3 Likes

Corresponding tweet for this thread:

Share link for this tweet.

1 Like

Maybe it is just me, but I really didn’t enjoy working with Tailwind utility classes. I am not a CSS expert, but I still like working with plain CSS.

2 Likes

I did enjoy working with TailwindCSS. It allowed me to avoid CSS cascade/specificity issues. But as with any abstraction or framework - it is a crutch. By using it I was learning the framework, the Tailwind way, not deepening my understanding of vanilla CSS. I plan to remedy that in 2023.

2 Likes

I very much don’t like tailwind either from when I tried it for basically the same reasons as listed in the article and the people above. You are basically still doing CSS, just stuffing it into the HTML instead, it’s not any form that could be changeable or themeable without sweeping changes. It’s far far better to just use CSS itself with proper class names based on what things are and do.

2 Likes

I haven’t had time to look into it much yet, but curious to see what all the fuss is about (as I’ve been thinking about replacing FoundationCSS for a while now).

We’ll be running a book club for the Tailwind book soon if anyone’s interested in joining - just PM me if you are! :smiley:

2 Likes

Hi, Aston, how exactly works the book club?

2 Likes

It’s essentially a thread on the forum where participants can leave comments/chat about their journey through the book/the tech. People not taking part in the book club can also post comments, ask questions about things someone has posted about it, etc :smiley:

There’s no hard requirements other than us suggesting you make at least one post per chapter (even if it’s just to say you’ve completed the chapter or looking forward to the next one) so that it sets a goal for you to get through the book as well as help motivate everyone else in the club to keep reading :blush:

1 Like

I’ve chatted with a frontend dev friend, he told me exactly the same.
He prefers to use CSS modules.
As I’m not a CSS expert I tend to believe him.
Putting everything inside the template makes them IMO unbearable.

2 Likes

Oh, nice one, unfortunately I don’t own this book so I won’t be able to take part on it, but I’m looking forward for some future opportunity =)
It seems a great idea to keep people motivated.

3 Likes

I’ve got some copies to give away if you wanna join the book club @faust - PM me :wink:

2 Likes

Oh, nice!
I just love this forum more each day :blush:
I’ll PM you
Thanks!

3 Likes

But that’s kind of the point. Tailwind is a layer on top of CSS, but it doesn’t actually hide any complexity in the layer below. You still need to know CSS.

Its kinda funny reading this as a con of Tailwind.
Im my opinion this is a pro, if I know css I can use alongside tailwind on where it makes more sense.

I am by no means expert in CSS, in fact I really suck at it as I do mostly backend stuff with basic templating until a better designer comes along, so on my short experiments with tailwind I dont find it that bad when used with a component library.

Using it with phoenix components or ViewComponent is kinda nice, I can have “modular” css via components without the need to pull in a javascript library to namespace my modules.

That being said, opening a template and looking at 200 classnames on a div is really scary for a tailwind beginner like me :sweat_smile:

CSS modules

Is this a native browser thing I am not aware of or is this a library?

2 Likes

It seems that there’s 2 “flavors” of CSS modules.

The native one and the other one.

I didn’t try either of them but it’s good to know that we have something else than Tailwind.

The fact that Tailwind is (or will be) hegemonic in the CSS field is a serious concern for me.

2 Likes