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` or `--radius-md`. JavaScript config files are replaced by these CSS declarations.

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

Key changes include replacing `@tailwind` directives with `@import "tailwindcss"`, moving colors into `@theme`, using `@custom-variant` for dark mode, placing `@keyframes` inside `@theme`, and dropping `forwardRef` since React 19 passes ref as a prop.

No. Tailwind v4 supports native CSS animations by declaring `--animate-*` tokens and `@keyframes` inside `@theme`, plus `@starting-style` for entry animations on popovers and dialogs.

Use class-variance-authority (CVA) to define base styles plus variant and size maps, then merge classes with a `cn` utility combining clsx and tailwind-merge. This gives typed props like `variant="destructive"` on a Button component.