Tailwind Classname Categorization

Use this skill for long, multi-concern Tailwind className values when the project has an existing compatible classname helper. It preserves dynamic values and conflict-sensitive order; it does not sort canonical class order, format line breaks, or implement a helper.

Trigger

Use when a task works on a multi-concern Tailwind class value whose source line exceeds the project's configured line width or whose grouping clearly improves readability, even when categorization is not named explicitly. Check printWidth, max-len, or formatter settings; do not invent a numeric threshold when none is defined.

Do not use for short or single-concern class lists, generic CSS/CSS Modules, class-order-only changes, or helper implementation/refactoring.

Line width alone does not trigger this skill for a single-concern value.

Preconditions

An existing compatible helper is required: cn(), clsx(), classnames(), twMerge(), or a wrapper that accepts grouped class-value arguments. Handle cva() through its existing base/config shape and class-bearing fields; never add positional base arguments. If the helper is missing or incompatible, leave the code unchanged and report the constraint.

Workflow