Analyze a Tailwind CSS v3 project and generate a complete migration plan to v4. Scans config, CSS, and template files for v3 patterns and produces a prioritized checklist with exact find-and-replace commands.
Use this skill when:
Read the project's package.json to identify installed Tailwind version and related packages (tailwindcss, autoprefixer, postcss-import, @tailwindcss/typography, @tailwindcss/forms, @tailwindcss/container-queries)
Read the CSS entry point file (usually src/index.css, src/app.css, src/globals.css, or styles/globals.css) and check for @tailwind directives vs @import "tailwindcss"
Check for tailwind.config.js or and read its contents. Note: theme customizations, plugins, content paths, and any advanced config (safelist, corePlugins, separator)
tailwind.config.tsRead postcss.config.js, postcss.config.mjs, or postcss.config.cjs if it exists
Read vite.config.ts, vite.config.js, or the equivalent build tool config
Search template files (.html, .jsx, .tsx, .vue, .svelte, .blade.php, .erb) for these v3 patterns:
bg-opacity-, text-opacity-, border-opacity-, ring-opacity-, divide-opacity-, placeholder-opacity-shadow-sm (will need rename to shadow-xs)blur-sm (will need rename to blur-xs)rounded-sm (will need rename to rounded-xs)outline-none (will need rename to outline-hidden)overflow-ellipsis (will need rename to text-ellipsis)flex-grow, flex-shrink (will need rename to grow, shrink)transform (the transform class prefix, no longer needed)! at the beginning of utility classes (needs to move to end)[-- for arbitrary CSS variable syntax (needs to become (--)Check browser support requirements. v4 requires Safari 16.4+, Chrome 111+, Firefox 128+. If the project needs older browser support, warn that migration may not be appropriate.
Generate a migration report with:
@theme, what @config bridge is neededOffer to run the automated upgrade tool first:
npx @tailwindcss/upgrade
Then review what it changed and handle remaining manual fixes.
Consult the migration checklist in the references directory for completeness.