Ways in which Tailwind CSS is a better choice than Twitter Bootstrap | Hacker News Reader

Ways in which Tailwind CSS is a better choice than Twitter Bootstrap

frontendeng.dev

25 pointsrhuru37 comments

I think I like how the article tells you that this comparison is basically like comparing Legos with IKEA furniture. But in reality I think more apt comparison is getting wood and tools from HomeDepot vs buying make your furniture kit from IKEA. Writing plain old CSS would be like go to forest and cut down your own tree.

People who are dissing on TailwindCSS come across as more emotional than sensible. Tailwind is a far better fit for any large application that needs to be unique in its design which is basically any major website today. An e-commerce site today does not need 10 different types of buttons but it rather needs 5 buttons and one button that completely stands out.

Tailwind has gotten the complexity out of writing CSS to do all the common things yourself but it has not created and opinionated design philosophy either. It is not meant for your weekend project, but I do think nearly every large site will eventually move to a more Tailwind like framework.

I gave Tailwind a shot but ultimately settled with Bootstrap. It wasn't because Tailwind was bad-- I thought it provided a lot of value. The issues that ultimately made me switch to Bootstrap were:

1. I don't need a build tool for JS/CSS, so introducing one _just_ for Tailwind was a pain.

2. In order to really take advantage of Tailwind and speed up development, you need the Tailwind vim plugin (which doesn't work in vanilla Vim, only Neovim from what I can tell.. I don't use Neovim).

3. The html gets bloated pretty bad and it does get hard to read.. especially without the extra tooling like the Tailwind plugin to sort class names, auto complete Tailwind class names, etc.

If you're going to use Tailwind why not just use the style attribute and just give up on CSS classes?

It is easier to find how to do things using tailwind documentation than with native CSS documentation. As someone who is not very good at CSS it makes my life easier.

One reason is that you can’t do media queries in a style attribute.

Utility classes still encapsulate some complexity and responsive styling. They also generate colors from the global palette. Finally, they’re less verbose without losing much meaningful information.

Tailwind does a better job at enforcing a set of standards in the codebase. Specifically around things like spacing, text sizing etc.

This doesn't preclude enforcing it directly in the CSS files, but it does make it a lot easier.

People make a bunch of excuses for Tailwind. If you're going to write CSS just write CSS. Stop coping.

"If you're going to write assembly just write assembly."

The difference is that high level languages actually bring a level of abstraction not present in assembly. Tailwind does not exist on a higher level of abstraction. It's at the same level but written in a different vernacular

I think the word "coping" is inappropriate here, it's a tradeoff and in addition a matter of preference.

You might like not having 24000 permutations of

   display: flex;
   align-items: center;

in your code.

There are good alternatives to Tailwind and also small projects where "just write CSS" is enough. In larger projects, most people need at least strong naming conventions, other tools, and/or an opinionated "template" such as Bootstrap.

Many people using Bootstrap don't even bother to configure a theme.

That's where the real specificity wars begin then (not necessarily applicable to you).

And once people have started to define their design system in terms of overrides, pain is ahead (if you need any non-trivial CSS, that is).

After switching jobs, I now mainly use CSS-in-JS (which frees me of many problems, and in my case, creates fewer other problems).

I am perfectly versed in Vanilla CSS and the cascade, wrote my first stylesheet around 20 years ago (when layout in CSS was not really a thing)

Why is doing things differently from your preference "coping"?

I would much prefer the explicit, vertically-legible, autocompletable and real CSS rules to a horizontal mishmash of proprietary aliases.

I'm not even disagreeing with that. I saw the tradeoffs of Tailwind too.

And yes, I also agree with the core of your critique: Tailwind is a (yet another) DSL on top of CSS, which makes it smelly.

But as I see it, the reason for using Tailwind is not that this DSL was easier, in fact it's the opposite, I constantly had to use IDE autocomplete and/or the docs in order to use it.

Tailwind is a nasty DSL inside the class attribute, yes. And still, this DSL can be and often is a relieve from other custom CSS that grows exponentially and causes bugs due to selector complexity.

Tailwind IMO solves the same problem that styled-components, CSS Modules and ShadowDOM try to solve.

I've been using Styled Components exclusively for years and have no issues with selector complexity.

I am using Styled Components as well in my current job and like it a lot.

Maybe my post didn't make this clear, but that's what I meant when I said it solves the same problem for me.

