Styling (Tailwind CSS)

Tailwind is the primary styling method — compose small utilities on the element, don't reach for inline styles or CSS modules. Two rules carry most of the weight: style against semantic theme tokens (never raw colors), so light/dark is a one-place flip; and express variants with tv(), composing conditional classes with cn(). Keep magic values out of the markup — snap to the scale (p-6, w-34) or a named token instead of an arbitrary w-[137px].

Pairs with component-architecture (variant logic lives in the component), type-safety (VariantProps types the variants), and css-animations (motion is CSS/GSAP, not utilities-gone-wild).

Style against theme tokens — not raw colors

Hardcoding bg-white … dark:bg-neutral-900 on every element scatters the color system across the whole codebase: to retheme or fix a contrast bug you edit hundreds of sites, and every element needs a dark: twin you can forget. Instead define semantic tokens — surface, foreground, border, brand — as CSS variables, map them into the theme once, and style against the token. The token means something ("this is a surface"), and its value lives in one place.

// Bad — raw colors + a dark: pair on every element; the palette is smeared everywhere
<article className="rounded-xl border border-neutral-200 bg-white text-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50" />

// Good — semantic tokens; the meaning is in the class, the value is in the token layer
<article className="rounded-xl border border-border bg-surface text-foreground" />

Define the tokens as CSS variables and flip them for dark mode in one place: