Hacker News Reader

Comment by epolanski | Hacker News Reader

+1.

Let's say things how they are: Tailwind is a small catastrophe from an implementation, performance and maintenance point of views.

It got few things quite well in being a more modern bootstrap, had a stellar marketing and it's color palettes are really well done and leagues above the default material ones.

...that being said...

Tailwind's biggest pro is that it allows people that _don't_ know css that much to style stuff more consistently and easily. But that's where it ends.

Sadly there's a lot of issues when it comes to maintenance. Any small update in tailwind will break your application. !important s are shoved pretty everywhere, they will unavoidably clash, prompt you to override even more styles.

There's yet another complication with tailwind: the moment you want to do something more complex with tailwind or that it clashes with its own styles/rules you're in a bad corner where you need to know bot advanced css AND tailwind.

View on HN

None of this mirrors my experience whatsoever. That’s “how things are” for me.

I know CSS very well and Tailwind is probably the largest productivity boost I’ve encountered since, I don’t know, learning vim? It’s way faster than SASS/SCSS which is itself way faster than raw CSS.

It also yields far more self-contained and more readily composable components than any other styling mechanism.

Your comment doesn’t resonate with my experience at all.

My experience mirrors yours 100%. What the parent comments seem to be describing are Tailwind in a context where people don’t know CSS that well. Yes, that will be a catastrophe. But so will SASS or vanilla CSS — even more so. Tailwind is a utility, not a replacement for fundamental knowledge.

On the other hand, people that know CSS very well will not need suddenly tailwind to get some utility classes.

And people that know (Python|Ruby|PHP|Go|Etc) don't need the framework to implement a web app, yet we use them anyway.

What is the value of reimplementing a bunch of this if it already exists? What's the value of having every developer learn some poorly-documented in-house system when we can use one that's already out there with full documentation, examples, references on StackOverflow, etc?

As a programmer that likes to paint, I think the difference is that web pages are a visually artistic medium. Artists that have unique fine detailed visions often feel the need to use low levels tools to perfectly achieve those visions. I guess this this applies more to individuals than teams however.

There are tons of people who are perfectly proficient in CSS who are not won over to utility classes. As you become more won over, you start writing files full of utility classes that… wait for it… someone else has already written! With huge coverage over CSS! And really good defaults! And lots of escape hatches!

And to top it off, nothing guarantees your colleagues are actually going to use those instead of creating their own ad hoc “semantic CSS” or whatever their preference is.

If you decide you’re a utility-only frontend, then… there’s a great tool for that!

So now why on earth are you still plugging away at that utils.css?

“If you know <insert underlying technology> then you can just make <higher level, more productive technology>” isn’t a great take

I've been writing CSS since 2009 and I love Tailwind. It allows me to very quickly build UI that has a consistent look and feel without having to stop and think.

Yeah, I wrote CSS without Tailwind for 15 years. I don’t need it. I’m just 10x more productive with it. If you don’t want to learn new things that’s fine.

This is where I wish we still have upvote numbers on HN. How many people agree with you vs parent and grandparent comment?

I've been doing web dev since I was a kid in mid 2000's and I think tailwind is phenomenal in enforcing style, portability, speed, etc. I recently started to writing a single .html file proof of concept for something and it was shocking how poor the experience is of `style="..."` is in comparison, or making up classes as you go.

Utility classes aren't new to TW.

Parent comment didn't claim they were new to TW.

Agreed. I've been using CSS for over two decades now. The composibility, reusability, and maintainability benefits of CSS have just never materialized outside of some very tight scopes such as toy projects or single developer projects as far as I've seen. And we pay heavy costs having half of the context of whatever we're working on living in an entirely separate file (any generally multiple discrete areas within that file or even multiple files) in a way that's poorly discoverable and debuggable.

Tailwind finally throws in the towel on all of that and just brings the full functionality of CSS to inline styles and leaves reusability up to whatever framework and templating you're using on top of HTML/CSS.

When I walk into a project using Tailwind I spend way more time actually working on _the project_ and way less time looking at the browser devtools trying to disentangle and chase down the complex web of interacting styles that are somehow working on the markup. Everything I need to know is already in front of my face directly attached to whatever element it's related to.

It is another thing to learn but it's pretty darn straightforward and well documented. Coming from a solid CSS background it took in the manner of hours before it clicked in my head and I was productive. And that largely translates to whatever project I'm digging in to instead of having to spend a bunch of time learning each project's bespoke styling system.

Tailwind is way less technically elegant than CSS, but the technical elegance of CSS has always seemed more lofty and academic than anything.

This resonates quite well with my experience.

If you understand CSS well and you’re using TW, you will ~never have to go chase down some crazy style cascade via the inspector.

No amount of understanding CSS can save you from that in a complex CSS/SCSS codebase, because it’s how CSS is meant to be used.

