Installation: Vite

Core Idea

Same three paths as Next.js (shadcn/create preset, CLI scaffold, existing project) but for Vite + React, with the manual path requiring extra Vite-specific wiring: Tailwind plugin, split tsconfig alias, and vite.config.ts alias resolution.

Key Concepts

• init -t vite: CLI scaffold; add --monorepo for monorepo setup.
• @tailwindcss/vite: Tailwind v4 Vite plugin, installed alongside tailwindcss.
• Split tsconfig: Vite splits config across tsconfig.json and tsconfig.app.json; the @/* alias must be added to both.
• vite.config.ts alias: needs @types/node plus a resolve.alias entry pointing @ at ./src, separate from the tsconfig paths (tsconfig is for the editor/TS, vite.config is for the bundler).

Code Examples

npm create vite@latest
npm install tailwindcss @tailwindcss/vite
npm install -D @types/node
npx shadcn@latest init -t vite
npx shadcn@latest add button

@import "tailwindcss";

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

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

• O que demonstra: os dois pontos que Next.js não exige: plugin do Tailwind no Vite e alias @ resolvido no bundler, não só no tsconfig.

Anti-patterns

• Adding the @/* alias only to tsconfig.json: Vite also needs it in tsconfig.app.json (editor resolution) and in vite.config.ts (actual bundler resolution) — all three, or imports break at build time even if the editor is happy.

Key Takeaways

1. Vite manual setup has one more moving part than Next.js: the bundler-level alias in vite.config.ts.
2. npm create vite@latest should use the React + TypeScript template.
3. Monorepo flow is identical to Next.js: -c apps/web on add, import from @workspace/ui/components/*.

Connects To

• installation-next: nearly identical flow, contrast for the Tailwind-plugin and alias differences.
• cli: init -t vite, add reference.