tailwind-design-system

# Tailwind CSS & shadcn/ui Design System ## Overview Expert guide for creating and managing a centralized Design System using Tailwind CSS (v4.1+) and shadcn/ui. This skill provides structured workflows for defining design tokens, configuring themes with CSS variables, and building a consistent UI component library based on shadcn/ui primitives. **Relationship with other skills:** - **tailwind-css-patterns** covers utility-first styling, responsive design, and general Tailwind CSS usage - **shadcn-ui** covers individual component installation, configuration, and implementation - **This skill** focuses on the **system-level** orchestration: design tokens, theming infrastructure, component wrapping patterns, and ensuring consistency across the entire application ## When to Use - Setting up a new design system from scratch with Tailwind CSS and shadcn/ui - Defining design tokens (colors, typography, spacing, radius, shadows) as CSS variables - Configuring `globals.css` with a centralized theming system (light/dark mode) - Wrapping shadcn/ui components into design system primitives with enforced constraints - Building a token-driven component library for consistent UI - Migrating from a JavaScript-based Tailwind config to CSS-first configuration (v4.1+) - Establishing color palettes with oklch format for perceptual uniformity - Creating multi-theme support beyond light/dark (e.g., brand themes) ## Instructions ### Step 1: Initialize Design System Configuration Run these c...