tailwind-v4-shadcn

Tailwind CSS v4 colors fail when semantic tokens lack proper @theme inline mappings or root-level :root/.dark CSS variable definitions using hsl() values. Establishing a correct utility mapping layer ensures utilities like bg-background resolve properly across light and dark themes.

Dark mode switching breaks in Tailwind v4 due to misconfigured ThemeProvider wiring or missing .dark variable definitions. A reliable setup requires a ThemeProvider-backed dark mode flow and root-level CSS variables to ensure automatic theme transitions work correctly.

Setting up semantic color tokens in React Vite requires defining hsl() values in :root/.dark and mapping them through @theme inline directives. This architecture ensures consistent utilities like text-foreground function correctly across both light and dark themes.

Yes, @theme inline directives are required for shadcn/ui to work with Tailwind CSS v4. They create the correct utility mapping layer between your CSS variables and semantic color tokens, preventing common v4 initialization failures and color resolution issues.

Migrating shadcn/ui from Tailwind v3 to v4 requires updating plugin loading via @plugin directives, converting to @theme inline mappings, and ensuring root-level :root/.dark variables use hsl() values to avoid common v4 gotchas during the transition.

Without a ThemeProvider, dark mode switching in Tailwind v4 and shadcn/ui becomes unreliable. A ThemeProvider-backed dark mode flow is required to ensure theme switching works automatically and semantic colors transition correctly between light and dark states.