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)`. JavaScript config files are replaced by these CSS directives.

Define a custom variant with `@custom-variant dark (&:where(.dark, .dark *))`, then override token values inside a `.dark` class rule. Toggle the `dark` class on the root element, optionally driven by a React ThemeProvider using localStorage and prefers-color-scheme.

Key changes include replacing `tailwind.config.ts` with `@theme`, swapping `@tailwind` directives for `@import "tailwindcss"`, moving keyframes inside `@theme`, replacing tailwindcss-animate with native CSS animations, and using `size-*` utilities instead of separate width and height classes.

Use class-variance-authority (CVA) to define base classes plus variant and size maps, then merge with a `cn` utility combining clsx and tailwind-merge. In React 19, pass `ref` as a regular prop instead of using forwardRef.

Yes, v4 introduces the `@utility` directive for defining reusable custom utilities directly in CSS, replacing v3 plugin-based approaches. You can also use `@theme inline` and `@theme static` to control how theme variables are generated.