skills.rest
Immanuel-Aristotle
Immanuel-AristotleCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind-refactor

Automate Tailwind CSS v3 to v4 migration without changing visuals.

Updated Apr 27, 2026
Search Tags:#migration#refactor#tailwind#apply#v4#utility-classes
One-click install
npx skills add https://github.com/Immanuel-Aristotle/agents --skill tailwind-refactor-immanuel-aristotle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-refactor
Source: https://github.com/Immanuel-Aristotle/agents/tree/main/skills/tailwind-refactor
Command: npx skills add https://github.com/Immanuel-Aristotle/agents --skill tailwind-refactor-immanuel-aristotle

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind CSS refactoring patterns for v4 migration and anti-pattern cleanup. This skill should be used when refactoring Tailwind utility classes, migrating from v3 to v4, cleaning up deprecated utilities, consolidating verbose class patterns, or removing code smells — all without changing the visual output. Triggers on tasks involving Tailwind CSS cleanup, v4 migration, class refactoring, @apply removal, or utility modernization.

Core Features & Use Cases

  • Streamlined migration patterns for v4 compatibility.
  • Elimination of duplicated or redundant utility usage while preserving look and feel.
  • Documentation guidance and references to Tailwind v4 changes.

Quick Start

Refactor Tailwind utility usage following the patterns in this guide to achieve a clean v3-to-v4 migration without visual changes.

Frequently Asked Questions about tailwind-refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Tailwind CSS from v3 to v4 without changing visual output?▼

Tailwind v3 to v4 migration is automated by applying non-destructive transformations that clean deprecated utilities and consolidate verbose class patterns while preserving visual output. It enforces v4 naming conventions and CSS-first config migration.

What is the best way to remove excessive @apply blocks during a Tailwind refactor?▼

Removing excessive @apply blocks is handled by consolidating verbose class patterns and modernizing utility usage without altering the look and feel, ensuring a clean refactor while enforcing non-destructive transformations.

Does Tailwind v4 migration support consolidating deprecated utility classes automatically?▼

Tailwind v4 migration supports eliminating duplicated and redundant utility usage automatically, cleaning up deprecated utilities while strictly preserving visual output through non-destructive transformations.

Can I migrate Tailwind config files to the v4 CSS-first convention without breaking styles?▼

Tailwind config migration to the v4 CSS-first convention is supported alongside utility modernization, ensuring styles remain intact by enforcing non-destructive transformations throughout the refactoring process.

Why does my Tailwind refactor break the UI when updating deprecated utilities?▼

Tailwind refactoring breaks UI when transformations are destructive, whereas this approach strictly enforces non-destructive transformations to clean deprecated utilities and remove code smells while preserving visual output.

Related Skills

Explore More Software Engineering Skills→
noartemnoartem

tailwindcss-development

Apply Tailwind CSS v4 utilities for responsive design and dark mode.

Community
Intermediate
raugadhraugadh
63

tailwindcss-development

Style components with Tailwind CSS v4 utilities for responsive design and dark mode.

Community
Intermediate
laravellaravel
3.6k

tailwindcss-development

Apply Tailwind CSS v4 utilities for styling and responsive layouts.

Official
Intermediate
moughamirmoughamir

tailwind-refactor

Refactor Tailwind CSS utility classes for v4 migration while preserving visual output.

Community
Advanced