Bug: max-w uses --spacing instead of --container

[gavar]

What version of Tailwind CSS are you using?
v4.1.4

What build tool (or framework if it abstracts the build tool) are you using?
TailwindPlay

What version of Node.js are you using?
N/A

What browser are you using?
Any

What operating system are you using?
Any

Reproduction URL
https://play.tailwindcss.com/cA87EpnMu8

@theme {
  --spacing-xs: calc(var(--spacing) * 1);
}

Describe your issue
The max-w-* utility classes currently use the --spacing-* variables for their width values. However, according to the official Tailwind documentation on max-width, these utilities are supposed to use the --container-* variables.

[philipp-spiess]

Hey! max-w-* reads from both of these namespaces (and also from --max-width-*). The --spacing-* one is considered the most-generic one that all spacing related utilities do read from too, see the implementation here: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L995

Any particular issue that you run into with this?

[gavar]

Please see the reproduction URL.
If --spacing-* is considered the most generic, then I believe the order should be the following:

'--max-width', '--container', '--spacing',

instead of

'--max-width', '--spacing', '--container'

So, if we follow the logic from most to least generic it's likely to be:

• max-width-*
• container-*
• spacing-*

Not sure if placing --spacing-* before --container-* makes sense, it basically results --container-* being completely unreachable in case if you want to have semantic spacings like --spacing-xs for gaps or similar.

[gavar]

Here's the potential workaround if someone is facing the same issue, thumbs up if you do.

@theme inline {
  --width-3xs: var(--container-3xs);
  --width-2xs: var(--container-2xs);
  --width-xs: var(--container-xs);
  --width-sm: var(--container-sm);
  --width-md: var(--container-md);
  --width-lg: var(--container-lg);
  --width-xl: var(--container-xl);
  --width-2xl: var(--container-2xl);
  --width-3xl: var(--container-3xl);
  --width-4xl: var(--container-4xl);
  --width-5xl: var(--container-5xl);
  --width-6xl: var(--container-6xl);
  --width-7xl: var(--container-7xl);

  --min-width-3xs: var(--container-3xs);
  --min-width-2xs: var(--container-2xs);
  --min-width-xs: var(--container-xs);
  --min-width-sm: var(--container-sm);
  --min-width-md: var(--container-md);
  --min-width-lg: var(--container-lg);
  --min-width-xl: var(--container-xl);
  --min-width-2xl: var(--container-2xl);
  --min-width-3xl: var(--container-3xl);
  --min-width-4xl: var(--container-4xl);
  --min-width-5xl: var(--container-5xl);
  --min-width-6xl: var(--container-6xl);
  --min-width-7xl: var(--container-7xl);

  --max-width-3xs: var(--container-3xs);
  --max-width-2xs: var(--container-2xs);
  --max-width-xs: var(--container-xs);
  --max-width-sm: var(--container-sm);
  --max-width-md: var(--container-md);
  --max-width-lg: var(--container-lg);
  --max-width-xl: var(--container-xl);
  --max-width-2xl: var(--container-2xl);
  --max-width-3xl: var(--container-3xl);
  --max-width-4xl: var(--container-4xl);
  --max-width-5xl: var(--container-5xl);
  --max-width-6xl: var(--container-6xl);
  --max-width-7xl: var(--container-7xl);
}