Why I love Tailwind CSS

7 November 2021

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and 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.

Since the HTML, CSS, and JavaScript are in a single file, it's easy to move and edit your code.

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.

Some drawbacks

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.

Conclusion

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.