Community Tailwind CSS Refactoring Best Practices

Comprehensive code quality refactoring guide for Tailwind CSS applications targeting v4. Contains 50 rules across 8 categories, prioritized by migration urgency. Every transformation preserves the existing look and feel — this skill is purely about cleaner code, modern syntax, and v4 compatibility.

Companion skills: Use tailwind-ui-refactor for visual design improvements and tailwind-responsive-ui for responsive layout patterns.

When to Apply

Before manual migration: Run npx @tailwindcss/upgrade first — it handles most configuration and renamed utility changes automatically. Then use this skill for patterns the automated tool does not cover.

Reference these guidelines when:

• Migrating a project from Tailwind CSS v3 to v4
• Cleaning up deprecated or renamed utility classes
• Consolidating verbose multi-class patterns
• Replacing arbitrary values with design tokens
• Removing @apply overuse in CSS files
• Modernizing syntax to v4 conventions

Rule Categories by Priority