Tailwind CSS v4

Style with utility classes only, and prefer v4 utilities over v3 idioms and hand-written CSS.

Design tokens (theme-safe)

Every color, background, and border class uses a semantic token so theme and dark-mode switching stays automatic. Reach for a token, never a literal like bg-white or bg-blue-500:

• Backgrounds — bg-background, bg-card, bg-muted, bg-popover
• Text — text-foreground, text-muted-foreground, text-card-foreground
• Borders — border-border, border-input, border-ring
• Actions — bg-primary text-primary-foreground, bg-secondary text-secondary-foreground
• States — bg-destructive text-destructive-foreground, bg-accent text-accent-foreground
• Shades — tune with the opacity modifier (bg-primary/90), not a new color.

Class conventions