Tailwind CSS

Bootstrap and other frameworks like Materialize CSS have a component-oriented approach. They offer classes that allow you to define complex graphical interface components. For its part, Tailwind has an approach oriented towards utility classes.

In Bootstrap we can define a card like this:

Card title

We are defining the differences between CSS frameworks

< a class="btn btn-primary" href="#">Enter

As you can see, to define the card Bootstrap uses component-oriented classes, like “card”, “card-tile”, etc. To define a button use “btn” and “btn-primary”.

In Tailwind CSS we could have defined this same example with an HTML like this:

The Alentejo megaliths

Approach the most impressive megalithism of the Iberian Peninsula in Alentejo

Primary

In this case the differences are palpable. We do not have a “card” component, but we have generated a card based on incorporating various classes. Instead of “card” we have something like “mb-5 bg-teal-100 border border-gray-200 rounded shadow-md”.

Under a superficial impression we might think that it is less interesting, that we need to work more and that we have made the HTML more dirty. This is partly true, but utility classes offer us several advantages, which we have already discussed. But also, in comparison with component-oriented frameworks such as Bootstrap, the advantages of Tailwind CSS are the following:

• The card component is fully customizable. Simply by applying some kind of different utility we can change the rounded border, to make it more or less subtle, the shading of the card, to enhance it more or less, the thickness of its border or any other matter.
• We don’t need to fight the framework to get writing styles that override the card, which is often a tedious task.
• CSS code does not grow out of control. That is, Bootstrap forces you to continue writing your own CSS for customization, while Tailwind doesn’t require you to write any more CSS, because any styling is already given to you by the utility classes.

Despite what we have seen in the previous code, it should be said that Tailwind is also a friend of compositeization. If you wish, you can switch to what you have in Bootstrap, creating your own classes that group several utility classes, thanks to its @apply directive, so that you can reuse styles on demand.

Ultimately Tailwind is used on top of robust frontend tools like PostCSS, so the focus is that you can wrap your development workflow with Tailwind CSS around various optimization tools. Thus, the code you take to production with Tailwind CSS is always pared down and bounded to the parts of the framework you’re actually using.

Finally, Tailwind is a framework for those who know CSS, since to use it you need to know CSS and understand how systems like Flexbox or Grid Layout work. In Bootstrap you need to learn the framework for example to know how to use its grid system to create a layout, while in Tailwind CSS you use the CSS itself through the utility classes to do the same. Not only is it that it doesn’t force you to learn something new, but it allows you greater adaptability to any project need.