Tailwind CSS vs Bootstrap - Learn about the differences
Tailwind CSS has recently benefited from an upwards trend of popularity and there is an increasing amount of front-end developers who choose to stick with the new CSS Framework as a new alternative. In this article I want to explore the differences between Tailwind and Bootstrap and give you as much insight as possible on this topic.
Bootstrap
The initial release of Bootstrap happened on August 19, 2011, nearly 9 years ago. Fun fact is that it was created during a hackathon by the Twitter development team and later it was developed and maintained by Mark Otto, Jacob Thornton and a small group of core developers.
Shortly it became one of the most popular CSS Frameworks out there and it currently is the sixth-most-starred project on GitHub and it is currently being used by millions of developers worldwide.
Tailwind CSS
According to the project’s Github contributor list the project was originally developed by Adam Wathan and the first release dates back to the 1st of November, 2017. It is described as a utility-first CSS framework and they claim that development is faster with this new method.
Having introduced some basic facts about the two frameworks I would like to lay out the comparison benchmarks that we will delve into in this article. We will talk about the development process, the number of components, performance and community.
Developing with Bootstrap
Bootstrap is based on the Object Oriented CSS methodology which has become one of the most popular ways of managing stylesheets and classes. Before OOCSS we used to create separate classes and styles for any component that looked different. For example, if you had 10 buttons in your application you would have 10 different classes for those buttons.
With Object Oriented CSS you would instead have a lot more classes for the sizing and style of the button. This would ensure a more modular and DRY stylesheet and you wouldn’t have to create a new class for a button which you would need to be smaller only.
Apart from this Bootstrap is also using the most popular CSS preprocessors, namely Sass. If you don’t know what Sass is, basically it enables you to use functions and variables in stylesheets. If your primary color is red, in a regular CSS file that same color would be repeated across all declarations. With Sass, such properties can become variables so if you want to change the color red, you can simply just change it in one place and it will propagate in the whole application.
At Themesberg we create our themes using Sass and we try to make our stylesheets to use variables and mixins (functions) as much as possible so that the developers purchasing our products can have an easier time adapting colors & fonts to their liking.
Developing with Tailwind CSS
Tailwind CSS is a utility-first CSS framework. What this means is that instead of writing a lot of CSS you will be writing a lot of classes for the HTML elements. In Tailwind CSS you have classes for almost all kinds of margins, padding, backgrounds, font sizes, font families, text colors, shadows and so on.
Let’s take a look how the markup of a primary button differs from Bootstrap and Tailwind CSS:
Bootstrap Primary Button
<button type="button" class="btn btn-primary">Primary</button>
Tailwind CSS Button
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
As you can see the markup is quite a bit more simple in the case of Bootstrap, so you might be asking why wouldn’t you use Bootstrap as it is more simple? Let me give you a scenario: what if you wanted to make the button just slightly smaller in a particular page? Would you want to create a whole new sizing class just for that unique case? In this scenario, using Tailwinds many padding classes would be easier and you wouldn’t even have to touch the css file.
Another great feature that I observe is the fact that you can also set hover, active and focus states using classes. This is a feature that Bootstrap never had and personally I felt like it would’ve been useful many times.
May I add that Tailwind also offers the possibility to create classes such as .btn-blue for components that are repeated many more times in your html files using component classes. Here’s an example:
<!-- Extracting component classes: -->
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
</style>
Instead of Sass, Tailwind CSS uses post-css and a config file to set up the variables and configuration of your stylesheets. You can add, remove or update colors, spacings, fonts, shadows anything that you can think of.
Base set of components
In this case I must say that Bootstrap has a clear advantage because of its wide set of components including cards, modals, accordions, nav tabs and so on. Tailwind CSS has only a handful of components according to their documentation, the full list being:
- Alerts
- Buttons
- Cards
- Forms
- Flexbox grids
- Navigation
This compared to Bootstrap’s 21 set of components. However, Tailwind CSS does have a lot more utility classes than Bootstrap does and using them you can create any type of component you want.
A solution to this can be a components library for Tailwind that we've recently developed which includes all of the commonly used web components, such as buttons, dropdowns, modals, navigation bars, and more. Even advanced interactive components such as datepickers are included.
Performance
Bootstrap has 4 files that are required to include into your project to get the full benefit of the CSS Framework. Together they amount up to 308.25kb including jQuery, Popper.js, Bootstrap JS and the main Bootstrap CSS file.
In comparison, Tailwind CSS only requires the base stylesheet file which amounts up to 27kb. It is true that Bootstrap has a much larger set of components and functionality, however if you don’t need certain components such as modals or accordions perhaps Tailwind is a better choice for more lightweight projects.
Community
Bootstrap has been around for more than 9 years and being the most popular CSS Framework it has a large community of developers, forums, tools and so on. You can find countless of Stackoverflow threads answering to just about any question you might have about certain situations.
In the case of Tailwind CSS there is still much room to grow in terms of its community, however it is growing day by day and the number of tools and websites related to it are also increasing.
Flowbite - Tailwind CSS components
As I've mentioned that one of the only disadvantages for Tailwind CSS is that it does not have some component examples that you can work with, you can use the Tailwind CSS components from Flowbite to expand your web development toolkit.
It includes a large variety of UI components including buttons, navbars, dropdowns, modals and more including support for dark mode. Learn how to get started with Flowbite and install it as a plugin for a new or existing Tailwind CSS project.
Conclusion
In conclusion I believe that deciding whether to choose Tailwind CSS or Bootstrap should be more based on your personal preference regarding writing styles and classes. There is no clear performance or quality advantage that any of the frameworks might have, except the fact that Bootstrap does still come with a much larger set of components.
At the end of the day I recommend you try out Tailwind CSS and see if the utility-first way of building user interfaces for the web is a preferred way for you to work.
What are your preferences and which CSS Framework do you regularly use for your projects? Leave your thoughts in the comment section.