tailwind-design-system

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

Set darkMode to "class" in tailwind.config, define dark theme CSS variables under a .dark selector, and toggle the class on the document root. A ThemeProvider with localStorage persistence and a useTheme hook manages light, dark, and system preferences.

Semantic tokens like primary or muted map to CSS variables and express purpose, while utilities like blue-500 hardcode specific colors. Semantic tokens enable runtime theming and dark mode by swapping variable values instead of changing classes.

Yes, CVA is the standard variant system used by shadcn/ui components built on Radix primitives. You compose CVA variant classes with Radix components like Dialog, adding data-state animation classes from tailwindcss-animate.

Arbitrary values like w-[347px] bypass the theme and fragment consistency across components. Extend the Tailwind theme configuration with tokens instead so spacing, colors, and radii stay standardized and themeable.