tailwind-design-system

Tailwind v4 uses CSS-first configuration: replace the config file with `@import "tailwindcss"` and define tokens inside `@theme` blocks, such as `--color-primary: oklch(45% 0.2 260)`. Dark mode uses `@custom-variant dark (&:where(.dark, .dark *))` instead of the `darkMode` option.

Use class-variance-authority to define base styles plus variant and size maps, then merge them with a `cn` utility combining clsx and tailwind-merge. This gives type-safe props like `variant="destructive"` and `size="lg"` on React components.

Yes, but through CSS instead of config. Define `@custom-variant dark (&:where(.dark, .dark *))` in your stylesheet, then override token values inside a `.dark` class block so utilities like `bg-background` switch automatically.

Key changes include replacing `tailwind.config.ts` with `@theme` CSS blocks, swapping `@tailwind` directives for `@import "tailwindcss"`, moving keyframes inside `@theme`, using `size-*` instead of separate width/height utilities, and dropping `forwardRef` with React 19.

OKLCH provides better perceptual uniformity than HSL, so color scales and hover states look consistent across hues. Define tokens like `--color-primary: oklch(45% 0.2 260)` inside `@theme` and reference them as `bg-primary`.

Avoid arbitrary values like `bg-[#1a2b3c]` for repeated patterns; instead extend `@theme` with named tokens or create reusable custom utilities with the `@utility` directive. This keeps the design system consistent and maintainable.