Unpopular Opinion: Bootstrap is a better front-end framework than Tailwind

[pyeri]

Tailwind is the hot topic these days, and 9 out of 10 developers will probably suggest (or even force!) you to use Tailwind over Bootstrap. However, here are some logical and rational reasons why Bootstrap is actually the better framework:

1. Easier learning curve. Bootstrap 5 doesn't assume deep expertise in frontend design. The fact that backend developers can implement it easily without learning arcane concepts like state management or virtual DOM is highly underestimated.

2. Highly Utilitarian. While tailwind markets itself as a "utility first" framework, Bootstrap offers real utility without all the extra fuss. Navbars, modal popups, utility classes for colors and accents like `bg-primary`, `bg-secondary`, etc.— are all built-in and ready to use. How much more utilitarian could you get?

3. Creativity within Uniformity. This point is more about psychology than technology. One of the biggest criticisms of Bootstrap is that "most Bootstrap-built sites look similar". But this is a subjective opinion and ignores the fact that creativity doesn't always equate to reinventing the entire wheel. You can still be creative with configuring a wheel's spokes, tyre colors, tube pressure, etc. on an assembly line - In fact, such creativity is ideal when it helps increase productivity while delivering a standardized, user-friendly experience.

PS: Which one feels simpler and more utilitarian to you?

- Tailwind: `<button class="bg-sky-500 hover:bg-sky-600 active:bg-sky-700 text-white px-4 py-2 rounded-lg">Click me</button>` - Bootstrap: `<button class="btn-primary">Click me</button>`

[s1mplicissimus]

I've worked with both for years at this point. Imo they each have their sweet spot depending on what kind of page you are building.

Bootstrap is a huge time-saver when you are mostly fine with the defaults it ships. Extending it means writing a CSS file, which brings up the ancient problem of "gosh dang what's again all the places where this class/subselector is used?". Even changing colors is usually a trial and error effort, because different components use different variables as their basis. If you ever were to change font sizes, you will quickly notice that paddings etc. also need adjustment, so it's not as trivial as one might assume.

Tailwind's pain & gain come from the other direction: It's super easy to have every element look the way you want, but you also have to specify it for every element, which means high chances of missing something resulting in inconsistent appearance. It's not enough that I can abstract out the <Button> component, because the font size and line spacing must be visually(!) consistent with the <Select>, so those two are semantically linked together, but tooling can't help me reliably with ensuring that. Tailwind is, in comparison to CSS also way more limited in what can be expressed. Take something like this as an example of what is not expressible in tailwind:

``` .component { .listitem { p { color: red; } } .listitem.special { p { color: blue; } } } ```

[al_borland]

It seems like Tailwind only makes sense when dealing with components. For more traditional web dev, Bootstrap makes much more sense to me.

[TheCapeGreek]

errr, this sounds backwards, no?

Tailwind is better when you actually try to put the utility classes in your own components, sure. But the reason Tailwind got popular over Bootstrap in the last 5 years is because people got sick of hand-tweaking Bootstrap components and fighting it to do so when they can only run basic CSS sticks together.

(I'm aware modern CSS is really good even on its own, and most of us under-utilise it. But I think it has become clear that most people just don't want to learn it)

[gitgud]

Fine I’ll chime in… The main advantage tailwind has is that utility css can be composed without needing to worry about hierarchy. This is not true for bootstrap.

This makes tailwind much more predictable for component based UI architecture, in your example you would define a <Button> component so that verbosity of css is explicitly defined once where it’s used, not buried within a bootstrap framework somewhere.

If you’re not using a component based architecture, then tailwind is much more verbose, but still useful, as copying/pasting tailwind HTML is insanely easy and reliable. This is not true for bootstrap.

Bootstrap has it’s place, it’s good for cases where you’ I don’t care about the details of how it looks. But with component based architectures, tailwind is a much more flexible and better abstraction in my opinion.

[rozenmd]

Sure Bootstrap is better, for you.

Your postscript explains why: using the same "btn-primary" as every other user of the framework hints that you're not building something with its own visual identity.

For the rest of us, we throw that "bg-sky-500 hover:bg-sky-600 active:bg-sky-700 text-white px-4 py-2 rounded-lg" (or whatever color and shape matches our brand) into a component with a variant=primary property and call it a day. What developers actually see on a day-to-day basis is <Button variant="primary" />.

[stephenr]

> Your postscript explains why: using the same "btn-primary" as every other user of the framework hints that you're not building something with its own visual identity.

You know that bootstrap is trivial to customise right?

