tailwind-v4-shadcn

Tailwind v4 theming with shadcn/ui is set up using a four-step architecture: defining root CSS variables, mapping them via @theme inline, applying unwrapped base styles, and configuring automatic dark mode. This eliminates tailwind.config.ts usage.

Automatic dark mode in Tailwind v4 and shadcn/ui works by using semantic color tokens mapped through @theme inline. These tokens switch automatically based on CSS variables, simplifying maintenance and reducing hardcoded color classes in React components.

Yes, you must remove tailwind.config.ts when migrating to Tailwind v4 with shadcn/ui. The four-step architecture enforces CSS variables and @theme inline mappings instead, preventing common migration issues and deprecated v3 patterns.

The best way to migrate shadcn/ui themes to Tailwind v4 is implementing the four-step architecture: root CSS variables, @theme inline mappings, unwrapped base styles, and automatic dark mode. This approach avoids legacy v3 pitfalls and maintains semantic color tokens.

Yes, Tailwind v4 semantic color tokens work with standard React shadcn/ui components. The four-step theming architecture ensures compatibility with shadcn/ui patterns while enabling automatic dark mode and eliminating hardcoded color classes.

Tailwind v4 shadcn/ui colors may not switch in dark mode if you are using legacy v3 configurations or missing @theme inline mappings. The four-step architecture enforces semantic color tokens and root CSS variables to ensure automatic dark mode switching.