Serhii Lebediev, the Frontend Engineer at Trisk and Trisk 2.5, shares his thoughts and experience on using Tailwind CSS. Don’t miss out on the benefits of speed, customization, and more...

TowardsDev's platform is a resource for developers, offering insights into software development, coding tutorials, and technology news. Through articles, tutorials, and coding challenges, TowardsDev offers insights into programming languages, development frameworks, and best practices in software engineering. Readers can learn about algorithms, data structures, and problem-solving techniques to enhance their coding skills and prepare for technical interviews.

Towards Dev

Tailwind CSS is a utility-first CSS framework that offers flexibility and allows for easy customization. It reduces the need for naming classes and simplifies the implementation of page designs. It also offers the advantage of automatic purging of unused classes and supports reusability of styles.

Why Tailwind is better

I think, these articles about Tailwind and utilities should be more wide and not only selectors focused.
I had to write that myself for <a href="https://stylifycss.com/blog/best-practices-for-utility-first-css" target="_blank" rel="noopener nofollow">Stylify CSS: Best Practices For Utility First CSS</a>.
It’s because otherwise haters just see “inline styles” and bloated templates. Tailwind, Stylify and other utilities are about reusability, maintainability and faster coding.
Even though the templates seems “bloated” at first, it saves a lot of time on coding and removes a lot of pains of the traditional CSS.
Writing pure CSS in optimized way is not simple. Maintain it is even harder. It requires skills and time (we often don’t have). Yes, project with a few files are ok. But think about 100+ and variouse bundles combination: composing css together, removing unused parts, duplicates in screens and properties… It’s simply difficult and tiresome.

Tailwind is very good, its easer and beautiful

Can we please stop already with the “build any design directly in your markup”?

It is indeed a very powerful tool. However, the disadvantage is that when you first look over a component or some HTML code, maybe you want to see the tree structure first and understand the logic. If you have a fancy design all those Tailwind classes create some noise while reading the code.
Also, the input type range customization is not fully supported: <a href="https://github.com/tailwindlabs/tailwindcss/discussions/8748" target="_blank" rel="noopener nofollow">https://github.com/tailwindlabs/tailwindcss/discussions/8748</a>

Tailwind &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; Bootstrap