marioph ✨
← Back

But Why Tailwind, Though?

  1. Tailwind is not a component framework
  2. Tailwind is not just “inline styling”
  3. What is Tailwind?
  4. “Best practices” don’t actually work
  5. Small CSS bundle
  6. How to “learn” Tailwind
  7. Other resources

If you are reading this, you have probably heard people either praising or complaining about Tailwind.

Tailwind is the only mantainable way to style websites. - John Doe

Tailwind is an absolute mess of cluttered, unreadable classes. - Anonymous

Well, maybe no one has specifically said this, but you get the point. For some reason, it is always a hot topic.

What is Tailwind about? What are these “inline styles”? Why should you care?

First, let’s begin by clarifying what it is not:

Tailwind is not a component framework

Don’t get me wrong, UI component frameworks can be amazing.

But Tailwind is just about an opinionated set of low-level utility classes, that guide you to make good choices by default.

Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it’s easy to build the same component with a completely different look in the next project.

And you can also build amazing UI component frameworks on top of Tailwind, but Tailwind itself has nothing to do with other solutions that are often compared to.

There are also other similar (and really interesting) options, like unoCSS, that follow this line of thought.

Tailwind is not just “inline styling”

One of the first things that Tailwind is often blamed on, is that it is “just inline styling”.

What is the difference between using Tailwind and just adding inline style tags to the HTML elements?

There’s a few of them:

Ok so… what is Tailwind?

What is Tailwind?

Tailwind is a utility-first, component driven CSS framework.

It provides a set of opinionated utility classes, that you can use directly inside your markup.

bundle.css
.flex {
  display: flex;
}
.mb-4 {
  margin-bottom: 1rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

As you can see, each of these classes has a single purpose, and they map to one or more CSS properties. You can see the full list here.

Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.

In practice, a component using Tailwind, with your framework of choice, would look similar to this:

my-component.svelte
<article class="p-4 my-10 mx-auto max-w-sm bg-gray-700 rounded-lg shadow-md">
  <img
    src="https://fakeimg.pl/300x150"
    alt="Placeholder"
    class="object-cover w-full rounded-md aspect-video" />
  <h2 class="my-5 text-lg font-bold text-white">but why Tailwind, though?</h2>
  <div
    class="flex justify-between pt-2 text-sm text-gray-300 border-t border-gray-500">
    <time datetime="2023-08-14">Aug 14 2023</time>
    <span>Mario Pérez Hurtado</span>
  </div>
</article>

Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it. - Tailwind docs

But once you’ve actually built something this way, you’ll quickly notice some really important benefits:

When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture.

“Best practices” don’t actually work

This is a bold statement, but in my own experience, it’s not far from the truth. It comes directly from the creator of Tailwind CSS.

I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way. - Adam Wathan

This article explains various CSS approaches and “best practices”, from semantic CSS, BEM (Block-Element-Modifier), content-agnostic CSS, to how utility-first CSS and the use of components can avoid a lot of bloat and complexity in stylesheets.

Go check it out if you want a more in-depth read about it.

Small CSS bundle

Think about how many times you write margin: x , or padding: x in every CSS file. Using semantic CSS, you need to ship every CSS property of every selector to the client.

Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.

How to “learn” Tailwind

Perhaps you want to try Tailwind and see if it’s as nice to work with as it sounds. How do I learn it?

You don’t really need to. If you already know CSS, you just have to start styling, looking up the utility classes you need to use, in a cheatsheet.

You will be slow at the start, but in a few hours or less, you will remember most of the most commonly used classes. A few special things here and there (hover states, media queries, dark mode), and you will be back to your normal pace, probably even faster.

And most importantly, you will have a highly maintainable solution to work in a team, with consistency, good defaults, a small bundle, immediate understanding of the codebase styling, and less overhead.

A few tips:

Other resources