Fri Apr 10 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Tailwind v4 as a design system

tailwinddesign

Author

Alex de Borba

Tailwind v4 encourages you to treat @theme as the contract between design and markup. Semantic names like surface, text, and accent age better than dozens of raw hex values scattered through JSX.

Practical tips

1. Prefer OKLCH for ramps that work in light and dark.
2. Keep one prose layer for MDX so long articles stay readable.
3. Reach for motion for hover and route transitions, but default to prefers-reduced-motion.

Good systems feel boring. That is a feature.