Bootstrap vs Tailwind CSS - what are the differences and which one should you choose?
In this article I would like to compare the two most popular CSS framework on the market right now: Bootstrap and Tailwind CSS. I'll make a comparison in terms of popularity after which I will share some basic information and how to get started with each of them in the next few sections.
A few words about me: my name is Zoltán Szőgyényi and I am one of the creators of the Flowbite library, which is an open-source component library built on top the Tailwind CSS framework.
Comparing Bootstrap with Tailwind CSS on NPM
There have been dozens of discussions in the past few years about whether it's worth switching to Tailwind CSS from more well-established OOCSS frameworks, such as Bootstrap, though now I feel like most of the developers that I know of already made that switch a while ago.
And it's not just me saying this, but statistically, the weekly downloads on NPM are almost at perfect parity between the two framework giants. Bootstrap is still kicking 4.3 million downloads per week, whereas Tailwind CSS is quickly reducing the gap with 3.9 million downloads.
Here's a chart comparing the two in the past year:
What's mindblowing is that one year ago there was still a huge gap between the two frameworks of about 2.3 million downloads in Bootstrap's favor, whereas right now the difference is only 400k.
On the GitHub repository's star comparison, however, Bootstrap is still holding a distinctive advantage mostly based on the fact that it has been released over 10 years ago.
I suppose that whoever is reading the article has at least some basic knowledge of HTML and CSS and I'm going to give you a basic description of what each framework stands for and how they can help you build websites faster.
What is Bootstrap?
Bootstrap was and still is the most popular CSS framework in the web industry, originally released by Mark Otto and Jacob Thornton on August 19, 2011.
What is interesting is that the original name of this framework was Twitter Blueprint, which was mainly used as an internal tool for Twitter's developer team.
The framework includes hundreds of components that can quickly get you started building a website such as dropdowns, modals, navigation bars, cards, buttons, and much more.
The recommended way of working with it is to modify and compile the Sass files which enables you to use variables and mixins (functions) to generate the OOCSS classes for buttons, cards, and so on.
You'll also probably want to include the JavaScript file which enables the interactivity of these components using data attributes or their API via events and objects.
Getting started with Bootstrap
There are many ways that you can use Bootstrap in your project in terms of workflow, but the essence of it is that it's basically a CSS and JS file in the end.
The quickest way to include it in your project is via the CDN link, but you can check out the quickstart guide to learn about every way.
The current latest version is v5.2.2 and add the following CSS file inside the <head> tag of your page:
https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
Now proceed by adding this JS file before the end of the <body> tag:
https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js
Now that you have these files included you can start using all of the components listed in the documentation but also the helper and layout classes.
Bootstrap ecosystem and community
The awesome part of Bootstrap is that because it was one of the first and currently still the largest CSS framework on the market, it has a huge community of developers and designers using the project and there are lots of resources to choose from, such as themes and templates, plugins, integrations, and more.
Pros and cons
Here are some of the advantages of using Bootstrap:
- large collection of UI components including dropdowns, modals, navbars
- well established CSS framework, large community and resources
- fairly easy to customize using the Sass variables and mixins utility API that you can use and extend for utility classes
And here's a list of disadvantages:
- no purging of the unused classed being included by default
- hard to customize the stylesheet if not using Sass variables
- speed of development and customizing templates takes longer
Now that I've introduced you to Bootstrap it's time to talk about the newcomer, Tailwind CSS.
What is Tailwind CSS?
Tailwind CSS is a fairly new open-source CSS framework initially released on the 1st of November, 2017 by Adam Wathan and Steve Schoger, now part of the Tailwind Labs company.
It is the highest growing in popularity framework out there, as explained at the beginning of this article, and it has a completely different mindset compared to the classical OOCSS frameworks like Bootstrap or Bulma.
It's based on a utility-first methodology meaning there are no custom classes to style buttons or cards, but rather it gives you a set of predefined utility classes for padding, text colors, margins, font sizes, and more that can help you build these components.
The advantages are quite clear: it's very easy to style elements directly from your HTML and there's no more need to remember and build class name constructs that have to be relearned every time somebody joins your team.
At the same time, the JIT (Just-in-time) mode also automatically purges the classes that are not used in your HTML, meaning that the final CSS file only has the CSS classes that are also used in your templates, massively reducing the load time.
Getting started with Tailwind CSS
The recommended way of using Tailwind CSS is by installing the project via NPM and using their configuration file to automatically purge the unused CSS classes. but you can also include their CDN inside the tag:
<script src="https://cdn.tailwindcss.com"></script>
Then you can also configure the project by extending the default classes:
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
Now you can use all of the default utility classes that you can check out by browsing their official documentation or this cheat sheet.
Another cool thing is that you can easily customize the dark mode version of your website by using the dark:utility-class class variants.
Tailwind CSS components
Although Tailwind CSS does not offer a set of UI components by default other than their paid Tailwind UI package, you can use a component library such as Flowbite to get started with a collection of UI components such as drodpowns, modals, navbars, and more.
Tailwind CSS ecosystem and community
Although the community and ecosystem is still smaller compared to that of Bootstrap's, it's surprising how quickly it is growing and there is no week when you don't see a new theme, template, plugin, or component library being launched.
Pros and cons
Here's a list of advantages of using Tailwind CSS:
- largest collection of utility classes as a framework in the market
- classes are automatically purged using the JIT mode
- easy to extend the default set of classes using the configuration file
- dark mode variant classes are available by default not having to create class names and remember classes throughout projects
- quickly growing community and resources
And here's a list of disadvantages:
- no predefined set of interactive UI components (can be fixed by using Flowbite)
- long list of classes in your HTML code might make it unreadable
- lack of resources and plugins (ie. no datatable integration, charts)
Conclusion
I believe that at the end of the day it is up to you and your team to choose a suitable CSS framework for your project, and sometimes you don't even need one since vanilla CSS and JS can work out just fine in most cases.
Let me know in the comments section which one do you prefer using!