Why don't I use Tailwind?

Let me get the obvious out of the way: Tailwind is good software, and it won for real reasons. Utility CSS is the right idea. Colocation beats a styles/ folder nobody maintains. And it is genuinely easy to pick up, which is most of why it spread the way it did.

So this is not a complaint about utilities, and it is not a complaint about the scale either. People assume that one, so let me kill it first.

My issue with Tailwind is simple. Syntax.

I doesn't comply with CSS

CSS has row-gap and column-gap. Tailwind has gap-y and gap-x. Not abbreviations of the CSS, different words for the same thing, and you have to learn which axis got which letter.

That is not a one-off. Once you start looking, the pattern is everywhere:

Worth noting: Tailwind recently added logical property utilities for inline-size and block-size. They used the same names for these as for the property names, just like in Yumma CSS. However, they eventually renamed them for something else.

<div class="mbs-6 mbe-2 pbs-4 pbe-8 ...">
  <!-- ... -->
</div>

Arbitrary values will break your design system

Tailwind lets you drop any value you like into any utility. That freedom sounds unambiguously good until you watch what it does to a codebase over a year.

<h1 class="text-[clamp(1.75rem,_5vw,_3.25rem)]">
    <!-- ... -->
</h1>

This is not a decision anyone will remember making, it is not in the config, and the next person will write a slightly different clamp two files over.

Yumma CSS runs from 0 to 384 in steps of 0.25rem, so the scale tops out at 96rem. That is 1536px. For a fixed height on a component, 1536px is already an extreme value, and a number past it is almost always a sign that a fixed height was the wrong tool.

Because the honest answer to "I need more than the scale" is usually that you need a different property:

• Full screen is h-dvh or h-svh, not a large fixed number.
• A ceiling is max-h-*, with a viewport unit or the top of the scale.
• Content-driven height is h-fc, and most of the time that is what you actually wanted.

A scale that stops is not a limitation. It is the thing that makes you notice you have reached for the wrong pattern.

What I actually wanted?

I wanted no barrier between me and the tools I use to style the web. No translation step, no second set of names, nothing sitting between the CSS I already know and the thing I type.

So d-f is display: flex. jc-sb is justify-content: space-between. Initials of the property, initials of the value. There is nothing to look up, because there is nothing new to know.

It is not a beginner's tool, and I have never pretended otherwise. If you don't already know the properties, the abbreviations are noise. But if you do know them, you are already fluent.

If you know CSS, you already know Yumma CSS.