Should I use Bootstrap or Tailwind?
The choice between flexibility, and actually shipping the site
For some people working on the front-end spec of the Internet, Tailwind CSS has become something like an alternative to look when dealing with the never-ending fight of CSS frameworks. We’re not short of choices, from dead simple like Skeleton CSS, to complete visual language systems like Material UI.
No matter what CSS framework you can think of, no one has become so successful like Bootstrap. It started as a branch of Twitter internal design tools almost a decade ago, but it was so good dealing with mobile viewports and offering an understandable grid system that it become widely adopted across multiple sites.
Some folks decided to take on the fight with their own way of visual style and convenience during its ascension: Foundation, HTML Kickstart, Ink, PureCSS, and YUI, from what I can remember now.
The latest CSS framework gaining traction is Tailwind. Most of its good reputation is probably thanks to offering something different and more low level than Bootstrap, which was frozen in v3.0 for 5 years, and in v4.0 for more than 3 years —being stable but stagnated surely didn’t help — and without equiparable competitor in sight. Until this day, building on top of Bootstrap is not easy and still requires a lot of time and care, so it’s no wonder that there is an official marketplace for themes considering that time and care can translate into money.
In the age of CSS transpilers and Javascript bundlers like Webpack, Parsel, Gulp, Grunt, Rollup, ESBuild and whatever, Bootstrap seemed like an aging car compared to what could be possible without it.
Tailwind can power your next Bootstrap
The thing I got wrong was how Tailwind was compared to Bootstrap. I honestly though it was just another CSS Framework, but with a lot of more classes. I missed the point completely.
Bootstrap feels like a thing “on top” of a Tailwind-esque framework. For the lack of better analogy, Tailwind is to a songwriter like Bootstrap is to a K-pop band. It doesn’t offers you a “card”, but the building blocks to create one from scratch.
In Bootstrap you use few descriptive classes that transform completely a given part of your code into cards, toast notifications, headers, form inputs, and whatnot. A simple class in Bootstrap encapsulates a lot of CSS properties and behavior. Prototyping something with Bootstrap is really easy and can make a site usable and “decently pretty” in a few hours.
Doing the same on Tailwind CSS will take you triple the time.
Trying to paint a car with a wrench
The problem of Bootstrap, at least for some designers, is that it offered “too much” to an extent of becoming inflexible in terms of style and disposition.
Since classes offered by Bootstrap have a lot of CSS shared properties on them, changing the style or disposition is (still) a nightmare.
Tailwind is to a songwriter like Bootstrap is to a K-pop band.
If you really wanted to change the style or “look and feel” of Bootstrap, you were looking into transpiling with a bundler, or directly creating pure CSS to override the style. Not everyone is happy to jump into the Sass transpiler, even if nowadays is like a necessity more than a gimmick.
Creating a custom “component” with Bootstrap is a big no. There is where Tailwind comes in.
It allows you to use something like a “toolbox” of CSS properties in much simpler and consistent classes. You won’t find components like a Bootstrap’s card from Tailwind out of the box, but you can create your own card without leaving your HTML. That’s what Tailwind states as being an “utility-first framework” instead of a “component-first framework”.
For example, let’s say you need to “flip” a block, there is no utility in the recently launched Bootstrap 5. You’re bound to start writing CSS by yourself, and prefixing the styles for every browser vendor. On the other hand, Tailwind offers CSS classes to do that, and even enable GPU acceleration.
You can think of Tailwind like a low-level framework for applying CSS. It won’t transform a form input magically like you can do on Bootstrap, but instead, allow you to use a multitude of classes to change the details of the looks of the input, like the placeholder color, or rotate a box in the background.
Now, you may think that writing an endless list of classes instead of a convenient card is overkill, specially when your site has a lot of “components” like graphs, images, code blocks, quotes, galleries, interaction, and similar. That’s were component extraction is for: transforming that endless list of classes into one you can easily name as you want.
From there, you’re few steps away to create your own Bootstrap-like framework.
That’s probably why Tailwind has taken a lot of attention in the CSS scene but not enough to rival the Bootstrap level of convenience: it’s a tool that offers more flexibility in exchange of time, and that it makes a lot of sense to build around components, or across a team designing different parts of an application without code conflicts.
So, what should I choose?
The short answer: Bootstrap for the convenience, Tailwind for the flexibility.
The long answer? Those who claim you should dispose of Bootstrap 5 and any other CSS framework from your site are totally missing the point, or are just fanboys: Bootstrap is a great tool, and probably one of the best out there to create something that is usable and visually appealing in short time.
- You can prototype a simple site or a whole application in hoursor few days.
- You don’t need to meddle with Javascript shenanigans for modals, toast notifications, or button menus; these are included.
- Graphically, it’s very consistent, modern, and difficult to screw up.
- Without editing the Sass files to compile your own Bootstrap CSS, it’s a pain in the ass to style deeply.
- You’re a
<link>tag away to use it.
Again, Bootstrap offers a lot of convenience in exchange of flexibility. On the other hand, Tailwind offers something that we can think as quite the contrary:
- You can create your own custom components and style, from the ground up, but it will take you more time.
- You have to implement the lack of dynamic behavior with Javascript by yourself — not difficult, but will take time.
- The purpose of Tailwind is to be used through a Javascript bundler and allow you to create your own “CSS Framework” with your own components, giving you a CSS framework highly maintainable and weighting just a few KB.
- You have more freedom to create your own design for your site, but also, you’re in charge of it top to bottom.
It’s no wonder that some sites that start with Bootstrap or other similar CSS frameworks slowly replace it with Tailwind. Creating components with Bootstrap is not an elegant task, maintaining them either, and this translates into more time needed to push new features, something that can be iterated better with Tailwind.
Again, it’s no sin to use even vanilla Bootstrap on a site, or buy a theme if it translates in less days spent implementing it into your site. Solo designers won’t find creative value in Bootstrap, but those seeking a “make this site usable” package may will.
From where I come from, functionality is key no matter how good the site looks, and the average visitor doesn’t give a crap if a site is done using Tailwind, Bootstrap, or even a custom CSS stylesheet made entirely by hand, even if that’s overkill on these modern days of CSS transpilers and bundlers.
A site may be a potential Webby Award nominee in visual design, and surely will look good on someone resume, but first good impressions can’t last enough if the site barely works for the end user, or never launched at all because you’re still doing Tailwind CSS components.
