Tailwind CSS: Trading Looks for Looks

Exploring the ecosystem of web development, one will stumble upon Tailwind CSS. While redesigning my website, I decided to give Tailwind a try.

What's Tailwind?

Tailwind is a CSS framework for building websites. With it, you don’t write classic CSS. Instead, Tailwind provides thousands of predefined classes to use inside your HTML.

You can compare it to Atomic CSS. Quoting CSS-Tricks:

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

With an Atomic CSS approach, you might create the following class for a flex layout:

.flex {
    display: flex;
}

That's pretty much the same thing with Tailwind. One difference is that you don't have to write these classes yourself. These classes come with Tailwind.

But Tailwind is more than Atomic CSS with predefined classes. So let's talk about the good, the bad, and the ugly.

The Good

Coming up with class names gets more difficult as the project grows. For big projects, this becomes very noticeable. With Tailwind, you won’t have this problem. Yes, there will be cases where you’ll still need class names. And with Tailwind, the ones you’ll come up with will likely still be available.

Not only does Tailwind save you time coming up with names, but it also speeds up your work. Those predefined classes have shorter names than their styles written in CSS. At least most of the time.

Let's compare it by writing the same HTML without Tailwind and then with it.

<!-- Classic CSS -->
<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<style>
    .list {
        margin: 0;
        padding: 0;
        list-style: none;
  }
</style>

<!-- Tailwind -->
<ul class="m-0 list-none p-0">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

In both cases, we remove the margin and the padding from the list while changing the list style to none. It's also common to split up HTML and CSS into separate files, having to maintain more files. Tailwind spares you that extra work.

Splitting HTML and CSS can lead to bigger-than-needed CSS files. It’s common to delete an element and forget the belonging CSS class. Not only bloating your CSS file/s but also creating zombie classes.

The developer experience is also way better with Tailwind. Aside from the positives mentioned before, Tailwind also handles specific vendor prefixes. Thus further reducing your time writing CSS. And that's still not all. They also offer a VSCode extension that adds IntelliSense for Tailwind classes.

At last, you don't have to stick to Tailwind's predefined values. You can customize them as you'd like it. You can replace the given styles or add new ones as you wish.

The Bad and the Ugly

In most cases, Tailwind won’t work immediately after installing it. You need to configure it before it works, thus taking some time to get started.

Another problem with Tailwind is repeating code. If you write proper classes, this shouldn’t happen with classic CSS. In modern frameworks, you can create components to combat the problem. With the directive @apply, you can apply Tailwind classes in a CSS file. This way, you can make classes that contain many Tailwind classes.

And as you might know, the worst thing about Tailwind is the HTML. It gets polluted with classes and becomes ugly and unreadable very fast.

Final Words

As you might have noticed, I shared more positives than negatives. That doesn't mean everything I mentioned is comparable one-to-one. As with everything, in the end, it depends on your taste and preferences. But no matter if the good outweighs the bad or the other way around. Tailwind is a technology you should at least try to use before judging it.

Tailwind is a great tool that I’ll keep using in the future. As of right now, I am still not a fan of how it makes my HTML look. But spending less time styling and more time focusing on what I like the most is a big plus. So I’ll accept the negatives, as the positives are too good to ignore.