tailwind-design-system

Use class-variance-authority (CVA) to define base styles plus variant and size options, then merge classes with a cn utility built on clsx and tailwind-merge. This gives type-safe props like variant="destructive" and size="lg" on a forwardRef component.

Configure darkMode: 'class' in tailwind.config, define dark theme CSS variables under a .dark selector, and use a ThemeProvider that toggles the class on the document root. Persist the choice in localStorage and support system preference via prefers-color-scheme.

Semantic tokens like primary or destructive map to CSS variables and describe purpose, while utilities like blue-500 hardcode specific colors. Semantic tokens enable runtime theming and consistent dark mode without changing component code.

Yes, the patterns style Radix primitives such as Dialog using data-state attributes with tailwindcss-animate classes for enter and exit animations. Radix provides unstyled accessible behavior while Tailwind classes control all visual styling.

Avoid CVA for one-off components with no variants, where simple conditional classes suffice. Also avoid it when a design system already provides a different variant API, since mixing approaches fragments component conventions.