Tailwind Advantages and Disadvantages
Team Urgence
Tailwind CSS
Advantages
1. Meaningful variables
With Tailwind CSS, you just need to apply text-sm, text-lg, or text-xl to your HTML elements. It respectively says you want a small, large or extra-large font size. You're stopping writing any non-sense number like 15px or 18px.
2. Predefined classes
Another beauty related to these predefined classes from Tailwind CSS is that you're stopping fine-tuning your design. Because Tailwind CSS has already defined all CSS classes, you aren't able to specify any random number for your margin, padding, font-size, etc.
3. Out-of-the-box Tailwind CSS features
Two other Tailwind built-in features are:
- making reusable Tailwind components (without installing React in your project).
- PurgeCSS is extremely easy to set up. So you can remove unused CSS classes and make your style file small.
Disadvantages
1. Components aren't provided by default
Tailwind CSS doesn't provide by default styled components like in Boostrap or Bulma. You need to implement it from scratch. You'll possibly lose a lot of dev/design time. For example, Tailwind CSS doesn't provide button, navigation bar, header, etc.
2. A small learning curve
You'll face a small learning curve with Tailwind CSS. Even if you're familiar with CSS, you need to learn the predefined classes provided by Tailwind. To apply a margin, you need to specify m-, p- for padding, leading- for line-height, etc. So, it isn't intuitive but, with practice, you'll overcome this easily.
3. Mix HTML and style
When you've started web development, you've taught it's a good practice to split your HTML and CSS into two files. Basically, the HTML file focus on the structure and the CSS focus on the styling part.
In Tailwind, you don't need to write CSS rules and you apply directly CSS classes to your HTML file. So, you're mixing page structure and style in your HTML file. It's like doing old school web development.
Conclusion
When I started using the tailwind css , its hard because every time I style an element I have to check it to tailwind documentation. I used to style specifics width , height and positions but in tailwind they have that classes with heights, width and positions in px and rem.
I am now exploring the tailwind and I think I starting to like this because it save you time , example in normal css you style an element with many code but not in tailwind and the tailwind is clean. I am using tailwind in different file.
