Summary

Julia Evans describes her journey migrating several sites away from Tailwind CSS toward semantic HTML and vanilla CSS. She explains the nine systems she's developing to structure her CSS codebase, many inspired by what Tailwind taught her. She covers resets, component-based organization, color palettes, font size variables, utility classes, base styles, spacing, responsive grid layouts, and her minimal esbuild setup. She concludes that while Tailwind was valuable for learning CSS organization, she's now skilled enough to pick and choose which constraints to keep while gaining the flexibility that vanilla CSS offers.

Key Insight

Tailwind's greatest value may be as a teaching tool — it instills CSS organization principles that eventually empower you to outgrow the framework itself.

Spicy Quotes (click to share)

• 5

  Given the choice between a pile of complete chaos and Tailwind, I was really happy to choose Tailwind.

• 4

  Every CSS code base has a bunch of different things going on (layouts! fonts! colours! common components!) and it's extremely useful to have systems or guidelines to manage each of those things, otherwise things descend into chaos.

• 3

  Tailwind has systems for some of these, and I already know those systems! Maybe I can imitate the systems I like!

• 2

  So editing the CSS for one component won't mysteriously break something in another component.

• 3

  I haven't done anything programmatic that ensures that components won't interfere with each other, but just having a convention and trying my best already feels like a big improvement.

• 4

  Ultimately Tailwind is limiting: if you want to do Weird Stuff in your CSS, it's not always possible with Tailwind.

• 3

  I still feel happy that I started using Tailwind, even if I'm moving away from it now. I learned a lot from using it and I can still use some parts from it in my sites even after deleting tailwind.min.css.

Tone

enthusiastic, reflective, practical