Battle of CSS Frameworks: Bootstrap vs Tailwind 🏆

The only CSS framework guide you will ever need.

Vishesh Dhawan
Vishesh Dhawan
July 19, 2021
bootstrap vs tailwind css

    Share

Bootstrap

If you are into Web Development, you might have already heard its name. Bootstrap is one of the earliest players in this field. It was created by Twitter in 2011 as an open-source project. Since then it has constantly gained popularity so far.

Bootstrap is considered the most popular CSS framework. It provides developers with a set of opinionated components which are also mobile-friendly. When it comes to faster development, Bootstrap is a developer's first choice because of its prebuilt components. Using these prebuilt responsive components, developers have to worry less about the bugs in their frontend code and focus more on the logical part instead.

A look into Bootstrap’s component system

Colours

bootstrap colors.png

Forms

bootstrap form

Input Groups

bootstrap input group

Navbars

bootstrap navbars

These were some of the many components we get prebuilt out of the box. However, if you are worried about whether these components will suit your project’s design needs or not, we still have a piece of good news for you. Bootstrap now uses SASS for its codebase. It means if you use Sass you can import the bootstrap-sass to your sass file like this:

@import "../node_modules/bootstrap/scss/bootstrap";

and customize the bootstrap variables according to your design needs. You can override default colours, create your own colour palette, add new spacers, and a lot more.

Cons of Bootstrap

Bootstrap is a promising framework when talking about rapid development, but it has its drawbacks too.

  • Bootstrap bundles many CSS components which you don’t use in your project. This results in increased bundle sites and makes websites slower to load.
  • There can be a requirement for lots of styles overriding to make it suitable for your project's design theme. This will lead to a lot of time spent on customization but save time in the longer run, especially if you have many repeating components.
  • Styles are verbose and lead to a lot of unrequired output HTML.
  • Bootstrap has a learning curve. You’ll have to invest time learning and practising to use Bootstrap.
  • Bootstrap websites look similar if proper customisation is not done.

Tailwind CSS

Tailwind CSS is a new name in the market. It brings along massive changes in how we used to deal with CSS on our daily projects.

Tailwind is a utility first CSS framework. It is packed up with many utility classes that do a little work, e.g. adding padding, margins, managing font sizes, colours, etc. It is a much lower-level framework than Bootstrap or Materialize.

It contains no components of its own rather it leaves this to you to create components according to your customary design needs.

Listening to “a CSS framework with no components” can be a huge turn-off for many people in the first place. However, this approach is pretty awesome. With frontend frameworks like React, Vue, and Angular we can create repeatable components and style them with Tailwind CSS according to our design requirements. That means you can create custom components like Bootstrap while keeping them highly customized. Therefore websites built using Tailwind CSS don't look similar. Tailwind CSS is also much smaller in production than Bootstrap.

Now anyone may question that the approach of writing utility classes for everything can make the code very verbose and unclean. Lots of repeated classes and markup in a single file can reduce the readability of the code. Well, there is a fix for that. You can use a @apply to group many classes and create a single class that does the equivalent work.

Cons of Tailwind CSS

  • It requires good knowledge of CSS. Tailwind CSS can have a steeper learning curve if you are not familiar with CSS already.
  • Markup can become verbose.
  • Development time is higher when compared to other component libraries.

Conclusion

Which framework should you use for your next project? Well, it depends on your personal preference. If you are already a CSS pro, then Tailwind will not be a problem for you. Also if your design is very different from the styles that Bootstrap provides and you can afford to spend more time on development for a quality product, Tailwind CSS is the way to go.