Why I love Tailwind CSS
7 November 2021
Tailwind CSS is a utility-first CSS framework packed with classes like
rotate-90 that can be composed to build any design, directly in your markup.
Tailwind syntax looks like this:
If you use Tailwind CSS in a vanilla project, you will duplicate the classes a lot and it's not maintainable. Only use Tailwind with component-based frameworks or libraries like React, Vue, or Angular.
Tailwind CSS restricts your design a little bit to make it look consistent and pretty but is also customizable enough to build any design.
In my opinion, Tailwind is the fastest styling method.
It can scale well. Tailwind is used at React Docs Beta, Algolia, Clubhouse, CovertKit, and many other websites.
Editing the CSS only affects the specific component.
No dead CSS. If you delete a markup, the CSS will also be deleted. So, there's no dead CSS.
You don't have to name elements. Sometimes, naming an element is even harder than writing the CSS. In Tailwind CSS, you just write the classes, so you don't have to name elements.
Easier and faster to write and read. Instead of typing
display: flex;, you can just add
flex class to the element. It's arguably easier and faster to write and read.
Tailwind isn't perfect but the benefits outweigh the drawbacks. Adding many classes into the HTML is a bit ugly. You have to spend some time first to understand Tailwind classes.
Vanilla CSS, CSS Modules, and CSS preprocessors are too permissive and hard to maintain. Premade component libraries and frameworks are too restrictive. CSS-in-JS is heavy and not flexible. Inline CSS lacks many features. Tailwind CSS seems to be the best choice for now.Read other blogs