Hướng dẫn tailwind vs bootstrap reddit

I have a Laravel app I started building in bootstrap 4 using the Noble UI theme. It was working, and I'm familiar with bootstrap and all the various plugins that are normally used, like select2, toastr, and various charting libraries. I can move fast with those technologies.

The downside is that I cringe a little using bootstrap as it just feels so stale to me. Some of the designs I've seen using Tailwind are just so much...better. Not to say you couldn't do something similar with bootstrap, but you get what I'm saying.

Anyway, I started re-building the app using tailwind, but I'm starting to wonder if it's a bad idea. I spent the better part of several days just trying to do a searchable multiselect drop down that I could've stood up in 30 seconds in bootstrap.

I can't blame tailwind completely, as I'm using Livewire and I'm very new to that and to Alpine.js, and I'm not exactly an expert at Laravel either, so I'm sure someone else could do what I'm trying to do much faster, but I was able to use select2 in bootstrap with livewire and get that up and running in no time. I'm wondering if the ecosystem for tailwind maybe isn't quite there yet I find myself thinking, if doing the select menu is this difficult for me, what's it going to be like when I start trying to use something like a charting library or something. Full disclosure, I haven't yet tried to use select2 js and just style it myself using tailwind, so I was also considering doing that. But the problem remains, is the juice worth the squeeze?

I'm struggling with whether I press on with Tailwind or just concede defeat and switch back to bootstrap. Interested if anyone else has run into this same conundrum and what you would do in this situation..

• bootstrap gives you fully styled, predefined components (header, button)

• tailwind only gives you utilities (style tokens) that adhere to a theme (eg sizing scale)

there are no header or button, styles in tailwind. you have to compose them yourself with the utilities.

both help you prototype really quickly, so pick whatever is best for the job.

i feel like bootstrap is for people who wanna do as little css as possible and dont know how to build stuff from scratch. tailwind is for people that understand how css works in general but cant be bothered to wrangle the cascade, BEM or specificity, and who dont want to decide if a text should be 20 or 21px.

i personally dislike bootstrap as it just looks awful. if you customize it to look completely different you will most likely write horrible css overrides that dont scale well. so if you plan on throwing your app away or appearance is not a priority, bootstrap is ok. for anything else: tailwind.

There's a right way to do Tailwind and there's a terrible way to do it. If you extract utility classes into SCSS files, using @apply to group the utility classes and spread them in those groups over multiple lines, you're doing it right. Congrats.

But most people just spam 20 to 40 and sometimes more utility classes in one line and think they're doing a good job.

As a CSS lover and someone who is really good at CSS: The votes for Tailwind make me really, really sad. Because it's deceiving, it's lazy, and it's just plain bad.

Line breaks are good. Utility classes should be used rarely. Specificity is to be understood, not to be ignored.

In my many years of being a front-end specialist, I've never been so saddened by any technology... It is such an insult to the profession, it's hard to explain it to people who simply refuse to learn CSS properly first.

And NO, "in order to use Tailwind you need to know CSS" doesn't fly. Saying that just shows you don't know CSS. Because, if you did, you wouldn't see any need for Tailwind. It's completely superfluous.

1. It lacks all specificity;

2. The C in CSS is rendered completely meaningless;

3. It's all in one line, I thought we had agreed somewhere in the 1970s that we don't want to have that many things on one line;

4. Git also agrees, make one tiny change in your list of 20+ utility classes, and it'll tell you the whole line was changed.

And: It's just lazy. That's not bad for all projects, have at it for your quick proof of concept, who cares. But for the love of all that's nice on the web, avoid it in large production environments.

The worse side-effect is that you'll alienate the people who actually know what they're doing. You'll be left with cowboys who don't know how to ride a horse and just string together 50 horses and run over them wearing 50 spurs on their feet.

Downvote me all you want for giving an opinion, I expect many of them looking at the votes, but I'm convinced that focussing on Tailwind is not going to be a good idea for anyone's career.

But. Yes, I'm aware that there's @apply, and that solves many issues, but most people don't use that and think that spamming 40 randomly sorted utility classes in one element is A-OK.

Please learn CSS, learn SCSS, learn Bootstrap, learn Tailwind, and use your brains, people. If you have a 4k screen and you have to scroll horizontally in your IDE to see all the utility classes, you're doing it wrong.