Goodbye Tailwind: How I Learned to Structure CSS and Stopped Worrying About Utility Classes

Remember that feeling when a Tailwind project turns into a spaghetti of className="flex items-center justify-between p-4 bg-white shadow-md"? Julia Evans, author of jvns.ca, had enough and shared her migration back to structured CSS. Spoiler: it's not just "give me a file instead of a hammer," it's a whole philosophy.

Julia admits Tailwind was great for quick prototypes, but as the project grew, utility classes started to feel like assembly code — each line makes sense, but the big picture is lost. She switched to CSS with a BEM-like methodology and even wrote a small PostCSS plugin to automate the boring parts. "I no longer feel like I'm fighting the browser," she says.

Key takeaways from her experience:

• Group styles by component, not by utility. It's like sorting socks by pair, not by color.
• Use CSS custom properties for frequent values — they're faster than SASS variables and don't need a build step.
• Don't fear specificity: single-class selectors are not shameful, they're readable.
• Keep Tailwind for small projects where speed beats architecture.

Sure, the "Tailwind vs CSS" holy war won't end, but Julia reminds us: the tool should serve you, not the other way around. If your CSS file looks like an IKEA shopping list, maybe it's time to rethink your approach.

METABYTE studio comment: We've been there too — from the thrill of "fast classes" to realizing that maintaining such code is like herding cats. In our projects, we mix approaches: Tailwind for MVPs, structured CSS with a design system for production. Just don't forget we write code for humans, not preprocessors.