shadcn-errors-tailwind-v3-v4-migration

What problem does it solve?

This skill prevents shadcn ui projects from breaking during a Tailwind CSS v3 to v4 upgrade by giving a deterministic way to detect the current Tailwind generation and apply the correct migration steps in the right order, avoiding half-migrated states that cause silent color, dark mode, animation, and focus-ring regressions.

Core Features & Use Cases

• Detects v3 vs v4 before edits using signals like tailwind.config.js presence, globals.css directives/imports, token formats (0 0% 100% vs oklch(...)), animate plugin entries, PostCSS plugin names, and component code shape (v3 forwardRef vs v4 data-slot).
• Provides a deterministic migration runbook covering codemod execution, dependency swaps, CSS rewrites (@import "tailwindcss", @theme inline, @custom-variant dark, token formatting), PostCSS/Vite integration, and required component refresh via shadcn CLI.
• Covers common anti-pattern bugs like mixed v3/v4 syntax in the same file, leaving tailwindcss-animate installed, using bg-[hsl(var(--background))] in v4, keeping ring-2 after v4, and wiring dark mode in both JS and CSS.

Quick Start

Use the shadcn-errors-tailwind-v3-v4-migration skill to migrate your project to Tailwind v4 by first running the official upgrade codemod, then swapping the animate plugin, rewriting globals.css tokens and variants, and finally re-pulling shadcn components with overwrite to eliminate silent regressions.