It’s easy to say that you want to design something. It’s hard to actually design it. Because writing CSS is like catching fish in a barrel one day, but herding cats the next.

But then, to help developers, Adam Wathan released Tailwind CSS in 2017.

Using Tailwind CSS, you can build designs that you want to create, instead of just using predetermined designs. Not only this, Tailwind CSS is great for creating prototypes as well. I, at times, use this to build websites where I want to change designs more often. The good thing is that you can use this alone as well as in conjunction with another framework like React or Vue.js.

Some Concepts that You Need to Learn While Working in Tailwind CSS
I think Tailwind CSS is easy to use and understand. Sure, if you’re new to designing, then it may take some more time to get the hang of it. But the thing is, their documentation is too thorough. You can easily learn Tailwind CSS through their documentation. But I advise you to first learn CSS3 before learning Tailwind CSS. Apart from this, I recommend learning from: TailwindCSS: Zero to Production.

Now, some concepts that you may have to learn before starting Tailwind CSS includes:

1. Utility Classes — In Tailwind CSS, classes are built around a single style element. Every class in these classes is called Utility Class. Using these utility classes, one can control colors, borders, display, and even shadows.
2. Variants —It’s another concept that you need to learn in Tailwind CSS. A variant in Tailwind CSS is used to design a responsive interface for varying screen sizes.
3. Settings and Themes —Through a file named Tailwind.config.js, you can configure utility classes and variants. With configuration, one can also set values for utility classes.

Benefits of Using Tailwind CSS

There are too many benefits of Tailwind CSS. But I’ll just pen down a few important ones.

1. Easy Peasy

As mentioned before, there are lots of resources using which you can learn Tailwind CSS. There’s also a whole community of developers on Dev and GitHub. YouTube, is another platform that has dozens of Tailwind CSS videos. Good thing is that Tailwind CSS isn’t just tied to one specific framework. You can integrate it with React, Vue, Angular. And don’t worry, despite this, you won’t face any compatibility issues.

Further, what’s great about Tailwind CSS is that websites can be made more responsive with its help. Maybe that’s the reason famous companies like OpenAI, Loom, Turbo, NY Times, use it.

2. Best Styling

You can make amazing and attractive layouts using Tailwind CSS. Great thing is that you don’t need to design everything from scratch. There are lots of built-in classes.

3. Customizable Framework

In my opinion, Tailwind CSS is one of the most customizable frameworks. Now, I know there’s default configuration in Tailwind CSS, but you see Tailwind.config.js file is for a reason present in Tailwind CSS.

But like any other framework, Tailwind CSS also has some cons like because of the large number of classes in HTML, the download size of HTML also increases. Sometimes, it does impact web performance. Mixing HTML and styling is another issue. Further, if you don’t understand CSS, then it’s also impossible to work in Tailwind CSS.