tailwind-v4-shadcn

To migrate from Tailwind v3 to v4, remove tailwind.config.ts, update components.json to use an empty config, apply the Vite tailwind plugin, and remap semantic color tokens using @theme inline mappings in your index.css.

Tailwind v4 dark mode issues often stem from missing .dark overrides or incorrect CSS variable definitions. Define root-level hsl() wrappers and use a ThemeProvider to persist preferences and prevent flash-of-unstyled-theme errors.

Configure CSS variables by defining them at the root level with hsl() wrappers, mapping them through @theme inline, and applying a single @layer base to avoid double-wrapping and duplicate layer conflicts.

Yes, you must remove tailwind.config.ts for production compatibility. Tailwind v4 uses the Vite plugin and components.json with an empty tailwind config instead of the traditional configuration file.

The best setup uses the Vite tailwind plugin, removes tailwind.config.ts, configures components.json, and establishes root-level CSS variables with @theme inline mappings for reliable theming architecture and dark mode support.

Yes, by implementing a ThemeProvider pattern with proper root-level CSS variables and .dark overrides, you can persist user preferences and avoid flash-of-unstyled-theme issues during dark mode initialization.