tailwind-v4-shadcn

To configure Tailwind CSS v4 with shadcn/ui, use a CSS-first setup that replaces tailwind.config.ts, defines root-level :root and .dark variables, and maps semantic color tokens via @theme inline for your React and Vite project.

Tailwind v4 dark mode breaks during migration due to missing CSS variables or duplicate base layers. Fix this by removing the old tailwind.config.ts, applying CSS-first configuration, and ensuring proper root-level :root and .dark variable mapping.

Yes, you need to remove tailwind.config.ts to use Tailwind CSS v4 features with shadcn/ui, because v4 shifts to a CSS-first configuration model using the @theme inline directive and @tailwindcss/vite plugin instead of JavaScript config files.

Fix broken color variables and missing utilities in shadcn/ui by verifying your @theme inline mapping, resolving duplicate base layers, and ensuring your ThemeProvider workflow correctly applies semantic color tokens defined in your :root and .dark CSS blocks.

The best way to set up a ThemeProvider for Tailwind v4 semantic color tokens involves defining root-level :root and .dark CSS variables, wiring up the ThemeProvider in React, and mapping these tokens through the @theme inline directive for reliable theme switching.

@tailwindcss/vite works with shadcn/ui for dark mode and theming by enabling a CSS-first configuration approach where you define semantic color tokens, map them via @theme inline, and manage theme switching through a React ThemeProvider.