It turns out identifying primary and secondary buttons is a pretty standard thing in any kind of UI that has... buttons.

[fastasucan]

Cant you just customize the css of btn-primary?

[twelvedogs]

oof, that looks like absolute trash. i don't get why you want to use something less readable than css but to each their own i guess

[Leftium]

One advantage I've noticed for Tailwind:

- If you just paste an outerHTML from the dev tools, AI coding agents can immediately figure out what it will look like; debug styles; etc.

I personally preferred PicoCSS for a long time. Pico was nice, but it injected a lot of CSS var noise into the dev tools and I started fighting with the breakpoints.

More recently, I've been just doing handcrafted CSS with a bit of OpenProps.

[sjoedev]

I wouldn’t put them in the same category. Bootstrap has a much stronger opinion about how you write and structure CSS, while Tailwind is a framework for building a style system and writing arbitrary CSS that conforms to it. In practice, Tailwind is actually much closer to writing vanilla CSS. It does come with a widely used default (and very good, IMO) style system, but you ultimately apply arbitrary CSS rules just like vanilla.

Tailwind is certainly divisive. It’s better suited to component-based frameworks than templates or plain HTML, so a person’s background likely contributes to how they perceive it. Personally, I’ve worked a lot with vanilla CSS, opinionated libraries like Bootstrap, and Tailwind, and opinionated libraries are the only one I have no desire to use again. I generally want Tailwind in component-based projects and vanilla CSS in template-based projects.

At the end of the day, pick what you like and use it. They all get the job done.

[grugdev42]

Better is subjective, but I will say:

Bootstrap seems to create less CSS soup, but more HTML soup. And Tailwind vice versa.

For an admin panel or something back office, I agree that Bootstrap seems simpler.

But for something user facing and working with a designer? Tailwind is easier to customise.

[stephenr]

> bg-sky-500 hover:bg-sky-600 active:bg-sky-700 text-white px-4 py-2 rounded-lg

What fresh fucking hell is this? I can't say I've had the (mis)fortune of being forced to work with Tailwind (I've seen the name enough to know it's something vaguely "CSS framework"-adjacent though).

Seriously, though what kind of crack induced nightmare state was required for someone to think up such an abomination, implement it, and then make it public for the world to see?

Furthermore, who in their right mind saw that and said "yep this is fine"?

[pyeri]

Not a tailwind geek myself but I think how they justify is "better to have a little extra spaghetti in your html code than create a truck load of spaghetti in your app.css stylesheet."

The alternative to using tailwind here is to define the specific style elements for each one in the css stylesheets yourself with something like this:

.bg-sky-500 { background-color: blue; }

Tailwind proponents argue that they avoid this "stylesheet hell" by picking ready pre-defined tailwind classes like bg-sky-500, etc. Plus they also argue that this workflow will increase productivity by standardizing "style mindsets" of your dev team who all will think "blue" means "sky-500" (for example).

Maybe it has use cases in deep or professional design work but for most backend or full-stack devs, bootstrap is definitely better than meddling with this structure.

[d1sxeyes]

Once you learn how to read it, it's actually pretty clear.

This element has a small amount of x and y padding that is suitable for (for example) keeping text away from the edge of the container. The text is white. The corners of this are rounded.

The background is the default intensity 'sky' colour, which darkens slightly on hover and darkens further when it's active.

You can take this from 77 characters to 189 like this:

    .button {
      background-color: #0ea5e9;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
    }

    .button:hover {
      background-color: #0284c7;
    }

    .button:active {
      background-color: #0369a1;
    }

Tailwind simplifies consistency, and frankly is pretty readable. It's not like <button type="button" class="button">Button</button> is exactly the pinnacle of human clarity and simplicity in the first place.

Of course there are other ways to do it, but this faux outrage demonstrates not that this is some 'fresh fucking hell' or some 'crack induced nightmare', but rather that you simply don't get it.

[junaid_97]

Personally, I'm on team bootstrap. But, yes, it is subjective.

After working on several projects, I've come to realized that (atleast for me), ready-made UI kits/componenets are more important that the framework itself.

[mikert89]

AI just generates all this. The true take is that this argument all together is obsolete, you shouldnt even be writing tailwind by hand anymore

[chistev]

This gets argued every week. It doesn't matter as long as you like what you like.

[preisschild]

Thats what tailwind component libraries like daisyui are for

[speedgoose]

I like daisyui.

[twoquestions]

Same, it feels like Bootstrap but much, much more customizable. When I'm not using ShadCN that's what I reach for by default, it's been much nicer to work with, personally.