vite-shadcn-tailwind4

Setting up shadcn/ui with Tailwind CSS v4 in a Vite project involves configuring vite.config.ts with the Tailwind plugin, establishing CSS entry conventions for theming tokens, and defining TypeScript path aliases to enable seamless CLI operation for component scaffolding.

Configuring TypeScript path aliases for the shadcn CLI in Vite requires using a tsconfig references style setup, which ensures the CLI can correctly resolve component imports and scaffold files into the proper directory structure during installation.

Yes, you can upgrade an existing Vite app to use a shadcn design system with Tailwind v4 by modifying your existing vite.config.ts, updating PostCSS and Tailwind settings, and configuring CSS imports for the new theming tokens.

Tailwind v4 integrates with Vite using the dedicated Vite plugin rather than relying solely on traditional PostCSS configuration files; this Skill configures the necessary tailwind plugin settings within vite.config.ts to establish a consistent styling system.

The shadcn/ui CLI fails to resolve components in Vite setups when TypeScript path aliases are incorrectly configured; properly establishing tsconfig references and path aliases satisfies the CLI's resolution requirements for seamless operation.