Choosing between Tailwind and Bootstrap. Things to consider.

There is a lot of confusion and strong opinions about Tailwind and Bootstrap-like frameworks. I think front-end engineers often fail to understand the distinction between both and their purpose.

Tailwind is a low-level CSS framework. In theory, if you are a super expert you don't need Tailwind, you can just write all the CSS by hand. But most engineers aren't CSS experts. Nor it is worth your time trying to reach that level of expertise given how fast the CSS standard can evolve these days. Tailwind allows you to think in terms of CSS but instead of knowing all the complexities of cross-browser compatibility and such it lets you just apply a well-named utility. It lets you think in terms of margins, paddings, responsiveness, font-weight, col spans and such.

Bootstrap on the other hand is a high-level framework. It makes thinking in CSS completely irrelevant to you. Do you need a nice button? A nice looking button you shall have! You don't have to worry about padding, rounded corners, hover effects and such for this button.

With both frameworks, it is possible to walk in the other's direction. You can use Tailwind to create your Bootstrap-like framework and you can achieve every customization in Bootstrap that Tailwind less you achieve by looking under the hood.

It boils down to what makes sense for your product.

When should I choose Tailwind over Bootstrap?

Tailwind must be preferred when you want great control over the look and feel of your website. This is true for almost all major websites that have strong branding needs and a high level of customization. The second factor to consider is that Tailwind supports Treeshaking when used properly. It means your end CSS bundle is going to be small.

Note that to use Tailwind you need people who can think in CSS. You can't expect good UI if you don't have these kind of engineers.

When should I choose Bootstrap over Tailwind?

In nearly all cases where you just want a good-looking website to be built quickly and have no need for extreme customizations, I recommend Bootstrap or similar frameworks. Bootstrap will result in a performance penalty. But it can be optimized.

Most of the websites in my opinion are in this category.

Note

While for a specific project, you may choose one over another, it is unlikely that either of these frameworks would be a "winner takes all" kind of framework. For example, there is a competition between Angular and React to be "winner takes all" as they pretty much solve the same problem differently. However, when it comes to Tailwind and Bootstrap, both are likely to exist and be popular as they solve different problems differently.

You can always read more about why Tailwind is better than Bootstrap here.

Did you find this article valuable?

Support Random Draw Engineering Blog by becoming a sponsor. Any amount is appreciated!