# Moving Away from Tailwind and Learning to Structure My CSS

Experiences and lessons learned from transitioning to semantic HTML and vanilla CSS.

- **Source:** [Julia Evans](https://jvns.ca)
- **Published:** 2026-05-15
- **Topic:** [Software & Engineering](https://brifing.si/c/engineering)
- **Original article:** <https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/>
- **On Brifing:** https://brifing.si/s/03ee7122-8a73-490a-b554-8018e05c27ae

## Starting with Tailwind

Eight years ago when I discovered Tailwind, I didn't know how to structure my CSS code. Tailwind offered order instead of chaos and helped me build many small sites. But over time, I sought a more semantic approach.

## Transition to Vanilla CSS

I've spent the last week migrating some sites from Tailwind to vanilla CSS. This process has been both fun and educational. I discovered how to apply the systems Tailwind taught me in my own CSS architecture.

## Fear of CSS Architecture

I was initially intimidated by CSS architecture. But after reading articles like 'A whole cascade of layers', I understood that every CSS codebase has different elements that need systematic management.

## What Tailwind Taught Me

I realized I could mimic Tailwind's systems like color palettes, font scales, and reset styles in my own projects. For example, using box-sizing: border-box has become an indispensable habit for me now.

## Component-Based Approach

I started organizing CSS by components. Each component has its own CSS file and unique class. This eliminates the risk of breaking other components when editing one, making code more manageable.

## Color Management

I created a central variables file for colors. All colors are defined here and components use these variables. This ensures consistency while making color changes easier to implement.

## Font Sizes

I missed Tailwind's practical classes like text-lg, but created a similar system with my own variables. Now I define font sizes in rem units using a consistent scale.

## Utility Classes

I created utility classes for styles used across multiple components. For example, I adopted Tailwind's .sr-only class for screen reader-only elements. I try to keep these classes to a minimum.

## Base Styles

I keep global base styles to a minimum. Currently only section and a tags have some base styles. I plan to move commonly used styles here over time.

## Spacing Management

I haven't yet established a definitive system for padding and margin management. I'm trying to develop a more principled approach rather than using random values like in Tailwind.

## Conclusions and Takeaways

Transitioning from Tailwind to vanilla CSS improved my CSS architecture skills. The component-based approach and creating central management systems make code more maintainable. This process helped me better understand CSS fundamentals.

## Sources covering this story

- https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/ — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._