Tailwind CSS vs Bootstrap: Why Tailwind Is Better For Teams

Photo by Fabian Grohs on Unsplash

I used bootstrap YEARS ago. Then I mostly stopped doing frontend with it and switched to material design for my personal apps.

Until I discovered Tailwind CSS.

Tailwind makes it SO EASY to create beautiful custom designs for web projects. I fell in love with its simplicity.

Recently I needed to pick Bootstrap (v4.5) up again for a client’s project.

Here’s what I like about Bootstrap, and why I’d pick Tailwind CSS again every time.

What I like about Bootstrap

Bootstrap has a lot of pre-styled components. This makes it simple to use when you need something their framework offers. It’s easy to get started and quickly implement a good-looking website.

The components Bootstrap offers look clean and the look-and-feel is customizable through SCSS variables.

Finally, bootstrap is old in web development terms (2011). Many frontend devs already know it.

What Bootstrap is lacking

Bootstrap sucks for custom designs. Making something with pre-styled components is easy. But creating custom designs or custom components is a lot harder. Especially with Bootstrap’s half-baked utility classes you will end up with a weird mix of Bootstrap components, Bootstrap utility classes, and custom CSS classes.

You will need to write custom CSS/SCSS. So you must create rules in your team around this. When should you write custom components, and where should they go? Is this a utility class that goes to top level? Or should this sit right next to the component that uses it?

If you want to customize Bootstrap (which you should, otherwise most of the web will look the same), you need to look up Bootstrap’s SCSS variables. Which means you need to learn SCSS and consistently go through their code to find the variables you are looking for (most SCSS variables are not in their docs).

Why I think Tailwind’s upsides outweigh the downsides of a utility-first framework

With Tailwind CSS, starting AND customizing is a breeze. You run npx tailwindcss init and plug the variables you want to write into the tailwind.config.js. Tailwind’s documentation is gorgeous and extensive.

Working in teams becomes easier with Tailwind CSS. You focus on writing and styling components yourself, and new team members only have to learn Tailwind CSS, not SCSS or how you structure your custom CSS.

Sure, your HTML will have many different CSS classes. But anyone familiar with Tailwind will know exactly what each of these classes does.

Finally, I feel like Tailwind is more appropriate in the age of styled components. Bootstrap imposes a certain structure on both your HTML, and your CSS. Tailwind just fits fine with however you structure your Vue/React/Svelte/HTML components.

So should you dump Bootstrap and switch to Tailwind?

Probably not.

But give Tailwind CSS a try.

You might find out you like it.

But only use it for production projects if your team is on the same page and you don’t have any significant drawbacks to using it.

Read on for 5 Rules for Using Shiny New Technologies.