tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui by defining CSS variables at the root, mapping them to Tailwind using the @theme inline directive, applying base styles, and relying on automatic dark mode via a ThemeProvider.

Migrate React and Vite projects from Tailwind v3 to v4 by installing the Vite plugin, enforcing the removal of tailwind.config.ts, and applying a four-step CSS-variable theming architecture to preserve semantic design tokens.

Yes, Tailwind v4 setups with shadcn/ui require removing tailwind.config.ts and using the Vite plugin, shifting your configuration directly into CSS to properly manage design tokens and automatic dark mode.

Broken shadcn/ui theme colors and tw-animate-css references after upgrading to Tailwind v4 typically stem from incorrect CSS variable mapping, which this Skill resolves through its production-ready four-step theming scaffold.

Yes, you can establish semantic theming tokens in a new React project by following a repeatable pattern that defines CSS variables and maps them to Tailwind v4, ensuring consistent design tokens across light and dark modes.

Setting up a ThemeProvider for shadcn/ui automatic dark mode involves defining CSS variables at the root, mapping them with @theme inline, and applying base styles so the Vite React project can switch themes automatically.