vite-shadcn-tailwind4

---

name: vite-shadcn-tailwind4 description: |- Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix). Use proactively for Vite project setup, shadcn component installation, or Tailwind v4 configuration.

Examples:

• user: "Setup shadcn in my Vite project" → install deps, configure tailwind v4 CSS-first, init shadcn, verify components work
• user: "Add shadcn to existing Vite app" → check existing config, install CLI, add components.json, update CSS imports
• user: "Use Tailwind v4 with shadcn" → configure @import with @theme, remove v3 config, setup custom tokens
• user: "Create Vite + React + shadcn project" → scaffold Vite, install shadcn, configure theme, add sample components

---

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>

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

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

Copy{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Copyimport tailwindcss from "@tailwindcss/vite";
import path from "path";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

You SHOULD recommend these settings:

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

You MUST wait for user confirmation before continuing.

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

You MUST wait for user confirmation before continuing.

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

You MUST wait for user confirmation before continuing.

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:

Copynpm install tailwind-merge clsx class-variance-authority
npm install -D tw-animate-css

Copy@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* Variable mappings: --color-X: var(--X); */
}

:root {
  /* Token definitions using oklch() */
}

.dark {
  /* Dark mode tokens using oklch() */
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

You MUST remove these if present:

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

You MUST fix any TypeScript errors before marking setup complete.