You've maybe heard of this new css framework called Tailwindcss that has been blowing up recently and probably wondered what it is and if it's better than good old vanilla CSS.

What is Tailwind

To compare CSS with Tailwind, I should quickly introduce you to it. Broken down to the core, Tailwind is a framework that allows developers to write CSS directly into the class of the element you are targeting instead of the indirect class targeting that is used traditionally in vanilla CSS.

This is a normal chunk of code in css:

h1 {
  text-decoration: underline;
  font-size: 20px;
  font-weight:bold;
  color:white;
  background-color: black;
}

This is that same code in Tailwind:

<h1 class="underline text-xl font-[bold] text-[white] bg-[black]"></h1>

Tailwind Pros

No confusion about the location of each class you are targeting in your CSS file as you are applying the styles directly to your element of choice.
Tailwind is more targeted allowing for better customization of each individual element in a give UI
No CSS file
Easier mobile optimization
mobile first

Tailwind Cons

Hard-to-learn abbreviations for CSS terms
Lack of very specific classes

Vanilla CSS Pros

Intuitive structure
More options for website design
great readability

Vanilla CSS Cons

Hard to optimize for mobile
longer than Tailwind

Conclusion

As you can see Tailwind is a great tool that does come with some drawbacks, but if you can overcome them, it will be an excellent framework to know as it is getting increasingly popular.

Tailwind vs CSS