tailwind-v4-shadcn

To set up Tailwind v4 with shadcn/ui in Vite, you install the Tailwind v4 package and Vite plugin, initialize shadcn/ui with CSS variables enabled, and configure a CSS-first architecture using an empty tailwind.config.ts file.

The CSS-first architecture for Tailwind v4 replaces legacy JavaScript configurations by mapping semantic color tokens directly in CSS using @theme inline directives within a single base layer configuration.

Yes, you can migrate existing React projects from Tailwind v3 to v4 using this CSS-first approach, which provides guidance for moving legacy configurations to semantic color tokens and an empty tailwind.config.ts workflow.

To configure dark mode with Tailwind v4 and shadcn/ui, you implement a ThemeProvider to wrap your App and use CSS-variable-based semantic tokens to enable automatic theme switching.

Yes, an empty tailwind.config.ts file is required for the Tailwind v4 shadcn/ui setup because the configuration is enforced through a CSS-variable-based workflow with @theme inline mappings instead of JavaScript objects.

Using semantic color tokens in Tailwind v4 requires adhering to a strict CSS-first workflow with @theme inline mappings, meaning any legacy JavaScript-based theme configurations must be fully migrated to the single base layer CSS configuration.