Ensure --spacing-* variables take precedence over --container-* variables (#15180)

Fixes #15146.

This PR updates the `w-*`, `max-w-*`, `min-w-*`, and `basis-*` utilities
to make sure that `--spacing-*` values are preferred over
`--container-*` values when there is a conflict.


Given this theme configuration:

```css
@theme {
 --spacing-sm: 8px;
 --container-sm: 256px;
}
```

…utilities like `max-w-sm` will use `8px` instead of `256px` after this
change.

Users can still be explicit about the value they want to use if they've
introduced a naming collision like this by using our variable shorthand
like `max-w-(--container-sm)`.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure any necessary vendor prefixes are generated for iOS Safari, Firefox, and Chrome ([#15166](https://github.com/tailwindlabs/tailwindcss/pull/15166))
 - Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174))
 - Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179))
+- Ensure `--spacing-*` variables take precedence over `--container-*` variables ([#15180](https://github.com/tailwindlabs/tailwindcss/pull/15180))
 
 ## [4.0.0-beta.2] - 2024-11-22
 

packages/tailwindcss/src/utilities.test.ts

@@ -17025,6 +17025,40 @@ describe('spacing utilities', () => {
 
     expect(optimizeCss(compiled).trim()).toEqual('')
   })
+
+  test('--spacing-* variables take precedence over --container-* variables', async () => {
+    let { build } = await compile(css`
+      @theme {
+        --spacing-sm: 8px;
+        --container-sm: 256px;
+      }
+      @tailwind utilities;
+    `)
+    let compiled = build(['w-sm', 'max-w-sm', 'min-w-sm', 'basis-sm'])
+
+    expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
+      ":root {
+        --spacing-sm: 8px;
+        --container-sm: 256px;
+      }
+
+      .w-sm {
+        width: var(--spacing-sm);
+      }
+
+      .max-w-sm {
+        max-width: var(--spacing-sm);
+      }
+
+      .min-w-sm {
+        min-width: var(--spacing-sm);
+      }
+
+      .basis-sm {
+        flex-basis: var(--spacing-sm);
+      }"
+    `)
+  })
 })
 
 describe('custom utilities', () => {

packages/tailwindcss/src/utilities.ts

@@ -374,7 +374,7 @@ export function createUtilities(theme: Theme) {
 
   function spacingUtility(
     name: string,
-    themeNamespace: ThemeKey | ThemeKey[],
+    themeKeys: ThemeKey[],
     handle: (value: string) => AstNode[] | undefined,
     {
       supportsNegative = false,
@@ -388,7 +388,6 @@ export function createUtilities(theme: Theme) {
       utilities.static(`-${name}-px`, () => handle('-1px'))
     }
     utilities.static(`${name}-px`, () => handle('1px'))
-    let themeKeys = ([] as ThemeKey[]).concat(themeNamespace, '--spacing')
     functionalUtility(name, {
       themeKeys,
       supportsFractions,
@@ -522,7 +521,7 @@ export function createUtilities(theme: Theme) {
     staticUtility(`${name}-auto`, [[property, 'auto']])
     staticUtility(`${name}-full`, [[property, '100%']])
     staticUtility(`-${name}-full`, [[property, '-100%']])
-    spacingUtility(name, '--inset', (value) => [decl(property, value)], {
+    spacingUtility(name, ['--inset', '--spacing'], (value) => [decl(property, value)], {
       supportsNegative: true,
       supportsFractions: true,
     })
@@ -751,7 +750,7 @@ export function createUtilities(theme: Theme) {
     ['ml', 'margin-left'],
   ] as const) {
     staticUtility(`${namespace}-auto`, [[property, 'auto']])
-    spacingUtility(namespace, '--margin', (value) => [decl(property, value)], {
+    spacingUtility(namespace, ['--margin', '--spacing'], (value) => [decl(property, value)], {
       supportsNegative: true,
     })
   }
@@ -890,20 +889,20 @@ export function createUtilities(theme: Theme) {
 
   spacingUtility(
     'size',
-    ['--size'],
+    ['--size', '--spacing'],
     (value) => [decl('--tw-sort', 'size'), decl('width', value), decl('height', value)],
     {
       supportsFractions: true,
     },
   )
 
   for (let [name, namespaces, property] of [
-    ['w', ['--width', '--container'], 'width'],
-    ['min-w', ['--min-width', '--container'], 'min-width'],
-    ['max-w', ['--max-width', '--container'], 'max-width'],
-    ['h', ['--height'], 'height'],
-    ['min-h', ['--min-height', '--height'], 'min-height'],
-    ['max-h', ['--max-height', '--height'], 'max-height'],
+    ['w', ['--width', '--spacing', '--container'], 'width'],
+    ['min-w', ['--min-width', '--spacing', '--container'], 'min-width'],
+    ['max-w', ['--max-width', '--spacing', '--container'], 'max-width'],
+    ['h', ['--height', '--spacing'], 'height'],
+    ['min-h', ['--min-height', '--height', '--spacing'], 'min-height'],
+    ['max-h', ['--max-height', '--height', '--spacing'], 'max-height'],
   ] as [string, ThemeKey[], string][]) {
     spacingUtility(name, namespaces, (value) => [decl(property, value)], {
       supportsFractions: true,
@@ -997,9 +996,14 @@ export function createUtilities(theme: Theme) {
    */
   staticUtility('basis-auto', [['flex-basis', 'auto']])
   staticUtility('basis-full', [['flex-basis', '100%']])
-  spacingUtility('basis', ['--flex-basis', '--container'], (value) => [decl('flex-basis', value)], {
-    supportsFractions: true,
-  })
+  spacingUtility(
+    'basis',
+    ['--flex-basis', '--spacing', '--container'],
+    (value) => [decl('flex-basis', value)],
+    {
+      supportsFractions: true,
+    },
+  )
 
   /**
    * @css `table-layout`
@@ -1028,20 +1032,20 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `border-spacing`
    */
-  spacingUtility('border-spacing', ['--border-spacing'], (value) => [
+  spacingUtility('border-spacing', ['--border-spacing', '--spacing'], (value) => [
     borderSpacingProperties(),
     decl('--tw-border-spacing-x', value),
     decl('--tw-border-spacing-y', value),
     decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'),
   ])
 
-  spacingUtility('border-spacing-x', ['--border-spacing'], (value) => [
+  spacingUtility('border-spacing-x', ['--border-spacing', '--spacing'], (value) => [
     borderSpacingProperties(),
     decl('--tw-border-spacing-x', value),
     decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'),
   ])
 
-  spacingUtility('border-spacing-y', ['--border-spacing'], (value) => [
+  spacingUtility('border-spacing-y', ['--border-spacing', '--spacing'], (value) => [
     borderSpacingProperties(),
     decl('--tw-border-spacing-y', value),
     decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'),
@@ -1113,7 +1117,7 @@ export function createUtilities(theme: Theme) {
 
   spacingUtility(
     'translate',
-    ['--translate'],
+    ['--translate', '--spacing'],
     (value) => [
       translateProperties(),
       decl('--tw-translate-x', value),
@@ -1136,7 +1140,7 @@ export function createUtilities(theme: Theme) {
     ])
     spacingUtility(
       `translate-${axis}`,
-      ['--translate'],
+      ['--translate', '--spacing'],
       (value) => [
         translateProperties(),
         decl(`--tw-translate-${axis}`, value),
@@ -1151,7 +1155,7 @@ export function createUtilities(theme: Theme) {
 
   spacingUtility(
     `translate-z`,
-    ['--translate'],
+    ['--translate', '--spacing'],
     (value) => [
       translateProperties(),
       decl(`--tw-translate-z`, value),
@@ -1615,9 +1619,14 @@ export function createUtilities(theme: Theme) {
     ['scroll-mb', 'scroll-margin-bottom'],
     ['scroll-ml', 'scroll-margin-left'],
   ] as const) {
-    spacingUtility(namespace, '--scroll-margin', (value) => [decl(property, value)], {
-      supportsNegative: true,
-    })
+    spacingUtility(
+      namespace,
+      ['--scroll-margin', '--spacing'],
+      (value) => [decl(property, value)],
+      {
+        supportsNegative: true,
+      },
+    )
   }
 
   /**
@@ -1634,7 +1643,7 @@ export function createUtilities(theme: Theme) {
     ['scroll-pb', 'scroll-padding-bottom'],
     ['scroll-pl', 'scroll-padding-left'],
   ] as const) {
-    spacingUtility(namespace, '--scroll-padding', (value) => [decl(property, value)])
+    spacingUtility(namespace, ['--scroll-padding', '--spacing'], (value) => [decl(property, value)])
   }
 
   staticUtility('list-inside', [['list-style-position', 'inside']])
@@ -1816,13 +1825,13 @@ export function createUtilities(theme: Theme) {
   staticUtility('justify-items-end', [['justify-items', 'end']])
   staticUtility('justify-items-stretch', [['justify-items', 'stretch']])
 
-  spacingUtility('gap', ['--gap'], (value) => [decl('gap', value)])
-  spacingUtility('gap-x', ['--gap'], (value) => [decl('column-gap', value)])
-  spacingUtility('gap-y', ['--gap'], (value) => [decl('row-gap', value)])
+  spacingUtility('gap', ['--gap', '--spacing'], (value) => [decl('gap', value)])
+  spacingUtility('gap-x', ['--gap', '--spacing'], (value) => [decl('column-gap', value)])
+  spacingUtility('gap-y', ['--gap', '--spacing'], (value) => [decl('row-gap', value)])
 
   spacingUtility(
     'space-x',
-    ['--space'],
+    ['--space', '--spacing'],
     (value) => [
       atRoot([property('--tw-space-x-reverse', '0', '<number>')]),
 
@@ -1838,7 +1847,7 @@ export function createUtilities(theme: Theme) {
 
   spacingUtility(
     'space-y',
-    ['--space'],
+    ['--space', '--spacing'],
     (value) => [
       atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
       styleRule(':where(& > :not(:last-child))', [
@@ -2822,7 +2831,7 @@ export function createUtilities(theme: Theme) {
     ['pb', 'padding-bottom'],
     ['pl', 'padding-left'],
   ] as const) {
-    spacingUtility(name, '--padding', (value) => [decl(property, value)])
+    spacingUtility(name, ['--padding', '--spacing'], (value) => [decl(property, value)])
   }
 
   staticUtility('text-left', [['text-align', 'left']])
@@ -2832,9 +2841,14 @@ export function createUtilities(theme: Theme) {
   staticUtility('text-start', [['text-align', 'start']])
   staticUtility('text-end', [['text-align', 'end']])
 
-  spacingUtility('indent', ['--text-indent'], (value) => [decl('text-indent', value)], {
-    supportsNegative: true,
-  })
+  spacingUtility(
+    'indent',
+    ['--text-indent', '--spacing'],
+    (value) => [decl('text-indent', value)],
+    {
+      supportsNegative: true,
+    },
+  )
 
   staticUtility('align-baseline', [['vertical-align', 'baseline']])
   staticUtility('align-top', [['vertical-align', 'top']])
@@ -3727,7 +3741,7 @@ export function createUtilities(theme: Theme) {
     ['--tw-leading', '1'],
     ['line-height', '1'],
   ])
-  spacingUtility('leading', ['--leading'], (value) => [
+  spacingUtility('leading', ['--leading', '--spacing'], (value) => [
     atRoot([property('--tw-leading')]),
     decl('--tw-leading', value),
     decl('line-height', value),