tailwind-v4-shadcn

Tailwind v4 setup with shadcn/ui automates initialization, dark-mode integration, and CSS-variable theming to prevent common errors like tw-animate-css failures and duplicate @layer base rules. This Skill provides a ready-to-run configuration for Vite + React stacks in under a minute.

Tailwind v4 configuration errors include improper CSS variable mapping, missing @theme inline declarations, skipped base-style application, disabled automatic dark mode, and tw-animate-css conflicts. This Skill prevents all five by enforcing the four-step architecture: define CSS root variables, map with @theme, apply base styles, and enable automatic dark mode.

Migration from Tailwind v3 to v4 requires updating configuration patterns, CSS-variable theming, and dark-mode handling. This Skill covers the complete migration path for Vite + React projects, including resolving duplicate @layer base issues and ensuring shadcn/ui components work without errors.

Automatic dark mode with Tailwind v4 uses CSS variables mapped through @theme inline declarations and requires defining root variables, applying base styles, and enabling automatic mode in configuration. This Skill provides production-tested patterns and prevents dark-mode switching failures.

Tailwind v4 requires specific setup steps to work reliably with shadcn/ui—including CSS-variable theming, color-variable mapping, and error prevention for tw-animate-css and @layer conflicts. This Skill automates that integration so shadcn/ui components render correctly with zero configuration overhead.

Tailwind v4 shifts to a CSS-first workflow using @theme inline, root CSS variables, and automatic dark mode instead of v3's config-first approach. This Skill demonstrates the v4 architecture pattern and handles the migration from v3 configuration files and dark-mode setup.