tailwind-v4-shadcn - Configure Tailwind v4 with shadcn/ui
Sets up Tailwind v4 with shadcn/ui using CSS variables, @theme mappings, base styles, and automatic dark mode.
Tags
Updated: 2026-10-05Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Install Tailwind dependencies
- Configure the Vite plugin
- Define theme CSS variables
- Map variables with @theme
- Configure automatic dark mode
- Diagnose common v4 errors
Inputs
- React project
- Theme requirements
- Existing Tailwind configuration
- Package manager
Outputs
- Updated package dependencies
- Updated Vite configuration
- Updated components.json
- Updated CSS theme configuration
- Dark mode setup
- Configuration guidance
Requirements
- Tailwind CSS v4
- Vite
- shadcn/ui
- @tailwindcss/vite
- tw-animate-css