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
Decision gist · record as of 2026-02-04
Vite Shadcn Tailwind4 sets up Shadcn UI with Tailwind CSS v4 in your Vite project from scratch. 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.
Use it when
- Vite Shadcn Tailwind4 covers the complete setup workflow: create your Vite app, configure path aliases in tsconfig.json.
- Vite Shadcn Tailwind4 provides a pre-configured boilerplate approach rather than a single template file.
Install
IgorWarzocha/Opencode-Workflows/vite-shadcn-tailwind4 · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up a new Vite project with Shadcn UI and Tailwind CSS 4”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Tailwind Theme Builder guides you through establishing a fully themed Tailwind v4 project with shadcn/ui components and dark mode support. It implements a required four-step architecture using CSS variables, @theme inline mapping, and a theme provider to enable seamless light/dark switching without component rewrites.
Shadcn Setup configures shadcn/ui components with modern Tailwind v4 CSS-first setup, installing dependencies and generating the required globals.css, components.json, and utility files. It handles theme selection, component installation, and ensures proper v4 configuration without deprecated patterns.
Master modern frontend architecture for production SaaS applications using Tailwind CSS v4, shadcn/ui components, and either Next.js 15+ or Vite SPAs. This skill covers server-first design patterns, WCAG 2.1 AA accessibility, responsive layouts, and performance optimization for dashboards, data tables, and complex enterprise interfaces.
Get a battle-tested foundation for React projects using Tailwind v4 and shadcn/ui, complete with dark mode, semantic color tokens, and Vite integration. This skill covers the four-step CSS architecture, theme switching, and solutions to common v4 migration issues—all designed to eliminate setup errors and cut configuration time dramatically.
TanStack Start scaffolds production-ready full-stack applications on Cloudflare Workers from scratch, with server-side rendering, file-based routing, and integrated authentication. Every file is generated fresh—no templates or clones—using React 19, Tailwind v4, shadcn/ui, D1 databases, Drizzle ORM, and better-auth for OAuth and email/password flows.
This skill guides you through building modern frontend projects with Vite, React, and TailwindCSS v4, including proper configuration, project structure, and component patterns. It covers environment setup, TypeScript configuration pitfalls to avoid, and practical development conventions using lucide-react icons.
More skills Shadcn Ui (unlicensed) · shadcn-ui (Apache-2.0) · tailwindcss-framework-integration (MIT) · inspira-ui (MIT)