tailwind-design-system

Tailwind v4 uses CSS-first configuration: import Tailwind with `@import "tailwindcss"` and define tokens inside an `@theme` block, such as `--color-primary: oklch(45% 0.2 260)`. Colors, radii, animations, and container sizes all become utilities from these variables.

Define a custom variant with `@custom-variant dark (&:where(.dark, .dark *))` and override token values inside a `.dark` class block. A React ThemeProvider toggles the class on the root element and persists the choice in localStorage.

Replace `tailwind.config.ts` with `@theme` blocks, swap `@tailwind` directives for `@import "tailwindcss"`, move keyframes inside `@theme`, replace the tailwindcss-animate plugin with native CSS animations, and use `size-*` utilities instead of separate width and height.

Yes. React 19 passes ref as a regular prop, so components no longer need `forwardRef`. The patterns combine ref props with CVA variants and the `cn` utility built from clsx and tailwind-merge.

Use `@utility` for reusable CSS utilities like text gradients or decorative lines that should behave like native Tailwind classes. Use CVA component variants when styles map to props such as size or variant on a React component.