Tailwind vs Bootstrap vs inline CSS

There is a lot of confusion about the differences between Tailwind CSS, Bootstrap and inline CSS. We explain the difference between Mixing Concerns and Separation of Concerns, why the three CSS 'ways' are worth looking at and why they are similar.

Utility-first CSS framework versus inline CSS

Let's start with Tailwind CSS. Tailwind is a utility-first CSS framework that consists of different classes that can be directly implimented in the HTML markup. You combine the different classes with each other to make a beautiful design.

Many frontend developers have doubts about the utility-first CSS-framework, even before they have worked with it. Some developers compare it to the times of font tags and align attributes - not really a time we want to go back to. In addition, the utility-first CSS framework is often compared to and seen as the same as inline CSS., but nothing is less true. With utility-first CSS you choose from different, existing classes while with inline CSS you have to assign a value to your HTML tag each time.

Time to show you an example! Below you see how inline CSS gives both p-tags a different font size, while utility-first CSS chooses for text-sm and text-xs. This ensures that with utility-first CSS you are not stuck with 100 different font sizes. Therefore you create more consistency in your website design.

What is the difference between Separation of Concerns and Mixing Concerns?

When learning about the relationship between HTML and CSS, people often only talk about Separation of Concerns. Separation of Concerns is said to be the only correct way of programming and only this would be semantically correct. With Separation of Concerns, programming is based on the idea that the styling and the mark-up language must be separated. However, this creates limitations. When you apply Mixing Concerns, the other way of thinking and applied in Bootstrap, you will see that a whole new world will open up for you. Difference between both? With Separation of Concerns, the CSS is dependent on the HTML and with Mixing Concerns it's the other way around. 

The code below shows an example of Separation of Concerns (In the section "Bootstrap" you will find an example about Mixing Concerns). To name the CSS classes we use the BEM notation.

    
.author-bio {
  background-color: white;
  border: 1px solid hsl(0,0%,85%);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
}
.author-bio__image {
  display: block;
  width: 100%;
  height: auto;
}
.author-bio__content {
  padding: 1rem;
}
.author-bio__name {
  font-size: 1.25rem;
  color: rgba(0,0,0,0.8);
}
.author-bio__body {
  font-size: 1rem;
  color: rgba(0,0,0,0.75);
  line-height: 1.5;
}

  

How does Bootstrap work?

Finally, we have Bootstrap which uses Mixing Concerns. There are a whole bunch of classes out there that will make your markup look like the particular style of the class you assign. Bootstrap is a CSS framework that can convert your design in minutes. One disadvantage of Bootstrap is that you cannot combine classes in the way you can with a utility-first CSS framework. You quickly run into problems with certain Bootstrap classes not matching your design. There is a possibility to override the default variables, but even then you might have to overwrite the Bootstrap CSS with your own CSS values. Good use-cases for Bootstrap are clean websites with little design involved. 

Below is a simple example of the use of Bootstrap's card component (Mixing Concerns).

    
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

  

Conclusion

What can we conclude from this? It's all in the way you look at CSS. Utility-first CSS frameworks are approached in a completely different way than inline CSS or Bootstrap. Depending on what your priority is and whether your project needs reusable CSS or re-stylable HTML. Do you go for the freedom of a utility-first CSS framework, such as Tailwind, or do you opt for pre-programmed classes in Bootstrap? The choice is up to you, but we are especially fans of utility-first CSS frameworks & Bootstrap!