CSS isn't broken: Tailwind, utility classes, and CSS architecture

I have an incredibly strong dislike of Tailwind, the CSS framework. Today, I wanted to talk about why.

What is Tailwind?

Tailwind is a utility-class library for creating UIs.

Let’s say you have a div element. You want to center the text, round the corners, and add a border color to it to make it stand out. With Tailwind, you can do something like this.

<div class="text-center rounded border-black"> <h2>Ready to join?</h2> <a href="/join">Get Started!</a> </div>

Their tagline is…

Rapidly build modern websites without ever leaving your HTML.

And a key part of the value proposition championed by Tailwind’s creator and its many fervent fans is that CSS is broken, and Tailwind “fixes” it.

Utility classes are awesome! They’re not everything, though.

You can absolutely build entire websites with only utility classes. And for quickly throwing together prototypes, it’s probably the quickest way to get started.

Maintaining a setup like that, though? Hell!

Imagine an alert component. Here’s what that might look like using only Tailwind CSS utility classes.