Tailwind v4 is the biggest leap since v3. The biggest unlock isn't performance — it's that you can finally ship a real design system without a tailwind.config.js.
Here's the architecture we use on every Mehedi project.
CSS-first @theme
Everything lives in globals.css. The @theme block defines tokens that Tailwind compiles into utility classes. No JS config, no plugins for color manipulation, no PostCSS dance.
OKLCH color system, not hex
OKLCH is perceptually uniform. Equal lightness steps look equal. Mixing colors works correctly. Dark-mode variants are predictable. We define one primary color in light mode (oklch(58% 0.22 280)) and shift only the L channel in dark mode (oklch(72% 0.22 285)) — chroma and hue stay constant.
@utility for compound patterns
Custom utilities like .glass, .text-gradient, .grid-bg and .bg-mesh are defined with @utility. They compose into Tailwind's classlist as if they were built-in.
Light glassmorphism, not heavy
Glassmorphism is overused. We use it for the navbar pill, premium card hovers and the final-CTA shell — that's it. Light blur (14-20px), saturated backdrop (160-180%), 1px border at 90% opacity. Anything more screams 2021.
Aurora gradients on a 200% canvas
The signature Mehedi gradient is a 135deg three-stop OKLCH gradient (violet → cyan → amber) painted on a 200% background-size canvas and animated with background-position. The result feels alive without being distracting.
The one rule
Premium feels like restraint. Build a strong system, then use 10% of what it can do. The most premium sites we ship use 4 colors, 3 type sizes and 2 motion patterns.