vite-shadcn-tailwind4

Protocol for initializing shadcn/ui with Tailwind CSS v4 in a **Vite** project. This skill is Vite-specific due to: - Vite's solution-style `tsconfig.json` (references pattern) - `@tailwindcss/vite` plugin requirement - CSS entry file conventions (`src/index.css`)

For Next.js, Remix, or other frameworks, You MUST use their respective shadcn installation guides.

<question_tool>

• Batching Rule: You MUST use only for 2+ related questions; single questions use plain text.
• Syntax Constraints: header max 12 chars, labels 1-5 words, mark defaults with (Recommended).
• Purpose: Clarify component selection, style preferences, and optional AI elements before running shadcn CLI. </question_tool>

## Step 1: Verify Prerequisites Check that the project is ready: - `vite.config.ts` MUST exist. - `package.json` MUST contain `tailwindcss` (v4+) and `@tailwindcss/vite`. - TypeScript MUST be configured.

If prerequisites are missing, You MUST help the user set up Tailwind v4 first.

## Step 2: Fix TypeScript Aliases The shadcn CLI fails if paths aren't in the root `tsconfig.json`. Vite uses a solution-style config with references, but shadcn doesn't parse those.

Action: You MUST update tsconfig.json to include compilerOptions:

## Step 3: Verify Vite Config You MUST confirm `vite.config.ts` has the Tailwind plugin and path alias: ## Step 4: Initialize Shadcn You MUST instruct the user to run: ```bash npx shadcn@latest init ```

You SHOULD recommend these settings:

• Style: New York
• Base Color: Neutral or Zinc
• CSS Variables: Yes

You MUST wait for user confirmation before continuing.

## Step 5: Add Components You MUST instruct the user to run: ```bash npx shadcn@latest add ```

You SHOULD instruct them to select all components (a then Enter).

You MUST wait for user confirmation before continuing.

## Step 6: Add Extensions (Optional) If user wants AI elements, You MUST instruct them to run: ```bash npx shadcn@latest add @ai-elements/all ```

You SHOULD instruct them to answer NO to all overwrite prompts.

You MUST wait for user confirmation before continuing.

## Step 7: Install Missing Dependencies The CLI MAY miss dependencies. You MUST check `package.json` and install any missing.

Required packages:

• tw-animate-css (devDep) - v4 replacement for tailwindcss-animate
• tailwind-merge (dep) - used by cn() utility
• clsx (dep) - used by cn() utility
• class-variance-authority (dep) - used by shadcn components

You MUST run if any are missing:

## Step 8: Clean CSS for v4 Compliance You MUST rewrite `src/index.css` to match strict v4 structure:

You MUST remove these if present:

• @media (prefers-color-scheme) blocks
• Duplicate @theme blocks (keep only @theme inline)
• @config directives

## Step 9: Verify Setup You MUST run typecheck to catch any issues: ```bash npm run lint ```

You MUST fix any TypeScript errors before marking setup complete.