Moving away from Tailwind, and learning to structure my CSS
The author reflects on their journey from using Tailwind CSS to adopting a more semantic HTML and vanilla CSS approach after eight years. They found the transition enjoyable and insightful, recognizing that Tailwind had indirectly taught them valuable structuring principles. Key takeaways include organizing CSS by components, reusing Tailwind's reset, and maintaining design consistency through variables and conventions.
- ▪The author migrated several websites from Tailwind CSS to semantic HTML with vanilla CSS for better structure.
- ▪Tailwind's built-in systems, such as its reset stylesheet and font scale, influenced the author's new CSS organization approach.
- ▪The new CSS structure includes separate files for components, global variables for colors and font sizes, and adherence to non-overlapping styling rules.
- ▪Each component uses a unique class to prevent style conflicts and improve maintainability.
- ▪The author copied Tailwind’s preflight reset and adopted its font size scale to maintain familiarity and consistency.
Opening excerpt (first ~120 words) tap to expand
Moving away from Tailwind, and learning to structure my CSS • css • May 15, 2026 Hello! 8 years ago, I wrote excitedly about discovering Tailwind. At that time I really had no idea how to structure my CSS code and given the choice between a pile of complete chaos and Tailwind, I was really happy to choose Tailwind. It helped me make a lot of tiny sites! 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, so here are some things I learned! As usual I’m not a full-time frontend developer and so all of my CSS learning has happened in fits and starts over many years.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at Julia Evans.
Discussion
0 commentsMore from Julia Evans