No dead styles, no specificity wars, no naming worries.

Edit: I see, I wrote "try to solve" in contrast to "solve". That was unintentional and thus not what I wanted to say.

> Why is doing things differently from your preference "coping"?

It's not.

> There are good alternatives to Tailwind

Yes, just write the CSS. If you are going to use Tailwind, just write CSS. If you are going to use Bootstrap or any of those sorts of resources the equation is different. You're no longer writing CSS in a class attribute but pretending it's a style tag and that you're somehow doing things "better". You're just writing CSS without writing CSS.

To me the biggest reason is selector specificity, especially when it comes to authoring component libraries. Inline styles written with the style attribute are impossible to override without using !important, which only exacerbates the specificity problem.

If you find yourself at a point in your life where you're selecting between Tailwind and Bootstrap, you need to stop and think hard when did things go so wrong.

Sometimes I wonder, when did HN went so wrong and is full of comments that do not further the discussion but purely result into flamewar and ridiculous homilies.

I've only been here since 2015 so I'm not bringing much more than an early middle-aged viewpoint, in HN years. But I noticed a big uptick of this starting to happen when cryptocurrency people began proselytizing aggressively around 2016, 2017, so much so that I actually made an account to push back on it in some small way (my handle was originally blockchainoffools, but the hn handle limits knocked my block off) having been only a lurker for a couple years prior. Then it seem like the S/N regained some of its old strength for a bit. However the noise (and the halo of meta-noise such as this very comment) surged again to a degree that dwarfs the intensity of the crypto invasion, when first twitter and then reddit announced the end of free 3rd party API access.

I did not know Crypto bros are that old. Interesting observation though.

Most of my comments are serious.

But asking me to take Tailwind seriously as a CSS framework is like asking me to take Flat Earth Society seriously in a science forum. Everything has a threshold where you cross from the plausible to the absurd. To me there's a non-zero chance Tailwind is (or at least started as) a parody of bad software design.

We just had a submission the other day that "the JavaScript ecosystem has a talent problem". It's a real problem.

CSS's very goal is to separate styles into reusable, readable rules, and here comes Tailwind, inlining them into an endless combination of increasingly obscure and indecipherable abbreviations. Are you not entertained? It seems deliberate.

just use plain css. easiest solution ever.

That requires me to remember all the little corner cases.

CSS used to have many little corners. It doesn't these days.

What it has is an excess of features, that may be hard to recall. But large language models are surprisingly good at bridging this gap when you need a hand in writing a snippet for a given layout.

I suspect people waste more time learning Tailwind than they would write plain CSS. And by "plain CSS" I do not exclude tools like SCSS/SASS/LESS, whose utility is confirmed by the fact CSS itself is adopting some of their features and syntax (variables, nesting).

Imagine CSS adopting some of Tailwind's syntax, though... Wow. Sorry for the disturbing mental image.

Like what?

you mean border-radius?

Under Reason 2: "For Tailwind you will often end up writing something like following" -

I think they meant "For bootstrap.."?

No. Tailwind does not give you any button specific css, you are supposed to write it yourself. Where as bootstrap comes with .btn classes. So I think the article is correct.

I love the simplicity of the Bulma CSS framework.

And its pretty easy to find SASS/SCSS versions of it.

Bootstrap is no longer associated with Twitter. They used to be called Twitter Bootstrap since the people who made it worked at Twitter but it is almost 10 years since the quited and started for themself.

Based on the comments by other folks here, looks like lot of folks are using Tailwind incorrectly and then blame it for not being the right tool.

Tailwind classes might be verbose but you are not supposed to use them directly in the markup. Always create wrapper classes that are specific to your design and simply apply the utility classes in them.

In short make your own Bootstrap like framework using Tailwind's primitives. Tailwind has made this trivially simple.

This is specifically what they tell you not to do.

https://tailwindcss.com/docs/reusing-styles

Their advice is to use templating (components, partials, loops) to abstract and I agree. It ends up working a lot better than abstracting your CSS.

I am sorry I should have written it better. This is how I abstract away from tailwinds utility litter.

https://tailwindcss.com/docs/reusing-styles#extracting-class...

Further down in the link they do talk about not doing this for everything. Only for small things when templates are too much.

"Whatever you do, don’t use @apply just to make things look “cleaner”"

It is in general good CSS advice not just specific to apply.

This is just CSS classes with more steps.

Reply on news.ycombinator.com