---
title: "prefer-canonical-utilities"
description: "Suggests standard utility spellings and combines equivalent utilities."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx
style("px-[16px]");
```

> prefer-canonical-utilities: replace `px-[16px]` with `px-4`
> 
> Example:1:8

## Fixed

```tsx
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

| Preset | Severity |
| --- | --- |
| `recommended` | warn |
| `strict` | deny |
| `stylistic` | off |

| Option | Default |
| --- | --- |
| `pxToRem` | `true` |
| `collapse` | `true` |
| `logicalToPhysical` | `false` |
| `preserveSpecificity` | `true` |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/prefer-canonical-utilities/index.mdx