Yeah it wasn't until I was reflecting and writing that comment that I realized _I don't remember the last time I had to look at CSS in the dev tools_ and how much better my life is for it.

Maybe I just suck at CSS. I mean, I've been using it for decades, but maybe I'm too stupid to actually understand it. And maybe it's the same story for everyone else I've ever worked with and that's why my experience with it has never lived up to the ideals.

... but if that's the case then at this stage of my career, with vast and varied accomplishments behind me, I think that says more about CSS than about me.

This, to me, is the best description in this thread of what I like about Tailwind and what makes it click for me. Well put.

I think I'm pretty good at CSS and have been using it for maybe 15 years.

I find tailwind just makes my life easier. Sure, it's not perfect, but I really don't enjoy giving every div and container it's own unique name and hoping none of the names ever clash with my colleagues unique names etc.

Also, I came to realise that websites never strictly follow the same design rules throughout. There are always exceptions. So you are constantly creating new style classes that are slight modifications of others. And keeping this all in your head is not easy.

I know a lot of people disagree and feel like tailwind is a problem, but for me I can just concentrate on making a great site rather than worrying about how a slight change to the styles inside .container might break some obscure part of my website.

You don't need to give every div and container a unique ID. Why ever do that? Many things never need their own ID.

Are tons of divs and containers needed? When I find myself needing containers I usually find out I've not been thinking about arrangement very well.

If the options are "never encounter a problem" versus "when I encounter a problem I realize that it's actually a superficial symptom of a more substantial problem someone made hours/days/weeks/months ago," I will take the former 100% of the time.

Assigning an ID to every single element means never encountering a problem? I imagine that results in everything being a special case, much of the point of CSS missed, and in this special case Tailwind might even work as it's consistent with everything being a mess.

Well it certainly means never encountering odd and complex style cascades, but Tailwind avoids that problem altogether without requiring IDs for everything.

I was resistant to Tailwind for a long time, and recently I decided to try it on a recent project. IMO it lives up to its reputation and has changed the game for me.

The biggest pro for Tailwind is that it is exceptionally well designed. Aside from adding one single custom style to the Tailwind configuration, I have not needed to venture outside of the system it provides despite writing many bespoke components.

Could you explain the performance problem ? I understand how you could get to the other claims, even if i disagree.

But i sincerely do not understand the performance one. If anything tailwind approach is mostly really good for performance, as rendering utility class directly on the element is still the fastest, by far, technique.

The only slight call here could be shadow dom scoped but that necessitate declarative shadow dom and create a lot of problem for performance until we get a fetch maps equivalent to import maps.

What have I missed?

You haven't missed anything. I swear, every time I read a thread on here about Tailwind I feel like I'm taking crazy pills. So far I've heard:

  1. Tailwind allows you to not learn CSS (not even remotely true)
  2. Tailwind is hard to move away from (what?!)
  3. Tailwind has performance issues (lol)

something something 3rd party dependencies bad for (?) reasons

>> Tailwind's biggest pro is that it allows people that _don't_ know css that much to style stuff more consistently and easily. But that's where it ends.

I'm considering advocating for a move to TW at work. Most of the devs _don't_ know CSS well enough to style stuff consistently and easily. We have very complicated cascades, and sibling style imports, and "semantic" class names.

Sure, maybe the answer is "level up your teams' CSS expertise." But I'm looking for something more pragmatic than that. I don't know if TW is ultimately the right tool I'm looking for, but the underlying ideas it uses are very appealing for this use case.

Yeah it sounds like one of the cases where using tw could be good.

Try Tailwind. I was a complete hater before I sat down and committed to one week project with it and I am frankly ashamed at how off my assessment was prior to using it.

I think Tailwind could be made good for usage at enterprise scale, for example, as a customisable foundation for a branded design system.

If for example Figma offered first-class support for Tailwind-like utility classes in the form of a modernised "styles" or "composite tokens" feature, then mapping from a design system to Tailwind-based code could be pretty simple.

But right now, it's anything but. In my experience, designers simply aren't aware of the Tailwind structure, and it's hell trying to map their mental model onto Tailwind. Figma is built to design things that map easily to CSS at the attribute level, not the class level.

How's any of that unique to Tailwind?

One of the things that tailwind achieves is let you ship style in a way that is encapsulated within components and works reliably across any framework (including server-side rendering frameworks, react, svelte etc).

That's not unique to tailwind.

Does it need to be unique to be useful?

What other approach gives you that?

> Tailwind's biggest pro is that it allows people that _don't_ know css that much to style stuff more consistently and easily

I have never understood this claim. You need a good understanding of CSS to use Tailwind effectively because it is CSS.

It’s not an alternative technology, it’s essentially just an alternative syntax—one that naturally leads away from footguns that many teams end up battling, like fragile CSS that everyone is scared to change.

You could just as easily define the utility classes yourself every time you need one, it’d just be a lot more work.

Reply on news.ycombinator.com