Tailwind's class names are readable. items-center
tells you what it does. But it's not CSS. It's Tailwind's own name for align-items: center
, & that name doesn't always trace back cleanly. gap-x-4
reads fine, but gap-x
isn't a CSS property. column-gap
is. Same with shrink-0
for flex-shrink: 0
, or flex-col
for flex-direction: column
. Every one of these is something you learn on top of CSS, not something CSS already taught you.
I didn't want a second vocabulary. I wanted the one I already had to be enough. Three years ago that turned into Yumma CSS.
Yumma CSS doesn't invent class names. It derives them from the CSS you already know, using one mechanical rule:
/* display: flex; -> */ .d-f { … }
/* justify-content: space-between; -> */ .jc-sb { … }
/* align-items: center; -> */ .ai-c { … }
/* flex-direction: column; -> */ .fd-c { … }
/* column-gap: 1rem; -> */ .cg-4 { … }
/* margin-top: 1rem; -> */ .mt-4 { … }
If you already think in CSS properties, you can guess most of these correctly before you've opened the docs. There's no separate naming system to hold in your head alongside the one you already have.
I'm not going to pretend this is free.
Yumma's numeric scale is curated, not arbitrary. Spacing & sizing run on a fixed 0.25rem
step from 0
to 96rem
, & that's it. There's no bracket syntax, no w-[137px]
. If the value you want isn't on the scale, you don't get it, & that's deliberate: fewer one-off values floating around a codebase, more consistency by default. It's the same bet most design systems make when they limit themselves to tokens instead of arbitrary numbers.
It also means this isn't a beginner's tool. If you don't already know what justify-content
does, abbreviating it to jc
doesn't help you. It just looks cryptic. Yumma CSS is for people who already think in CSS properties & want their classes to trace back to that knowledge directly, not for people learning CSS for the first time. I'm fine saying that plainly.
This isn't an argument that Tailwind is worse. Its naming is genuinely good: readable, consistent, easy to skim. It's just a different design goal. Tailwind optimizes for names that read well on their own; Yumma CSS optimizes for names that map directly onto the property & value they produce. Both are reasonable things to want. I just happen to want the second one, for myself & for anyone else who'd rather not maintain two mental models of "what makes a margin."
This is a solo project, three years in, still early. The docs walk through the full rule & the rest of the utilities, & the playground lets you try it without installing anything.
If you poke around & think the rule breaks somewhere, I'd genuinely like to hear where. That's more useful to me right now than a star.