vite-shadcn-tailwind4

Setting up shadcn/ui with Tailwind v4 in a Vite project involves installing dependencies, configuring the Tailwind v4 plugin, updating tsconfig path references, and running the shadcn CLI to apply CSS-first configuration and component scaffolding.

Yes, you can integrate shadcn/ui into an existing Vite application. The setup applies to both new and existing projects, providing a guided workflow for optional component installation, theming, and CSS cleanup.

Prerequisites for initializing shadcn/ui in Vite include an existing Vite config, the Tailwind CSS v4 plugin installed, and a properly configured tsconfig with path references set up for component path resolution.

shadcn/ui supports Tailwind CSS v4 through a CSS-first configuration approach. This setup automates CLI initialization, applies the necessary v4 plugin settings, and handles compatibility specifically for Vite web apps.

shadcn initialization in Vite often fails if prerequisites are unmet, such as a missing Vite config, an incorrectly installed Tailwind v4 plugin, or a tsconfig file lacking proper path references for component imports.

To migrate a Vite app to Tailwind v4 and shadcn, you update dependencies, apply CSS-first configuration, update tsconfig path references, and follow the guided workflow to resolve compatibility issues and clean up legacy CSS.