Tailwind CSS vs. Boostrap: which one is better, which one should I use?
Bootstrap and Tailwind are two of the world's most popular CSS frameworks. When choosing a framework, it's really important to consider your own needs. So, which one to choose? This is what we're going to talk about in this post.
Tailwind CSS
Tailwind CSS was created by Adam Wathan, and first released on November 1, 2017. It's a "utility-first low-level" framework, which means that instead of "few classes, many CSS", you are going to write "many classes, few CSS".
<!-- Traditional CSS -->
<span class="highlighted">
I'm a highlighted text.
</span>
<style>
.highlighted {
color: red;
font-weight: bold;
text-transform: uppercase;
}
</style>
<!-- Tailwind CSS -->
<span class="text-red-600 uppercase font-bold">
I'm a highlighted text.
</span>
<style>
/* No CSS needed. */
</style>
Why is Tailwind CSS good?
- You don't have to think of names for CSS classes (e.g.:
sidebar-inner-wrapper) - You don't have to write CSS, because Tailwind's classes do everything you need
- Every styling is local, so you can safely modify it without the fear of breaking something else
What is the difference between Tailwind CSS and inline CSS?
- With inline CSS, you have to specify every numeric value, while in Tailwind, it's prepared for you to use
- Inline CSS doesn't support media queries needed for responsive design, but Tailwind does
- Inline CSS doesn't support "hover", "focus" and other element states, but Tailwind does
Bootstrap
Bootstrap was created by Twitter for their own internal use in 2010, but it was released as an open source framework in 2011. Its main purpose is offering an easy way to achieve responsive, mobile-friendly design, which is achieved by using a 12 column grid system.
<!-- In mobile view, there will be 4 rows, each element being 100% width. -->
<!-- In tablet view, there will be 2 rows, each element being 50% width. -->
<!-- In PC view, there will be 1 row, each element being 25% width. -->
<div class="row">
<div class="col-12 col-md-6 col-xl-3">Product 1</div>
<div class="col-12 col-md-6 col-xl-3">Product 2</div>
<div class="col-12 col-md-6 col-xl-3">Product 3</div>
<div class="col-12 col-md-6 col-xl-3">Product 4</div>
</div>
<!-- This is only visible in PC view. -->
<div class="d-none d-xl-block">
I am only visible on PC.
</div>
Why is Bootstrap good?
- It makes development very fast, because of the predefined components it offers
- It offers a lot of tools for developing a responsive, mobile-friendly frontend
Performance
Tailwind offers a lot of opportunities for you to shrink the size of the package. First of all, you can remove the classes you don't use (with the help of PurgeCSS). This way, only those classes will be included in the package that you need. Also, if you only need to support 1 screen size, you can remove all the other screen sizes from the package, resulting in a 75% smaller size.
There is no such thing for Bootstrap.
Which one should I use?
It depends on your needs.
Bootstrap is a component-based framework, where you can use predefined elements to quickly develop an interactive, responsive and mobile-friendly frontend. This vastly speeds up the speed of development, but forces you to write a lot of custom styling. Also, it uses a very generic template, so Bootstrap based websites will most often look alike.
Tailwind is a "utility-first" framework, which helps you to create your own components. This results in a more flexible, customizable design. Every styling is separated, so nothing affects each other.