tailwind-v4-shadcn

Tailwind v4 with shadcn/ui uses a four-step architecture: define CSS variables at root, map them to Tailwind utilities with @theme inline, apply base styles with @layer, and enable automatic dark mode. Follow the SKILL.md templates to initialize a Vite + React project with production-ready configuration and semantic color tokens.

Yes. Migrating to Tailwind v4 requires updating your config to use an empty tailwind.config.ts, moving CSS variables to root scope, and applying @theme mapping inline in your CSS. The Skill provides debugged templates and step-by-step guidance to ensure dark mode, color theming, and component styling work correctly after migration.

Dark mode in Tailwind v4 is enabled automatically when CSS variables are wrapped in hsl() and @theme mapping is applied. Define your semantic color tokens as CSS variables at root, use @layer to apply base styles, and the Skill's architecture ensures automatic switching without additional configuration.

Common issues stem from missing hsl() wrappers around CSS variables, incorrect @theme syntax, or misconfigured path aliases. The Skill includes production-tested templates and troubleshooting patterns for resolving dark mode failures, CSS variable mapping errors, and tw-animate-css conflicts in Vite + React setups.

No. Tailwind v4 with CSS variables uses an empty tailwind.config.ts; all configuration moves to your CSS file via @theme inline mapping. This zero-config approach reduces errors and makes your theme portable across projects while maintaining full semantic token support and dark mode functionality.

Yes. Semantic tokens are defined as CSS variables at root scope, then mapped to Tailwind utilities using @theme inline. The Skill's architecture ensures tokens like primary, secondary, and destructive integrate seamlessly with shadcn/ui components and automatic dark mode switching.