Front End, CSS

Tailwind CSS x Bootstrap: Which one to Choose

November 01,2022

Tailwind CSS x Bootstrap: Which one to Choose

What is Tailwind CSS?

According to the official documentation, Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

The snippet below is an example of code written with Tailwind classes:

index.html
index.html
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

The result:

tailwind card example

With Tailwind, the design seen above was built without a single line of CSS. That’s because of the built-in utility classes, like text-center, text-lg, font-medium, etc.

Notice that even responsive design can be done with the utility classes, like md:text-left. In this case, the md prefix applies the text-left class to all screens above 768px.

How does it differ from Bootstrap?

Bootstrap is the most popular CSS framework for building responsive design projects on the web. If you work with Bootstrap, you might be thinking: why should I move away from Bootstrap and start using Tailwind?

Each of them has its pros and cons. Bootstrap has utility classes too, but Tailwind has way more. Tailwind’s main focus is on the utility classes, meaning it lets you build your own designs with ease. Bootstrap, on the other hand, is more robust in the UI Kits, meaning it gives you pre-built components, like cards, nav bars, dropdowns, etc.

Many of Bootstrap and Tailwind’s functionalities certainly overlap, so choosing which one is the right one for you will depend on a few questions:

Would you rather use ready-made UI kits that will be quicker to implement, or build your own UI that will look more unique? Would you prefer a more robust solution or one that will be lighter and quicker to load?

This hallme blog post has a good comparison table about both frameworks:

BootstrapTailwind CSS
Comes with responsive layouts, components, and utility classesComes with a lot more utility classes than Bootstrap
Less flexible than TailwindCore does not have components or layouts classes
Larger file size than Tailwind due to its required filesMore flexible than Bootstrap
Has been around much longer than Tailwind and is one of the most popular frameworksCan reduce the file size using PurgeCSS to remove unused classes
Websites built using Bootstrap are known for their responsiveness and flawless designA newer framework that is gaining popularity
Critics say that websites built using Bootstrap look similarCritics say that using Tailwind CSS makes your code difficult to read
Share
Ivan Lourenço Gomes

Ivan Lourenço Gomes

Top-Rated Online Instructor

Ivan is the founder of Daweb Schools and top Udemy instructor currently teaching 17 courses in 4 languages with 420.000+ students worldwide.

Related Blogs