tailwind-v4-shadcn

Set up Tailwind v4 with shadcn/ui by initializing CSS variables in your root stylesheet, configuring the @theme directive for semantic tokens, and installing shadcn/ui components via the CLI. Ensure your build tool (Vite or Next.js) processes the new v4 syntax correctly, and remove legacy tailwind.config.ts if migrating from v3.

Yes. Tailwind v4 supports dark mode through CSS variables mapped to :root and .dark selectors. Define semantic tokens as CSS variables in your stylesheet, then reference them in component styles. This approach enables theme switching without rebuilding and integrates seamlessly with shadcn/ui's theming system.

Migrate from Tailwind v3 to v4 by converting your tailwind.config.ts to @theme directives in CSS, updating CSS variable syntax, and loading plugins via @plugin instead of the config file. Test shadcn/ui components for style compatibility, ensure dark mode CSS variables are properly scoped, and verify Vite or Next.js processes the new format.

Load Tailwind v4 plugins using the @plugin directive in your main CSS file rather than the config object. This approach works with shadcn/ui's component system and integrates official plugins cleanly without conflicts. Remove plugin references from legacy config files to avoid duplication.

Yes. Define semantic tokens as CSS variables (e.g., --primary, --secondary) in your @theme block, then reference them in shadcn/ui component styles. This enables consistent theming across all components, supports dark mode switching, and centralizes color management without modifying component source code.

Common causes include incorrect CSS variable scoping (ensure :root and .dark selectors are defined), missing @plugin directives for official plugins, or incompatible Vite/React build configuration. Verify your build tool processes Tailwind v4 syntax, check that shadcn/ui components reference the correct CSS variables, and confirm dark mode detection logic is working.