Tailwind CSS: The CSS Framework That Actually Helps You Write Less CSS

Photo by Tran Mau Tri Tam on Unsplash

Most CSS frameworks provides prebuilt components. Basic things like buttons, form inputs and navs are already built, styled and ready to use. You can just copy paste the markup from the documentation to use the component in your web page. These all sounds really comfy, until you need to implement custom stuffs.

If you are working with a UI designer or working on converting an existing UI design into a web page, you will soon realize that using prebuilt components just doesn’t work well anymore. Most of these frameworks aren’t really coded to be fully customizable to fit your unique design.

You either have to fight the framework by adding and overriding styles on the prebuilt components or write custom CSS from scratch. Again, these all sounds normal, after all, as a web developer, dealing with CSS is in our daily task list. But, what is the point of using these frameworks if we end up overriding or not using much of the stuff anyway?

Enter Tailwind CSS, a utility-first CSS framework.

This framework doesn’t have prebuilt components at all. Instead, Tailwind CSS provides a ton of utility classes that can be applied to your HTML elements. By utilizing utilities instead of prebuilt components, you can easily build your own custom components by composing these classes together.

Tailwind CSS makes almost all css properties into utility classes. Basic things like margin or padding with predefined values, to the more complex one like flexbox, is all provided out of the box. And, of course, the values for all of these properties are customizable via a config file. The framework even provides a way for you to generate a new utilities.

Here is what those classes look like.

An example from Tailwind CSS docs

I’m not gonna explain what each classes does, because just like any other CSS framework, you can refer to the documentation. The key takeaway here is that we build custom UI without any custom CSS.

What the hell!? This looks messy. Isn’t this just the same as writing inline styles via style property in HTML?

It’s not the same as inline styles. When we use inline styles, values for sizes, color, etc is all magic and there is no constraint. Tailwind CSS works by generating utility classes from a predefined design system that contains those values, so your styling is always consistent. On the technical side, Tailwind CSS also provides classes for pseudo classes and media queries. With inline styles, it is not possible to use pseudo classes (like :hover) or media queries.

But still, it looks messy..

If you are already imagining how these classes would pollute your page template, there is a thing that you can do to make it cleaner. You can, and I absolutely recommend you, to extract those templates that you write into an actual “component” in frontend framework we all probably already use, like React, Vue.js, or Angular.

By extracting components, your page template as a whole will look simpler. Instead of writing multiple lines of markup for a single component, we can now just use the component by calling its name. The benefit is that not only the styling got abstracted away but also the template.

Tailwind CSS helped me implement UI faster, because all I have to do now is just write template and the logic in JS. Since I mostly use React, now I don’t have to switch back and forth between JS and CSS. I know that CSS-in-JS exists to also help with this thing, but you still have to write your own custom CSS from scratch. Tailwind CSS is the real deal here, it helps you to just not write CSS.

Tailwind CSS works really well if you already have a custom design, but also when you don’t. Personally I’m not a UI/UX designer, but even when I don’t have a custom design to implement, I would still use Tailwind CSS. Development just feels much faster because those utilities classes are not just for building custom components. I can use them to layout and style the whole site. Also, by not using prebuilt components, it teaches me on how to design a UI component and create a component library from scratch.

Utility classes in CSS frameworks are not new. Bootstrap 4 also provides utility classes. In fact, I’ve been using them before I discovered Tailwind CSS. I really enjoyed working with utility classes, and when I discovered Tailwind CSS, I instantly fell in love with it. Being a utility-first framework, Tailwind CSS provides a lot more classes compared to Bootstrap. Tailwind CSS had the highest interest & satisfaction rating according to this year’s The State of CSS, which means a lot of other developers are also loving it.