Ditching Tailwind for vanilla CSS — and borrowing its best ideas anyway

Julia Evans documents migrating several sites off Tailwind toward semantic HTML and hand-written CSS, and finds that years of Tailwind use quietly taught her the structural concepts she now wants to replicate. The framework’s real value, in retrospect, was imposing systems on otherwise chaotic concerns: a reset, a color palette, a font scale, and consistent spacing.

Her replacement architecture keeps what worked and discards the rest. She copies Tailwind’s preflight reset wholesale, organizes styles into per-component files with unique class names that never cross-contaminate, and defines CSS custom properties for colors and a font-size scale so authoring still feels like picking from a menu rather than computing rems. Utility classes survive for cross-cutting needs like screen-reader-only text, while base styles are kept deliberately minimal.

The more interesting departures are in layout and tooling. Instead of stacking Tailwind’s responsive breakpoint prefixes, she leans on CSS grid features like auto-fit with minmax and grid-template-areas to build layouts that reflow without media queries — capabilities she notes Tailwind can’t really express. Native CSS imports and nesting eliminate the need for a dev-time build step, with esbuild bundling reserved for production.