vite-shadcn-tailwind4
CommunityBootstrap shadcn/ui + Tailwind v4 in Vite.
AuthorIgorWarzocha
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a proven protocol to bootstrap shadcn/ui with Tailwind CSS v4 in a Vite project, enabling rapid UI scaffolding and a maintainable styling system from day one.
Core Features & Use Cases
- Vite-specific setup: Proper integration of Tailwind v4 with Vite, including tsconfig references style and CSS entry conventions.
- Shadcn UI installation: CLI-driven installation and component scaffolding with a ready-made design system.
- Tailwind v4 configuration: Configuring CSS imports, theming tokens, and postcss/tailwind settings for consistent styling.
- Use Case: Start a new Vite + React project with shadcn components and a Tailwind v4 setup, then iterate by adding components with minimal manual steps.
Quick Start
Initialize a Vite + React project and run through the shadcn + Tailwind v4 setup steps described in this skill to configure the project.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: vite-shadcn-tailwind4 Download link: https://github.com/IgorWarzocha/realtime-dashboard-analytics-demo/archive/main.zip#vite-shadcn-tailwind4 Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.