tailwind-v4-shadcn

To set up Tailwind v4 with shadcn/ui, follow a four-step CSS-first architecture: define CSS variables at root, map them to Tailwind utilities using @theme inline, apply base styles, and enable automatic dark mode.

Dark mode integration uses a ThemeProvider and CSS variables to enable automatic dark mode. By defining semantic colors at the root and mapping them through @theme inline, the theme switches seamlessly without manual utility class toggling.

The best way to configure semantic colors is using a CSS-first approach with @theme inline. This method maps CSS variables to generate semantic utility classes like bg-background and text-foreground directly within your stylesheet.

Tailwind v4 migration breaks existing styles because v4 shifts to a CSS-first configuration model. Avoid common pitfalls by adopting the @theme inline directive and redefining your design tokens using CSS variables instead of a JavaScript config file.

No, you do not need a JavaScript configuration file. Tailwind v4 uses a CSS-first configuration approach where you define variables and map them to utilities directly within your CSS using @theme inline.

Yes, you can use Vite to streamline project initialization. The setup applies to Vite environments by applying the CSS-first pattern, defining base styles, and integrating the ThemeProvider for reliable React project theming.