Written ByViral Prajapati

Development

Published:Thu Feb 23 2023

15 mints read

Summary

We’re experiencing a renaissance of amazing web platforms and responsive designs. Responsive user interfaces have mostly been implemented with libraries like Bootstrap, Foundation, Bulma, or good old-fashioned media queries.

We have used these UI kits with ease to implement directives to achieve the exact UI and proper responsiveness we require with less code. But the big question is, have we really been doing it right?

What if there was a way to achieve responsive UI without being bound by the rules of any UI kit? Is there a way to achieve responsiveness and still keep our custom user interface designs? Well, let’s find out.

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.

Table of contents

1. Bootstrap

2. Tailwind CSS

3. Community

4. Is this really the future?

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 October 22, 2019. 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 layout 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.

What does “utility-first” even mean?

A utility-first library simply means that unlike Bootstrap, Tailwind doesn’t give us automatically prestyled components. Rather, it gives us utility classes that help us style our component in certain ways and allows us to build our own classes using these utility classes. Let’s explain this further using two simple examples.

Example : Simple button demo

From above the example, we can see how easy is it to implement button component with Tailwind CSS

The 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 sets 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.

Is there a performance advantage to using Tailwind CSS?

The default Tailwind configuration comes with 36.4kb minified and g-zipped. Compare this to Bootstrap at 22.1kb — Tailwind is 14.3kb heavier. You might be thinking, Is this really the way to go in terms of performance?

The reason for this is simple: Tailwind comes prepacked with a lot of options and styles for users to choose from, and it packs all these variations to reduce the tendency to write your own CSS. Fortunately, Tailwind comes with a few strategies you can use to keep your generated CSS small and performant.

Limit your color palette

Due to the fact that all the built-in utility modules in Tailwind use the plugin system under the hood, it is possible to delete a ton of code and make the plugin system the way new classes are registered inside Tailwind.

This makes it possible to have only code we actually need in projects while ignoring everything else — unlike Bootstrap, in which there is a lot of overhead code. This upgrade feature shortens the build time from 158s to 8s.

We can get the exact amount of color variations we need in a project, like so:

// ...module.exports = {
  // ...  textColors: {
    'black': colors['black'],
    'grey-darker': colors['grey-darker'],
    'grey-dark': colors['grey-dark'],
    'red-dark': colors['red-dark'],
    'red': colors['red'],
    'blue-dark': colors['blue-dark'],
    'blue': colors['blue'],
    // ...
  }
}

Remove unused CSS with PurgeCSS

Tailwind also removes unused CSS with PurgeCSS, a tool for removing unused CSS from your project. It does this by simply comparing the CSS class names available in your template against the class names used and then removing the unused CSS.

Community

Bootstrap has now 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 Stackoverflow threads answering 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.

Is this really the future?

Working with Tailwind CSS is using a set of utility classes that lets you work with exactly what you need. In my opinion, this is a neat way to create user interfaces that are more flexible to developers’ creativity.

Another advantage I really appreciate — and I am sure every front-end developer would also appreciate — is never having to worry about changes to one element affecting another related element. No more tabbing back and forth between HTML and style sheets in your editor, no more going back to check and see what you named that other element. In my opinion, this is the future.

Check out the official documentation and get started with this awesomeness. Happy coding!