Tailwind - The good, the bad and the ugly
Tailwind is a CSS utility library, that gives you the ability to write "inline CSS", using pre-defined utility classes. It contains a large range of classes all from layouts to typography and effects and filters. The classes make it possible, to make nearly anything you want, without configuration. In this article, I will talk about the good, the bad, and the ugly of the tailwind CSS library.
The good
The good part of tailwind is that it is really easy to use. It is intuitive and similar to normal CSS and easily legible so that you can tell what’s going on, just by looking at the classes. Tailwind has a CDN version, that makes it quick to get started. It is also installable with npm or Yarn. It has good documentation, that is easy to understand and has good examples. Tailwind has an icon, UI component, and headlessUi libraries that are built for and with Tailwind, and with its increasing popularity in the community it can only get better.
What I liked most about tailwind is the design system it uses. It is similar to what I do normally but without all of the hassle of setting up breakpoints and custom classes. It integrates the breakpoints into the classes. So that each style is defined with a breakpoint. Similar to how you define a hover state with Tailwind. This is nice when trying to figure out which states need different styles. When configuring Tailwind, you can use the purge option to remove unnecessary styles and classes for a production build. Which is unlike other CSS libraries. You can also disable some features in the config file.
Every time I found some advanced thing I wanted to do, Tailwind surprised me with its features. I wanted to animate an SVG icon on hover. I thought this was a problem because I wanted to change the SVG when hovering over the parent. But Tailwind had a solution. Use the class “group-hover”.
Sure there are several more good things about Tailwind, but won’t be able to fit it all into one article.
The bad
Tailwinds predefined classes are divided into two parts, the first part being the CSS property you would like to change. The second part is the value. So if you want to put padding on a div, you would use the class p-4. 'p' short for padding and 4 short for a defined value (1 rem in this case), that Tailwind has defined for you.
This syntax seems pretty legibly and intuitive. But is not all values are supported with Tailwind. It can be confusing to find that some values work when others do not. I would find myself looking up which values were supported all the time. This was pretty annoying in the beginning, but after I had used it for a while. I confined myself to only using a few and went with those primarily.
I didn’t quite figure out, why some values were available and others not. Typically the smaller values have half rems as well as hole rems and sometimes also a quarter and 3/4 rems. The bigger the value the less accurate and the bigger gap. All of your styles are written in classes "inline" with your HTML, which can be a mouthful to look at.
Depended on the point of view, this can be good or bad. All of your styles are written in classes "inline" with your HTML, which in big projects can be a mouthful to look at.
The ugly
To be honest, I didn’t really have anything on the ugly parts of tailwind before I searched the web and found an article about it. It’s called Why Tailwind Isn't for Me - DEV Community if you want to take a look.
In the article, he mentions that tailwind actually encourages you to use spans and div’s to style your elements. This is true. Let me explain. Tailwind classes only work on the element that it is bound to. So where you in normal CSS would be able to make a cascading style, would you need a span or a div to change the styles in tailwind.
The conclusion
Tailwind has a lot of good to offer, but you might think about the size of your application before going straight to tailwind.
Personally, I found tailwind to be a joy when used with a framework like react (just for the argument’s sake, it’s a framework). Using the imports and components the large mess that tailwind brings wasn’t that bad.
I also found the config file to be quite a joy, changing the colors or adding a custom breakpoint was seamless and no hassle at all, from my point of view. But a lot of people have different options on the interwebs. So if you want a good answer, try it yourself.