Tailwind vs CSS

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.