How Tailwind became the go-to CSS framework

I recently started to create small tutorials for developers. The goal was to show junior developers how a senior developer thinks when they code. For example, how a senior developer can understand documentation or a new framework they don’t know about and how they can find out when something is going wrong. The famous “code smells.”

I found sample projects on Frontend Mentors, and I coded them with various technologies. For example, the first project was an integration of a product card component. I decided to code the solution with plain CSS (in other words, no framework) but with Tailwind and Bootstrap.

Not only was it interesting for the audience, but it was also interesting for me. I wanted to see how Tailwind and Bootstrap evolved during the last few years. To be fair, I knew that the developer experience with Tailwind would be great, but I didn’t know that working with Bootstrap 5 would be such a pain. It was so terrible it prompted me to write this article.

In this article, you’ll find history (mostly about Bootstrap), thoughts (about my developer experience), and code snippets! Let’s start with the historical facts first!

Years ago, Bootstrap was everywhere. In 2016, you couldn’t open a website that didn’t run with Bootstrap. CSS Flexbox was already there, but CSS Grid wasn’t well known and well supported. I remember speaking to a developer about CSS Grid in mid-2016, and I told him about the power of Grid. His answer was shocking: he thought I was speaking about the HTML table element, and he didn’t know a thing about CSS Grid. At that time, everyone relied on Bootstrap 3, and people were still using jQuery.

Besides Bootstrap, there were other CSS frameworks. The second most famous one was Foundations. Besides email templating, I didn’t use a lot of Foundations. Maybe it was better or worse or different or the same as Bootstrap. The truth is, I don’t know.

They claimed (and according to their GitHub pages, they still are) to be “The most advanced responsive frontend framework in the world.” When looking at the official documentation and their GitHub repository, it seems to me that it’s dead. I don’t want to spend too much time on the history side, but I just want to add a couple of things before moving on.

First, Bootstrap was developed by Twitter engineers, and they did a great job. Twitter still runs with Bootstrap, as well as many websites. Most of the time, you can tell easily if a website is running with Bootstrap or not, even if you’re not a seasoned developer. From my perspective, it doesn’t always sound like good news! Because when using it, websites tend to look the same.

It can be a strength for some websites because users don’t need to relearn the patterns and how to navigate the website. For example, they know what a link or a submit button looks like. But, at some point, your website loses its identity, and it becomes a weakness to rely on it. The second strength is that the core team decided to remove jQuery with Bootstrap 5. I don’t know if it was a good or bad decision. Today, jQuery is less popular than other frontend frameworks and is less and less used by developers, so in a way, it makes sense.

However, removing it increased the amount of work the core team had to deal with, and they lost some compatibilities with older browsers. If you want to learn more about it, here is a great article to explore this subject.

The third part is a “thank you” note. With Bootstrap, especially Bootstrap 4, the core team did an outstanding work with web accessibility. They introduced many concepts related to the aria attributes, and they provided concrete examples and code samples people can use. From my point of view, Bootstrap 4 was great! Sadly, Bootstrap 5 isn’t.

Like many people, I discovered the term “Utility-first CSS” with Tailwind. Before that, I was trying to rely on BEM. I don’t know about you, but I have always been a kind of lost with BEM. I get the concepts of modifiers, but I sometimes struggle when I need to use either a block or an element. If you’re unfamiliar with BEM, I suggest you look at this resource. To sum up, BEM is a way to structure your CSS code.

On paper, structuring your CSS that way seems like a reasonable idea. However, it tends to pollute the readability of your HTML and violate responsibility. Here is a great resource about these concepts.

Let’s go back to Tailwind. Why did Tailwind make a great move when developing a “Utility-first” CSS framework? If you’ve already read the last resource I shared, you should already know the answer. Instead of relying on components, like Bootstrap, which applies many styles at once, you add classes that did only one thing. In other words, you write classes