tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui by replacing tailwind.config.ts with a CSS-first theming approach using @theme inline. This setup guides you through a four-step architecture covering root CSS variables, theme mapping, base styles, and dark mode.

The CSS-first theming approach for Tailwind v4 uses CSS variables and the @theme inline mapping to define semantic tokens. This enables automatic dark mode and consistent theme-aware UI without relying on a traditional JavaScript configuration file.

Tailwind v4 dark mode issues with shadcn often stem from missing @theme inline mapping or incorrect base styles. Implementing a ThemeProvider with .dark class-based toggling ensures automatic color switching and resolves missing semantic token mappings.

No server changes are required beyond the standard Vite and React setup. The migration focuses on frontend configuration, specifically replacing the Tailwind config file with CSS-first theming and migrating tw-animate-css for component animations.

Yes, this setup streamlines upgrading large codebases by providing a consistent, theme-aware UI architecture. It specifically handles migration from v3, addressing config changes and component wiring to ensure consistent semantic colors across the project.