HN
Today

Moving away from Tailwind, and learning to structure my CSS

Julia Evans chronicles her journey of migrating several websites from Tailwind CSS to a more semantic HTML and vanilla CSS approach, sharing a new structured methodology she's developed. This technical deep dive offers practical lessons learned from applying Tailwind's principles to custom CSS. Her insights resonate with developers seeking greater control and understanding of their frontend stack, tapping into the perennial debate around framework reliance versus native implementations.

21
Score
2
Comments
#3
Highest Rank
16h
on Front Page
First Seen
May 16, 1:00 PM
Last Seen
May 17, 4:00 AM
Rank Over Time
15753477765107681111

The Lowdown

Julia Evans, a respected technical blogger, details her decision to move away from Tailwind CSS after eight years, opting instead for a system built on semantic HTML and vanilla CSS. She describes this migration as both fun and enlightening, explaining her motivations for the shift while highlighting the valuable lessons Tailwind initially provided.

  • Tailwind's Enduring Influence: Evans acknowledges that Tailwind was instrumental in teaching her the importance of structured systems for CSS, such as managing resets, color palettes, and font scales. She now aims to re-implement these concepts with vanilla CSS.
  • Structured CSS Components: Her new approach emphasizes organizing CSS by distinct components, each with unique classes and isolated CSS files, ensuring changes to one component don't inadvertently affect others.
  • Systematized Styles: She outlines specific strategies for various CSS aspects: copying Tailwind's 'Preflight' for resets, defining all colors in a central colors.css using variables, and creating a font-sizing system with variables mirroring Tailwind's scale.
  • Minimal Base & Utilities: Evans advocates for a very small 'base' CSS for site-wide styles, allowing it to grow organically from identified commonalities, and keeps a limited set of global utility classes.
  • Principled Spacing: She is developing a more deliberate strategy for spacing, primarily through parent components and selectors like the 'owl selector,' moving away from ad-hoc padding and margins.
  • Responsive Design with Grid: A key shift involves embracing CSS Grid for responsive layouts, utilizing features like auto-fit with minmax and grid-template-areas to reduce the need for numerous media queries, a capability she finds less intuitive with Tailwind.
  • Simplified Build System: With modern CSS features like @import and nested selectors, she notes that a complex build system isn't strictly necessary for development, though esbuild can efficiently bundle CSS for production.
  • Reasons for Departure: Her decision was driven by factors such as Tailwind's increasing reliance on build systems (leading her to stick with v2), the large file sizes of unoptimized Tailwind, her own improved CSS proficiency, Tailwind's limitations for custom or 'weird' styling, maintenance issues with mixed projects, and a desire to explore semantic HTML.
  • Future Explorations: Evans expresses curiosity about advanced CSS features like @layer, @scope, container queries, and subgrid, which she plans to explore further.

Ultimately, Evans reflects positively on her initial adoption of Tailwind, recognizing its educational value. She concludes that her current migration allows her to build more tailored and maintainable CSS systems, integrating the best practices she assimilated during her time with the framework.