skills.rest
justinlevinedotme
justinlevinedotmeCOMMUNITY
Explore all skills by this author →
GitHub

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

7|2|Updated Jan 18, 2026
Search Tags:#typescript#config#vite#tailwind#shadcn#ui-setup#project-bootstrap
One-click install
npx skills add https://github.com/justinlevinedotme/jalco-opencode --skill vite-shadcn-tailwind4-justinlevinedotme
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite-shadcn-tailwind4
Source: https://github.com/justinlevinedotme/jalco-opencode/tree/main/opencode/.config/opencode/skills/vite-shadcn-tailwind4
Command: npx skills add https://github.com/justinlevinedotme/jalco-opencode --skill vite-shadcn-tailwind4-justinlevinedotme

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Initialize shadcn/ui + Tailwind CSS v4 in Vite projects, streamlining setup and configuration.

Core Features & Use Cases

  • Automates Vite project scaffold with shadcn UI components and Tailwind v4 integration.
  • Validates and configures tsconfig references, Tailwind plugin, and CSS entry points for a smooth dev experience.
  • Use Case: Start a new Vite + React + shadcn project and get a working UI kit with styled components immediately.

Quick Start

Initialize a Vite project with shadcn/ui and Tailwind v4, install dependencies, configure Tailwind, and verify components render.

Frequently Asked Questions about vite-shadcn-tailwind4

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up shadcn/ui with Tailwind v4 in a Vite project?▼

Setting up shadcn/ui with Tailwind v4 in Vite involves initializing the project, installing dependencies, and configuring the Vite config, Tailwind plugin, and tsconfig path references to establish a scalable UI toolkit with custom tokens.

Can I add shadcn UI components to an existing Vite app?▼

Yes, you can add shadcn UI to existing Vite apps. The setup validates and configures your existing tsconfig references, Tailwind v4 plugin, and CSS entry points to ensure proper component installation and a consistent UI framework.

What TypeScript configuration is needed for shadcn/ui in Vite?▼

Shadcn/ui in Vite requires a tsconfig with path references configured. This enables proper component installation by ensuring the TypeScript compiler can resolve UI kit imports correctly within your Vite project structure.

Does shadcn/ui work with Tailwind CSS v4?▼

Shadcn/ui works with Tailwind CSS v4. Configuring them together in Vite requires updating the Tailwind plugin and CSS entry points to support the latest styling engine and custom design tokens.

Why does my shadcn UI component installation fail in Vite?▼

Shadcn UI component installation often fails in Vite when tsconfig path references are missing or incorrectly configured. Validating your Vite config, Tailwind v4 settings, and TypeScript paths resolves these import errors.

Related Skills

Explore More Software Engineering Skills→
mauriciodelriomauriciodelrio
3

vite-project-structure

Create feature-first Vite + React SPA structures with centralized routing and path aliases.

Community
Intermediate
boludo00boludo00
80

shadcn-ui

Implement shadcn/ui accessible components using Radix UI primitives for React.

Community
Intermediate
ngocp-0847ngocp-0847
1

ui-styling

Compose React UIs using shadcn/ui components with Tailwind CSS styling.

Community
Advanced
GitCoder052023GitCoder052023
1

tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui for React projects using CSS-first theming.

Community
Advanced