prefer-canonical-utilities

This rule suggests standard spellings, such as px-4 for px-[16px]. It also removes unnecessary spaces from arbitrary values, simplifies variants and modifiers, and replaces legacy Tailwind spellings. Suggestions use your active theme and custom definitions.

Within one string or one CSS @apply statement, it can combine utilities such as w-4 h-4 into size-4. Utilities must have the same variants and importance.

Theme tokens

A replacement keeps every theme token that the original utility references. For example, w-96 stays as written even when --container-sm has the same value, because the two tokens can differ after a theme change.

A fixed value becomes a token only when the choice is clear:

• A spacing multiple comes first, so w-[448px] becomes w-112, not w-md.
• A named token is used when no spacing multiple fits and it is the only match, so rounded-[8px] becomes rounded-lg.
• The value stays as written when unrelated named tokens match it. An alias of a token does not count as an unrelated token.

Reported

style("px-[16px]");prefer-canonical-utilities: replace `px-[16px]` with `px-4`

Fixed

style("px-4");

How to fix

Use the suggested form. The automatic fix applies it.

Options

pxToRem compares px values with rem values by using rootFontSize. With the default root size of 16px, px-[16px] matches px-4, which is 1rem. Turn the option off if your documents use another root size and you have not set rootFontSize.

collapse controls whether several utilities can share one replacement. It defaults to true. Set it to false to keep each utility separate.

logicalToPhysical allows logical properties to match physical properties under horizontal, left-to-right writing. It defaults to false. Enable it only when that writing mode is appropriate for your document.

preserveSpecificity defaults to true. Set it to false to allow Tailwind’s ancestor variant migrations, such as [p_&] to in-[p]. That replacement uses :where() and reduces specificity.

Rule settings