tailwind-v4-shadcn

To configure Tailwind v4 with shadcn/ui, you map CSS variables via @theme inline and integrate a ThemeProvider to manage dark mode. This production-tested setup uses a four-step architecture focusing on root variables, inline mappings, base layer composition, and automatic dark mode behavior.

The best way to set up dark mode in Tailwind v4 and shadcn/ui is by implementing a ThemeProvider within your React application. This provider manages the theme state and works with your CSS variable mappings to enable automatic dark mode behavior across your components.

Yes, shadcn/ui works with Tailwind v4 using Vite as the bundler. This Skill provides production-ready architecture guidance specifically for modern front-end workflows using Vite, ensuring proper plugin directives and CSS variable mappings are configured correctly.

Your Tailwind v4 theme may not apply correctly to shadcn/ui components if CSS variables are not mapped properly using @theme inline. Correct configuration requires defining variables at the root, applying inline mappings, and composing the base layer correctly to resolve common theming gotchas.

To migrate an existing shadcn/ui project to Tailwind v4, follow the four-step architecture to update your CSS variable mappings using @theme inline. This approach provides clear migration guidance for updating plugin directives and resolving common configuration gotchas.