tailwind-design-system

Tailwind v4 uses CSS-first configuration: replace the JS config with `@import "tailwindcss"` and define tokens inside an `@theme` block, such as `--color-primary: oklch(45% 0.2 260)`. Keyframes can also live inside `@theme` so they are emitted with the theme.

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

Key changes include replacing `tailwind.config.ts` with `@theme` in CSS, using `@import "tailwindcss"` instead of `@tailwind` directives, class dark mode via `@custom-variant`, native CSS animations instead of tailwindcss-animate, and the `size-*` utility replacing paired width/height classes.

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

Yes. Define reusable custom utilities with the `@utility` directive, and configure container query breakpoints with `--container-*` tokens inside `@theme`. You can also clear default palettes using namespace overrides like `--color-*: initial`.