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

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: `Click me` - Bootstrap: `Click me`

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.

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

I like daisyui.

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 component, because the font size and line spacing must be visually(!) consistent with the , 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; } } } ```