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.

[philipp-spiess]

Yeah It seems like I looked at the wrong line, you're right in that --container-* is the more generic one. I still don't fully understand how this is an issue though 🤔 If you're overwriting --spacing-xs like in your example, shouldn't that enable the xs value for all spacing values? If we change the order, than the default --container-xs defined in theme.css would overwrite your custom variable here. Maybe I'm missing something?

However, according to the official Tailwind documentation on max-width, these utilities are supposed to use the --container-* variables.

Right but they do though? You can set --container-xs and it will overwrite the default: https://play.tailwindcss.com/48GZkur2SJ?file=css

[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);
}

[gavar]

@philipp-spiess any updates or comments on that?