vite-shadcn-tailwind4

Q: How do I install vite-shadcn-tailwind4?

Run npx skills add https://github.com/igorwarzocha/opencode-workflows --skill vite-shadcn-tailwind4 in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vite-shadcn-tailwind4/ (personal) or .claude/skills/vite-shadcn-tailwind4/ (project).

by igorwarzochaFrontend & Design

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

Installs: 124
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/igorwarzocha/opencode-workflows --skill vite-shadcn-tailwind4

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads vite-shadcn-tailwind4 automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

<overview> Protocol for initializing shadcn/ui with Tailwind CSS v4 in a **Vite** project. </overview> <instructions> 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>

</instructions> <workflow> <phase name="verify-prerequisites"> ## 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. </phase>

<phase name="fix-typescript-aliases"> ## 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:

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

</phase> <phase name="verify-vite-config"> ## Step 3: Verify Vite Config You MUST confirm `vite.config.ts` has the Tailwind plugin and path alias:

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

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

</phase> <phase name="initialize-shadcn"> ## 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. </phase>

<phase name="add-components"> ## 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. </phase>

<phase name="add-extensions"> ## 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. </phase>

<phase name="install-missing-dependencies"> ## 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:

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

</phase> <phase name="clean-css"> ## Step 8: Clean CSS for v4 Compliance You MUST rewrite `src/index.css` to match strict v4 structure:

@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 </phase>

<phase name="verify-setup"> ## 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. </phase>

</workflow>

FAQ

What does the vite-shadcn-tailwind4 skill do?

How do I install vite-shadcn-tailwind4?

Run npx skills add https://github.com/igorwarzocha/opencode-workflows --skill vite-shadcn-tailwind4 in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vite-shadcn-tailwind4/ (personal) or .claude/skills/vite-shadcn-tailwind4/ (project).

Which AI agents can use vite-shadcn-tailwind4?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is vite-shadcn-tailwind4 safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains vite-shadcn-tailwind4?

It is published by igorwarzocha in igorwarzocha/opencode-workflows. It has 124 recorded installs.