With the rising popularity of Tailwind CSS, many of us might jump directly on Tailwind just to catch up with the hype. It won't take them much of their time to realize that it is not like any other traditional CSS framework. They might not even get a full picture of Tailwind and end up hating it thinking it's harder than plain CSS.
Here is my attempt to cover everything that you need to know to use Tailwind CSS in your next project.
This blog focuses on CSS concepts that are essential to know for using Tailwind CSS. It is not a tutorial to get started with it. Official documentation has covered that part pretty well.
Utility First Frameworks
The main reason why Tailwind is different from other frameworks is that it is a utility based framework, whereas frameworks like Bootstrap or Bulma are component based frameworks. Now, what's the difference?
Component based frameworks provide a set of components that are used by adding predefined classes to HTML elements. For example, Bootstrap has a total of 24 components that we can use by simply adding related classes.
Tailwind CSS on the other hand is a utility framework. It doesn't limit your design by predefined opinionated components but provides powerful building blocks that are useful to create a unique design for your projects.
Tailwind achieves this by having a class for every CSS property. Additionally, we can add our valid CSS properties to make a new tailwind class as per our needs. This gives total freedom and flexibility while designing the front end.
But this comes with a cost. Component based libraries don't require you to know much about plain CSS. You refer to the documentation and use the code that you need. Tailwind being a low level utility based framework doesn't work in that way. You need to have a profound understanding of CSS to use Tailwind in the best way.
Intermediate CSS
There is only one word that describes CSS - overwhelming. Though Tailwind gives you flexibility and saves time requires to type everything explicitly, your knowledge of plain CSS is considered as the main pre-requisites.
Sizing Units
Especially, rem. All utility classes use rem for styling. Tailwind has classes from smallest rem unit 0.125rem (2px) to all the way up to 24rem. Additionally, you can add units as per your choice in tailwind.config file (which can be px, em or anything else too).
Responsive Design
Tailwind is mobile first approach to styling. So whatever you write is suited for the smallest screen size defined while configuring tailwind. By default, the smallest utility class is sm that sets media query of a minimum width of 640px. You are supposed to mention the breakpoint if you are adding classes for bigger sizes than that.
That's why, knowing about responsive design, sizing units and media queries are a must to create anything eye-pleasing with Tailwind.
Flexbox & Grid
Creating layouts using grid and flexbox classes is easy as compared to traditional ways of using them. However, you might find it confusing because many classes conflict with each other resulting in a single class that is used with both layouts.
I was talking about justify-{value}, align-{value}, place-{value} and gap. These classes serve the same purpose for flexbox as well as grid. Having a clear understanding of them would help you to save hours of confusion.
Other Important Concepts
Of course, this is not it; CSS is more than that, and so is Tailwind. Units, responsive design and Flexbox/Grid need a special mention because once you understand how these things work, it won't be difficult for you to use Tailwind with its max out capacity.
Other than that, here are a few more things that are good to know:
- CSS Transition and Transform Property
- Aspect Ratios
- Preflight: Tailwind has a set of base styling practices built on top of modern-normalize.
I am not mentioning padding, margin, box sizing, float and z-index because I believe that if you don't know how to work with them, you should think about sticking to plain CSS for some more time.
When to Use Tailwind?
- If you have intermediary experience with plain CSS and know how CSS is supposed to work, you can use Tailwind pretty much anywhere you want.
- If your front end stack has a component based library such as react, using tailwind will allow you to use it with its maximum reusability and scalability of Tailwind.
When NOT to use Tailwind?
- Do not even consider using Tailwind if you don't have intermediate experience with CSS. You might not face issues in the very beginning but as your project gets bigger, it'd get messier and confusing.
- If you are building websites with Vanilla JS, you might not use Tailwind at its full potential. Using same class names for every different component would make the code redundant, non-readable and messy.
- If you are building prototypes and time/deadline is a major factor, using tailwind will slow you down. Tailwind is best suitable for big projects which give you enough time to focus on design as well as logic.
- Similarly, using Tailwind with projects where backend logic or backend services is more important than design must be avoided. Because you'd end up spending more time on design when your focus should be on logic.
TL;DR
Tailwind CSS is a utility based framework so you have to combine multiple utilities and create a component by yourself. That's why knowing about plain CSS is a must. You should have a clear understanding of sizing units, responsive design and media queries. Knowing about conflicting flexbox and grid properties would also save your confusion when you start building projects.
Don't jump to Tailwind if you are not comfortable with plain CSS.
Conclusion
Using Tailwind when you struggle with fundamentals will only lead to frustrations. But once your fundamentals are clear, no one can stop you from harnessing the full potential of Tailwind CSS!
I have scheduled more blogs about starting Tailwind CSS so if you're interested, do subscribe to the newsletter and follow my blog. Also, if you think there's anything that can be improved or added, I am happy to hear your opinion. I am most active on Twitter and LinkedIn.
Happy Designing! 🎨