tailwind-v4-shadcn

To migrate shadcn/ui to Tailwind v4, adopt a CSS-first configuration using @theme inline, remove the empty tailwind.config.ts file, and rely on the @tailwindcss/vite plugin for your React project setup.

The CSS-first theming architecture in Tailwind v4 replaces JavaScript configuration files by defining semantic color tokens and design variables directly in CSS using the @theme inline directive.

Yes, Tailwind v4 works with shadcn/ui dark mode by implementing a ThemeProvider and a CSS variable strategy that automatically adapts the UI to light and dark modes with system support.

Yes, you can use Tailwind v4 and shadcn/ui with Vite and Next.js projects by installing the @tailwindcss/vite plugin, initializing shadcn, and configuring components.json for scaffolding.

Yes, when moving to Tailwind v4 with shadcn/ui, you need to remove the empty tailwind.config.ts file because the framework now uses a CSS-based configuration via @theme inline.

Tailwind v4 semantic color tokens may fail if you retain the old JavaScript configuration instead of using @theme inline, or if the ThemeProvider is not properly wrapping your React application.