Tailwind intro — good and bad

Kristijan
3 min readJul 19, 2023

Tailwind is a utility-first CSS framework that gained a lot of popularity. But just like with every framework and library, it comes with good and bad sides. In this post, I will cover a few good and bad parts of it.

Tailwind Logo

Utility-first?

If you check Tailwind pages, it will say it is a utility-first CSS framework. But what does that mean? Tailwind comes with many useful classes replacing a CSS rule. Rules like margin, padding, and font size, and for each there is a class. If you compare it to many other CSS frameworks, most of them have classes like accordion, content card, and similar that come with a defined set of rules for them. In this case, you use these utility classes to build your components.

Defined colors and sizes

In the above, I mentioned that there are classes for each CSS rule. And there are separate classes for different colors, padding, margin, font sizes, and all other rules. This may seem a bit limiting, but it helps you with the starting point for your project and to keep consistency in color and sizes across the project.

Configurable classes

In some situations, you may want to make some spacing with some specific values. Some of the tailwind classes do support that by placing value in the square brackets. As an…

--

--