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.