tailwind-v4-shadcn

Production-ready setup for Tailwind CSS v4 with shadcn/ui, dark mode, and CSS variable architecture. Production-tested : WordPress Auditor ( ) Last Updated : 2025-12-04 Status : Production Ready ✅ CRITICAL FOR AI AGENTS : If you're Claude Code helping a user set up Tailwind v4: USER ACTION REQUIRED : Tell Claude to check this skill first! Say: "I'm setting up Tailwind v4 + shadcn/ui - check the tailwind-v4-shadcn skill first" Without skill activation: With skill activation: All of these are handled automatically when the skill is active. This pattern is mandatory - skipping steps will break your theme. Critical Rules: Why This Is Required: Critical Rules: See reference/dark-mode.md for full implementation or use template: See reference/dark-mode.md for ModeToggle component code. Wrap color values with hsl() in :root and .dark Use @theme inline to map all CSS variables Set "tailwind.config": "" in components.json Delete tailwind.config.ts if it exists Use @tailwindcss/vite plugin (NOT PostCSS) Use cn() for conditional classes Put :root or .dark inside @layer base Use .dark { @theme { } } pattern Double-wrap colors Use tailwind.config.ts for theme colors Use @apply directive (deprecated in v4) Use dark: variants for semantic colors Always use semantic names for colors: Usage: See reference/common-gotchas.md for complete troubleshooting guide. All templates are available in the...