Developer Moves Away from Tailwind and Learns to Structure Vanilla CSS

A developer migrates from Tailwind CSS to structured vanilla CSS

A developer recently documented their experience migrating several websites away from Tailwind CSS and towards semantic HTML and vanilla CSS, sharing the lessons learned along the way. The process involved adopting a component-based CSS structure, a copied CSS reset, and a centralised colour variable system.

---

A developer migrates from Tailwind CSS to structured vanilla CSS

A developer recently documented their experience migrating several websites away from Tailwind CSS and towards semantic HTML and vanilla CSS. Writing on their personal blog, the developer — who describes themselves as not a full-time frontend developer — noted that their CSS learning has happened in fits and starts over many years. The migration took roughly a week and was described as both enjoyable and educational.

The developer had originally adopted Tailwind around eight years ago, at a time when they had no clear method for structuring CSS code. Faced with a choice between an unstructured approach and Tailwind, they chose Tailwind, which helped them build numerous small sites over the years. The recent migration marked a deliberate shift towards a more considered, semantic approach.

How the New CSS Structure Works

A central part of the new approach involves organising CSS by components, in a way the developer describes as spiritually related to Vue or React components — even when no JavaScript is present on the site at all. The idea is that editing the CSS for one component will not unexpectedly break something in another component. The developer notes that the vast majority of CSS they would actually want to change lives in individual component files, making it far easier to reason about a smaller, focused set of rules at any one time.

For the CSS reset, the developer chose to copy Tailwind's own preflight styles directly, taking roughly the first 200 lines from the Tailwind CSS file. They acknowledged having developed habits around Tailwind's reset over time — for example, the box-sizing: border-box rule applied to every element, and a default line-height set on the html element. Rather than abandon these familiar defaults, they carried them forward into the new codebase.

Colour management is handled through a dedicated file containing CSS variables, with a guideline that all colours used across the site must be listed in that single file. The developer noted that colour is a difficult problem and chose not to revisit their colour choices during this refactor, focusing instead on consolidating them in one place for consistency.

Getting Started and Further Reading

The developer drew inspiration from several blog posts about structuring CSS, which helped reduce the initial intimidation of approaching the problem without a framework. No programmatic enforcement — such as web components or the @scope rule — was used to guarantee component isolation. Instead, the developer relied on convention and discipline, finding that even this informal approach represented a significant improvement over their previous workflow.

The full write-up is available on the developer's personal blog and covers additional aspects of the CSS codebase not fully detailed in the summary above.

Story based on discussion on Hacker News.