I finally did it. I yeeted MUI (and every other component library I've tried lately) into the sun and went all-in on Tailwind. I'm crazy impressed so far, and the numbers are ridiculous.
A fresh page on this site is shipping 14 KB of CSS, gzipped. That’s not a typo. Tree-shaking + PurgeCSS is merciless: if a class isn’t in the markup, it simply doesn’t exist in the final bundle. I’m no longer paying for twelve modal variants, three drawer animations, and a date-picker I’ll never use.
Readability is way than I expected. I leaned hard into templating and a tiny design-token layer, so instead of class soup I’m leaning toward something like:
<button class="${btn} ${btn-primary}">Save</button>
Change the token once, every button updates. Instantly. No find-and-replace nightmare, no forgotten override buried in a 4000-line CSS file.
No Fallback
I keep waiting for the moment I’ll need custom class names or heavy @apply blocks. Hasn’t happened yet. The default spacing scale (0, 1, 2, 4, 8, etc.), the color palette, the breakpoints — everything is so sane I haven’t had to fight it once.
Utility-first always felt like the right idea; the problem was everyone, myself included, shipped a landfill of unused CSS to make it possible. Tailwind looked at that problem and just… deleted the landfill.
They actually built the utility-class monster I’ve been daydreaming about since 2010, and they did it without forcing me to drag around that mountain of styles.
It’s 2022 and my CSS is tiny, my markup is clean, and I’m grinning like an idiot every time I run the build.
Tailwind didn’t just replace MUI. It feels like it retired an entire category of guilt.
More experiments (and probably pugs) to come.