Julia Evans, a developer and creator of educational 'Wizard Zines,' has migrated several of her personal websites from Tailwind CSS to semantic HTML and vanilla CSS over the past week. In a blog post published on May 15, 2026, Evans detailed her transition away from Tailwind, a utility-first CSS framework she had used since discovering it eight years ago, citing a desire to adopt more structured and maintainable CSS practices.
Evans, who is not a full-time frontend developer, admitted that her initial adoption of Tailwind in 2018 stemmed from a lack of knowledge about structuring CSS. At the time, she viewed Tailwind as a preferable alternative to 'a pile of complete chaos.' The framework enabled her to build numerous small websites efficiently. However, her recent migration reflects a shift toward more intentional CSS organization, driven by a desire to better understand and control her codebase.
In her blog post, Evans acknowledged that Tailwind had inadvertently taught her valuable lessons about CSS structure. She noted that every CSS codebase involves managing multiple elements, such as layouts, fonts, and colors, and that systems or guidelines are essential to prevent chaos. Tailwind provided built-in systems for some of these elements, including a reset stylesheet, a predefined color palette, and a font scale, which Evans now seeks to replicate or adapt in her vanilla CSS approach.
Evans outlined nine key aspects of her new CSS codebase structure, drawing inspiration from both Tailwind and other modern CSS practices. These include a reset stylesheet, component-based organization, color management, font sizing, utility classes, base styles, spacing, responsive design, and the build system. She emphasized that some of these systems, such as the reset and color palette, were directly copied from Tailwind, while others were adapted or developed independently.
For the reset stylesheet, Evans directly copied Tailwind’s 'preflight' styles, which she found integral to her workflow. She highlighted specific features, such as `box-sizing: border-box` being applied to all elements, which ensures that an element’s width includes its padding. Evans noted that she had grown accustomed to these reset styles over time, including subtle defaults like `html {line-height: 1.5;}`, and that removing them would require significant adjustment.
The bulk of Evans’ new CSS approach focuses on component-based organization, inspired by frameworks like Vue or React. She structured her CSS so that each 'component' has a unique class, with its own dedicated CSS file. This method ensures that the CSS for one component does not override another, reducing the risk of unintended side effects. Evans estimated that 80% of the CSS she would need to edit resides in these component files, making maintenance more manageable.
Evans provided an example of her component-based approach using a `.zine` class, which could represent a reusable figure element in her HTML. The CSS for this component includes nested selectors for variations like `.horizontal` or `.vertical`, as well as hover states. This structure allows her to isolate and edit styles for specific components without affecting others, simplifying the debugging and development process.
Despite her shift away from Tailwind, Evans did not adopt programmatic solutions like web components or the `@scope` CSS rule. Instead, she relied on manual organization and naming conventions to maintain clarity. Her approach reflects a preference for simplicity and control, prioritizing maintainability over automation. The blog post serves as both a personal reflection and a resource for other developers considering a similar transition.