A Complete Introduction to TailwindCSS

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.

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 in its maximum capacity.

Other than that, here are a few more things that are good to know:

• CSS Transition and Transform Property
• : Tailwind has a set of base styling practices built on top of .

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?

1. 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.
2. 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?

1. 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.
2. If you are building websites with Vanilla JS, you might not use Tailwind at its full potential. Using the same class names for every different component would make the code redundant, non-readable and messy.
3. 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.
4. 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 . 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 and .

Happy Designing! 🎨