tailwind-v4-shadcn

To set up Tailwind v4 with shadcn/ui theming, you define root CSS variables, map them to utilities using @theme inline, apply base styles, and rely on automatic dark mode. This approach enforces a CSS-first configuration with zero tailwind.config.ts usage in React and Vite projects.

The best way to enable automatic dark mode is by replacing hardcoded color tokens with semantic CSS variables. Using a CSS-variable architecture with @theme inline mappings ensures consistent dark mode behavior without relying on v3-era tailwind.config.ts configurations.

Yes, you must remove tailwind.config.ts to enforce a CSS-first configuration in Tailwind v4. The setup relies entirely on CSS variables and @theme inline mappings, providing migration-ready guidance to shift away from v3 patterns and avoid common gotchas.

The ThemeProvider integration wraps your React application to toggle light, dark, and system themes. It ensures persistent user themes and respects system preferences by leveraging the semantic CSS variables defined in your root styles.

Semantic color tokens fail when v3-era configurations are still active. To fix this, initialize an empty tailwind.config.ts, define root CSS variables, and ensure your @theme inline mappings correctly apply base styles for automatic dark mode.