tailwind-v4-shadcn

To set up Tailwind v4 with shadcn/ui theming, you wire CSS variables to Tailwind utilities using a four-step architecture: root variables, @theme inline mappings, base styles, and dark mode. This applies to React and Vite projects.

The best way to configure dark mode involves integrating a ThemeProvider to toggle light, dark, and system themes with persistence. This dark mode workflow relies on mapping root CSS variables to Tailwind utilities.

Yes, shadcn/ui works with Tailwind v4 by enforcing a CSS-first configuration. This approach prevents common v3 mistakes by applying a four-step architecture that maps semantic colors directly via CSS variables.

You map CSS variables to Tailwind utilities using the @theme inline directive. This step is part of a four-step theming pattern that ensures consistent semantic colors across your React components.

Tailwind v3 configurations break because Tailwind v4 enforces a CSS-first configuration and a specific four-step architecture. Applying the v3 approach causes mistakes; you must wire root CSS variables and @theme inline mappings instead.

Yes, you can bootstrap a Vite project using migration-safe, ready-to-copy templates. These templates provide the necessary reference docs to quickly initialize semantic colors and a built-in dark mode workflow.