tailwind-v3-to-v4-migration
SolidMigrate a project from Tailwind CSS v3 to v4 safely and completely. Runs the official `@tailwindcss/upgrade` codemod, then drives the judgment the codemod can't: reconciling dependencies and PostCSS/Vite/CLI plumbing, porting JS config to CSS-first `@theme` (or keeping it via `@config`), auditing the v4 changed-defaults that silently alter appearance (border/ring/placeholder/cursor/dialog/hover) and applying compat shims, sweeping for renamed/removed utilities, and proving the migration is a visual no-op. Framework-agnostic (Next.js, Vite, Tailwind CLI, plain PostCSS; Vue/Svelte/Astro/CSS-module caveats). USE FOR: upgrading Tailwind 3 to 4, "tailwind v4 migration", `@tailwind` directives error, `@tailwindcss/postcss` setup, tailwind.config.js to CSS @theme, shadow-sm/rounded/ring/ outline-none renames, bg-gradient-to to bg-linear-to. Activate only when an existing Tailwind v3 install is being upgraded. DO NOT USE FOR: setting up Tailwind v4 in a fresh project (no v3 present), downgrading v4→v3, building a new
Install
Quality Score: 85/100
Skill Content
Details
- Author
- a-tokyo
- Repository
- a-tokyo/agent-skills
- Created
- 3 months ago
- Last Updated
- yesterday
- Language
- JavaScript
- License
- MIT
Integrates with
Bundled in these plugins
Similar Skills
Semantically similar based on skill content — not just same category
tailwind-patterns
Tailwind CSS v4 patterns, CSS-first config via @theme directive, v3-vs-v4 deltas, variant rules, and anti-patterns. Use whenever the project contains `tailwind.config.js`, `tailwind.config.ts`, `@import "tailwindcss"` in CSS, `@tailwindcss/postcss` or `@tailwindcss/vite` in `package.json` dependencies, OR the user asks about Tailwind, utility classes, CSS, styling in a Tailwind project, @theme, @apply, design tokens, dark mode strategy, or any work touching CSS class names or theme configuration, even if Tailwind is not mentioned by name.
tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.