Build Production-Ready Design Systems with Tailwind CSS

Provides a production Tailwind CSS design-system architecture built on a three-tier token hierarchy (brand tokens like blue-500, mapped to semantic tokens like primary, mapped to component tokens like button-bg) and a component pattern of base styles, variants, sizes, states, and overrides. Ships a working tailwind.config.ts using HSL CSS variables for semantic colors (primary, secondary, destructive, muted, accent, background, border, ring) with light and dark value sets defined in globals.css, plus six implementation patterns with runnable TypeScript and React code: CVA (class-variance-authority) components (a Button with variant and size props, spanning default, destructive, outline, secondary, ghost, and link variants), compound components (a Card family - CardHeader, CardTitle, CardDescription, CardContent, CardFooter - built with forwardRef and a shared cn class-merge utility), form components (an Input with built-in error state and ARIA attributes, wired to React Hook Form and Zod validation), a responsive grid system (CVA-driven Grid and Container components with breakpoint-aware column and gap variants), animation utilities (tailwindcss-animate fade, slide, and zoom classes composed into modal and dropdown enter and exit transitions, applied to a Radix Dialog), and dark mode (a ThemeProvider context that resolves light, dark, or system preference via matchMedia, persists the choice to localStorage, and toggles the document root class, paired with a ThemeToggle button).

Use it when creating a component library with Tailwind, implementing design tokens and theming, building responsive and accessible components, standardizing UI patterns across a codebase, migrating to or extending Tailwind CSS, or setting up dark mode and color schemes. Skip it for anything unrelated to Tailwind design systems or outside this scope.

Input is a component or theming requirement - a button variant, a card layout, a themed color, a dark-mode toggle; output is the matching CVA-based component, token definition, or provider code, ready to drop into a Next.js or React project. The utility-functions section supplies the cn class-merge helper and reusable focus-ring and disabled-state utility strings that the components build on.

Built on Tailwind CSS with class-variance-authority (CVA) for variants, clsx and tailwind-merge for class composition, Radix UI primitives (Dialog) for accessible unstyled components, React Hook Form with Zod for form validation, tailwindcss-animate for transitions, and lucide-react for icons. References the Tailwind CSS docs, CVA docs, shadcn/ui, and Radix Primitives.

Frontend engineers building or standardizing a component library on Tailwind who need concrete, accessible, dark-mode-ready components rather than raw utility classes assembled from scratch.