Vite Shadcn Tailwind4
This skill guides you through initializing Shadcn UI and Tailwind CSS v4 specifically for Vite projects. It handles TypeScript path configuration, Vite plugin setup, component installation, and dependency verification to ensure everything works together.
Vite Shadcn Tailwind4 sets up Shadcn UI with Tailwind CSS v4 in your Vite project from scratch.
AI-generated summary based on this skill's SKILL.md
Install
IgorWarzocha/Opencode-Workflows/vite-shadcn-tailwind4 · repository language: Python
git clone https://github.com/IgorWarzocha/Opencode-Workflows
cp -r Opencode-Workflows ~/.claude/skills/vite-shadcn-tailwind4generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install IgorWarzocha/Opencode-Workflows/vite-shadcn-tailwind4Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up Shadcn UI and Tailwind CSS 4 in a Vite project?
Vite Shadcn Tailwind4 guides you through initializing both libraries together. Start by creating a Vite project, then configure TypeScript paths for component imports. Install Shadcn UI via its CLI, which automatically sets up Tailwind 4 integration. Verify your vite.config.ts includes proper alias resolution and that your tailwind.config.ts is configured for v4 syntax. The skill handles dependency verification to ensure compatibility.
What is the vite shadcn tailwind4 setup process?
Vite Shadcn Tailwind4 covers the complete setup workflow: create your Vite app, configure path aliases in tsconfig.json, run the Shadcn CLI installer, and verify Tailwind 4 is properly integrated. The skill ensures your Vite plugin configuration recognizes component paths, your CSS imports work correctly, and all dependencies resolve without conflicts.
Where can I find a starter template combining Vite, Shadcn, and Tailwind 4?
Vite Shadcn Tailwind4 provides a pre-configured boilerplate approach rather than a single template file. It walks you through creating a modern React UI development environment by setting up Vite's build system, installing Shadcn components, and configuring Tailwind 4 styling. This ensures you understand each integration step rather than using a black-box template.
How do I integrate Shadcn components into my Vite project with Tailwind?
Vite Shadcn Tailwind4 explains component integration by first ensuring your Vite configuration recognizes the component alias paths. Use the Shadcn CLI to add individual components, which automatically generates them in your configured directory. Tailwind 4 styling is applied automatically; verify your CSS entry point imports the Tailwind directives and that your vite.config.ts processes CSS correctly.
How do I configure Tailwind 4 styling with Shadcn in a Vite environment?
Vite Shadcn Tailwind4 handles Tailwind 4 configuration by ensuring your tailwind.config.ts uses v4 syntax and your CSS file includes the proper @import directives. Configure your Vite CSS loader to process Tailwind, and verify the Shadcn component paths are aliased correctly so Tailwind can scan them for class usage. The skill verifies all dependencies work together seamlessly.
What does Vite Shadcn Tailwind4 help me accomplish?
Vite Shadcn Tailwind4 enables you to build modern React UIs by combining three powerful tools: Vite's fast development server, Shadcn's pre-built component library, and Tailwind 4's utility-first styling. The skill handles TypeScript path configuration, Vite plugin setup, component installation, and dependency verification so you can start building immediately without configuration friction.