Configures shadcn/ui components with a modern Tailwind CSS v4 CSS-first architecture for React and Next.js.
This skill automates the complex process of setting up shadcn/ui using the latest Tailwind CSS v4 standards. It solves the common issue where AI assistants and older CLIs generate deprecated Tailwind v3 configuration files. By enforcing a CSS-first approach via the @theme block, the skill ensures your project stays performant and maintainable. It handles dependency installation, theme token configuration, utility function creation, and can bulk-install essential UI components, making it an indispensable tool for bootstrapping professional frontend projects.
주요 기능
01Tailwind CSS v4 CSS-first configuration without deprecated JS config files
0210 GitHub stars
03Full compatibility with both Next.js App Router and Pages Router
04Built-in validation to ensure proper CSS structure and theme token mapping
05Support for 13+ predefined color themes including Zinc, Slate, and Stone
06Automated installation of core dependencies like Lucide React and CVA
사용 사례
01Migrating an existing shadcn/ui codebase from Tailwind v3 to the v4 engine
02Initializing a new Next.js or React project with a production-ready component library
03Rapidly scaffolding complex UI sections like dashboards, forms, or landing pages
