tailwind-v4-shadcn - Set up Tailwind CSS v4 with shadcn/ui
Configure Tailwind CSS v4 with shadcn/ui, Vite, and React, including CSS variables, semantic colors, dark mode, plugins, and troubleshooting.
Tags
Updated: 2026-09-29Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Install Tailwind dependencies
- Configure the Vite plugin
- Set up shadcn/ui
- Define CSS color variables
- Map variables with @theme inline
- Configure dark mode
- Apply semantic color tokens
- Troubleshoot theme issues
- Configure Tailwind plugins
Inputs
- React project
- Vite project files
- Package manager
- Theme requirements
- Color definitions
Outputs
- Updated package dependencies
- Updated vite.config.ts
- Updated components.json
- Updated CSS theme variables
- ThemeProvider integration
- Dark mode theme switching
- Configured Tailwind utilities
Requirements
- React and Vite environment
- TypeScript support
- Node package manager
- File system access
- Permission to install dependencies