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 a tutorial to get started with it. has covered that part pretty well. not The official documentation 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, .  All utility classes use for styling. Tailwind has classes from smallest rem unit (2px) to all the way up to 24rem. Additionally, you can add units as per your choice in file (which can be , or anything else too). rem rem 0.125rem tailwind.config px em 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 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. sm 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 , , and . 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. justify-{value} align-{value} place-{value} gap 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 Aspect Ratios : Tailwind has a set of base styling practices built on top of . Preflight 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 the 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 . 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 . my blog Twitter LinkedIn Happy Designing! 🎨

Twitter

Take Your Tailwind Skills to the Next Level by Using these Resources

7 Essential Tips for Competitive Programming and DSA

Read My Stories

Let's Connect!

Nominated for 2022 - HackerNoon Contributor of the Year - Rest Api

Nominated for 2022 - HackerNoon Contributor of the Year - How To

Nominated for 2022 - HackerNoon Contributor of the Year - Git

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Too Long; Didn't Read

Make resilience your competitive advantage

A Complete Introduction to TailwindCSS

A Complete Introduction to TailwindCSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

7 Essential Tips for Competitive Programming and DSA

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

7 Essential Tips for Competitive Programming and DSA

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps