Utility Soup : Diagnosis and Refactor

"Utility soup" describes a Tailwind element with so many utility classes that the line wraps multiple times and the reader cannot parse it. It is a symptom, not always a bug. This skill teaches when to leave it, when to extract, and how to keep order stable with tooling.

ALWAYS apply the 3-use rule : extract on the THIRD copy of a pattern, not the first. Premature extraction is worse than long class lists.

Companion skills :

• tailwind-impl-apply-directive : @apply + @layer semantics
• tailwind-core-philosophy : utility-first design principles
• tailwind-impl-config-v4 : v4 CSS-first config surface

Quick Reference