Moving away from Tailwind, and learning to structure my CSS(jvns.ca)

10 pointsby surprisetalkقبل شهرين1 comments

Moving away from Tailwind, and learning to structure my CSS

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

1 comments

wonger_قبل شهرين

Good ideas. It's nice to hear a non-frontender's perspective.

For font sizing and spacing, I always recommend https://utopia.fyi. It generates CSS variables like:

  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);

  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);

that you can copy-paste across projects. Note this is not a fixed scale (1em 2em 4em), but it grows with viewport size, so bigger screens can have bigger text and looser margins. No more breakpoints; only choose min and max supported viewports, and the rest is interpolated.

I do wonder about interpolating line heights, though. Does anyone who uses utopia.fyi have a good way to manage that?

Re organizing spacing and layout rules, I still struggle with that. One day I'd like to see what https://every-layout.dev/ recommends.