Developer Abandons Tailwind CSS for Vanilla Stylesheets: 'It Was SO Fun and SO Interesting'

Developer Abandons Tailwind CSS, Returns to Vanilla Stylesheets: 'It Was SO Fun and SO Interesting'

A front-end developer who spent eight years evangelizing Tailwind CSS has announced a complete reversal, moving two of their sites back to semantic HTML combined with vanilla CSS. The developer described the week-long migration as 'SO fun and SO interesting,' in a blog post that has drawn significant attention from the web development community.

Inverted Pyramid: Key Facts

• The developer first embraced Tailwind eight years ago to bring order to chaotic CSS code.
• Over the past week, they migrated several sites away from Tailwind to semantic HTML plus vanilla CSS.
• The migration was inspired by reading guides on CSS structure such as 'A Whole Cascade of Layers' and 'How I Write CSS in 2024.'
• They realized that Tailwind had already taught them many of the systems needed for structured vanilla CSS, including resets, color palettes, and font scales.

Read the original article: Moving away from Tailwind, and learning to structure my CSS.

Background

Tailwind CSS is a utility-first framework that provides low-level class names for styling. It became popular as an alternative to writing custom CSS, especially for developers who struggled with CSS organization. The developer originally adopted it to avoid 'a pile of complete chaos' in their stylesheets.

However, recent years have seen a growing movement back toward semantic CSS. Developers are rediscovering modern CSS capabilities—like container queries, layers (@layer), and custom properties—that make utility-first approaches less necessary for many projects.

What This Means

This developer's journey highlights a broader shift in the CSS ecosystem. Many intermediate developers who relied heavily on Tailwind are now finding that the framework inadvertently taught them how to architect CSS systems. The developer's new approach mimics Tailwind's behavior—using a reset stylesheet, a defined color palette, font scales, and component-based file organization—but in hand-coded CSS.

"Every CSS codebase has layouts, fonts, colors, and common components," the developer wrote. "It's extremely useful to have systems or guidelines for each of those—otherwise things descend into chaos. Tailwind had systems for some of these, and I already know those systems! Maybe I could imitate the ones I like."

This suggests that Tailwind may serve as a stepping stone for developers to eventually write better vanilla CSS, rather than a permanent dependency.

The Systems Adopted

The developer outlined several key categories being migrated from Tailwind's architecture to vanilla CSS:

• Reset – Copied Tailwind's 'Preflight' styles (box-sizing, line-height, etc.) almost verbatim.
• Components – Each component gets a unique class and its own CSS file, preventing cross-contamination.
• Colors – Borrowing Tailwind's color palette.
• Font sizes – Re-creating Tailwind's font scale.
• Utility classes – Some small utilities for common spacing.
• Spacing – Using consistent spacing units.
• Responsive design – Media query management.
• Build system – Potentially lighter tooling.

The developer specifically noted that editing one component's CSS no longer risks breaking another: "Each component has its own CSS file—so editing the CSS for one component won’t mysteriously break something in another."

Quotes from the Developer

"I spent the last week or so migrating a couple of sites away from Tailwind and towards more semantic HTML + vanilla CSS, and it was SO fun and SO interesting."

"Tailwind has systems for some of these, and I already know those systems! Maybe I can imitate the systems I like."

"I think it would be a real adjustment for me to switch to writing CSS without [Tailwind's reset styles], and I’m sure there are lots of other things I’m subconsciously used to and don’t even realize are there."

Read more: How to structure CSS in 2024.