Skip to content

Commit 26638af

Browse files
adamwathanadamwathan
authored
Rename --width-* namespace to --container-* (#14898)
This PR renames all of the `--width-*` variables to `--container-*` to better communicate the purpose of these tokens as layout container sizes. These are the values that were historically stored under `maxWidth` in the v3 and earlier eras, and were also re-used by the container queries plugin. The name `--container-*` feels like a better match alongside the `--breakpoint-*` namespace and since these both serve that same sort of purpose it makes sense to me that the name should be optimized for feeling "right" in that context. I like that this also sort of advertises Tailwind's support for container queries directly in the CSS variables themselves, and helps people understand what these are really intended to be used for. --------- Co-authored-by: Adam Wathan <[email protected]>
1 parent 32cf4af commit 26638af

File tree

14 files changed

+117
-98
lines changed

14 files changed

+117
-98
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
4444
- Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))
4545
- Remove static `font-weight` utilities and add `--font-weight-*` values to the default theme ([#14883](https://github.com/tailwindlabs/tailwindcss/pull/14883))
4646
- Rename `--transition-timing-function-*` variables to `--ease-*` ([#14886](https://github.com/tailwindlabs/tailwindcss/pull/14886))
47+
- Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
4748

4849
## [4.0.0-alpha.31] - 2024-10-29
4950

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -297,20 +297,20 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
297297
--drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
298298
--drop-shadow-2xl: 0 25px 25px #00000026;
299299
--spacing: .25rem;
300-
--width-3xs: 16rem;
301-
--width-2xs: 18rem;
302-
--width-xs: 20rem;
303-
--width-sm: 24rem;
304-
--width-md: 28rem;
305-
--width-lg: 32rem;
306-
--width-xl: 36rem;
307-
--width-2xl: 42rem;
308-
--width-3xl: 48rem;
309-
--width-4xl: 56rem;
310-
--width-5xl: 64rem;
311-
--width-6xl: 72rem;
312-
--width-7xl: 80rem;
313-
--width-prose: 65ch;
300+
--container-3xs: 16rem;
301+
--container-2xs: 18rem;
302+
--container-xs: 20rem;
303+
--container-sm: 24rem;
304+
--container-md: 28rem;
305+
--container-lg: 32rem;
306+
--container-xl: 36rem;
307+
--container-2xl: 42rem;
308+
--container-3xl: 48rem;
309+
--container-4xl: 56rem;
310+
--container-5xl: 64rem;
311+
--container-6xl: 72rem;
312+
--container-7xl: 80rem;
313+
--container-prose: 65ch;
314314
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
315315
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
316316
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

‎packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,9 @@ test.each([
9292
// `theme(…)` calls valid in v3, but not in v4 should still be converted.
9393
['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'],
9494

95-
// `screens` values
95+
// Renamed theme keys
9696
['max-w-[theme(screens.md)]', 'max-w-[var(--breakpoint-md)]'],
97+
['w-[theme(maxWidth.md)]', 'w-[var(--container-md)]'],
9798

9899
// Invalid cases
99100
['[--foo:theme(colors.red.500/50/50)]', '[--foo:theme(colors.red.500/50/50)]'],

‎packages/tailwindcss/src/__snapshots__/index.test.ts.snap

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -296,20 +296,20 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
296296
--drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
297297
--drop-shadow-2xl: 0 25px 25px #00000026;
298298
--spacing: .25rem;
299-
--width-3xs: 16rem;
300-
--width-2xs: 18rem;
301-
--width-xs: 20rem;
302-
--width-sm: 24rem;
303-
--width-md: 28rem;
304-
--width-lg: 32rem;
305-
--width-xl: 36rem;
306-
--width-2xl: 42rem;
307-
--width-3xl: 48rem;
308-
--width-4xl: 56rem;
309-
--width-5xl: 64rem;
310-
--width-6xl: 72rem;
311-
--width-7xl: 80rem;
312-
--width-prose: 65ch;
299+
--container-3xs: 16rem;
300+
--container-2xs: 18rem;
301+
--container-xs: 20rem;
302+
--container-sm: 24rem;
303+
--container-md: 28rem;
304+
--container-lg: 32rem;
305+
--container-xl: 36rem;
306+
--container-2xl: 42rem;
307+
--container-3xl: 48rem;
308+
--container-4xl: 56rem;
309+
--container-5xl: 64rem;
310+
--container-6xl: 72rem;
311+
--container-7xl: 80rem;
312+
--container-prose: 65ch;
313313
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
314314
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
315315
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

‎packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ test('config values can be merged into the theme', () => {
5757
'100%': '100%',
5858
},
5959

60+
maxWidth: {
61+
'9xs': '6rem',
62+
},
63+
6064
transitionTimingFunction: {
6165
fast: 'cubic-bezier(0, 0.55, 0.45, 1)',
6266
},
@@ -87,6 +91,7 @@ test('config values can be merged into the theme', () => {
8791
expect(theme.resolve('1/2', ['--width'])).toEqual('60%')
8892
expect(theme.resolve('0.5', ['--width'])).toEqual('60%')
8993
expect(theme.resolve('100%', ['--width'])).toEqual('100%')
94+
expect(theme.resolve('9xs', ['--container'])).toEqual('6rem')
9095
expect(theme.resolve('fast', ['--ease'])).toEqual('cubic-bezier(0, 0.55, 0.45, 1)')
9196
})
9297

‎packages/tailwindcss/src/compat/apply-config-to-theme.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ export function keyPathToCssProperty(path: string[]) {
135135
if (path[0] === 'animation') path[0] = 'animate'
136136
if (path[0] === 'transitionTimingFunction') path[0] = 'ease'
137137
if (path[0] === 'fontFamily') path[0] = 'font'
138+
if (path[0] === 'maxWidth') path[0] = 'container'
138139

139140
for (let part of path) {
140141
if (!IS_VALID_KEY.test(part)) return null

‎packages/tailwindcss/src/compat/config.test.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1533,6 +1533,9 @@ test('old theme values are merged with their renamed counterparts in the CSS the
15331533
15341534
--animate-a: 1;
15351535
--animate-b: 2;
1536+
1537+
--container-a: 1;
1538+
--container-b: 2;
15361539
}
15371540
15381541
@plugin "./plugin.js";
@@ -1583,6 +1586,14 @@ test('old theme values are merged with their renamed counterparts in the CSS the
15831586

15841587
expect(theme('boxShadow.a')).toEqual('1')
15851588
expect(theme('boxShadow.b')).toEqual('2')
1589+
1590+
expect(theme('maxWidth')).toMatchObject({
1591+
a: '1',
1592+
b: '2',
1593+
})
1594+
1595+
expect(theme('maxWidth.a')).toEqual('1')
1596+
expect(theme('maxWidth.b')).toEqual('2')
15861597
}),
15871598
}
15881599
},

‎packages/tailwindcss/src/compat/config/create-compat-config.ts

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -13,34 +13,34 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
1313
// and only allow colors from the CSS theme.
1414
colors: ({ theme }) => theme('color', {}),
1515

16-
boxShadow: ({ theme }) => ({
17-
...defaultTheme.boxShadow,
18-
...theme('shadow', {}),
19-
}),
20-
21-
animation: ({ theme }) => ({
22-
...defaultTheme.animation,
23-
...theme('animate', {}),
24-
}),
25-
26-
borderRadius: ({ theme }) => ({
27-
...defaultTheme.borderRadius,
28-
...theme('radius', {}),
29-
}),
30-
31-
screens: ({ theme }) => ({
32-
...defaultTheme.screens,
33-
...theme('breakpoint', {}),
34-
}),
35-
36-
transitionDuration: {
37-
...defaultTheme.transitionDuration,
38-
DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
39-
},
40-
41-
transitionTimingFunction: {
42-
...defaultTheme.transitionTimingFunction,
43-
DEFAULT: cssTheme.get(['--default-transition-timing-function']) ?? null,
16+
extend: {
17+
boxShadow: ({ theme }) => ({
18+
...theme('shadow', {}),
19+
}),
20+
21+
animation: ({ theme }) => ({
22+
...theme('animate', {}),
23+
}),
24+
25+
borderRadius: ({ theme }) => ({
26+
...theme('radius', {}),
27+
}),
28+
29+
screens: ({ theme }) => ({
30+
...theme('breakpoint', {}),
31+
}),
32+
33+
transitionDuration: {
34+
DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
35+
},
36+
37+
transitionTimingFunction: {
38+
DEFAULT: cssTheme.get(['--default-transition-timing-function']) ?? null,
39+
},
40+
41+
maxWidth: ({ theme }) => ({
42+
...theme('container', {}),
43+
}),
4444
},
4545
},
4646
}

‎packages/tailwindcss/src/css-functions.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -617,7 +617,7 @@ describe('theme function', () => {
617617
'fontFamily.sans',
618618
'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
619619
],
620-
['width.xs', '20rem'],
620+
['maxWidth.xs', '20rem'],
621621
['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
622622
['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
623623
])('theme(%s) → %s', async (value, result) => {

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2738,7 +2738,7 @@ test('min-width', async () => {
27382738
css`
27392739
@theme {
27402740
--spacing-4: 1rem;
2741-
--width-xl: 36rem;
2741+
--container-xl: 36rem;
27422742
}
27432743
@tailwind utilities;
27442744
`,
@@ -2756,7 +2756,7 @@ test('min-width', async () => {
27562756
).toMatchInlineSnapshot(`
27572757
":root {
27582758
--spacing-4: 1rem;
2759-
--width-xl: 36rem;
2759+
--container-xl: 36rem;
27602760
}
27612761
27622762
.min-w-4 {
@@ -2788,7 +2788,7 @@ test('min-width', async () => {
27882788
}
27892789
27902790
.min-w-xl {
2791-
min-width: var(--width-xl);
2791+
min-width: var(--container-xl);
27922792
}"
27932793
`)
27942794
expect(
@@ -2814,7 +2814,7 @@ test('max-width', async () => {
28142814
css`
28152815
@theme {
28162816
--spacing-4: 1rem;
2817-
--width-xl: 36rem;
2817+
--container-xl: 36rem;
28182818
}
28192819
@tailwind utilities;
28202820
`,
@@ -2832,7 +2832,7 @@ test('max-width', async () => {
28322832
).toMatchInlineSnapshot(`
28332833
":root {
28342834
--spacing-4: 1rem;
2835-
--width-xl: 36rem;
2835+
--container-xl: 36rem;
28362836
}
28372837
28382838
.max-w-4 {
@@ -2860,7 +2860,7 @@ test('max-width', async () => {
28602860
}
28612861
28622862
.max-w-xl {
2863-
max-width: var(--width-xl);
2863+
max-width: var(--container-xl);
28642864
}"
28652865
`)
28662866
expect(
@@ -3293,15 +3293,15 @@ test('flex-basis', async () => {
32933293
await compileCss(
32943294
css`
32953295
@theme {
3296-
--width-xl: 36rem;
3296+
--container-xl: 36rem;
32973297
}
32983298
@tailwind utilities;
32993299
`,
33003300
['basis-auto', 'basis-full', 'basis-xl', 'basis-11/12', 'basis-[123px]'],
33013301
),
33023302
).toMatchInlineSnapshot(`
33033303
":root {
3304-
--width-xl: 36rem;
3304+
--container-xl: 36rem;
33053305
}
33063306
33073307
.basis-11\\/12 {
@@ -3321,7 +3321,7 @@ test('flex-basis', async () => {
33213321
}
33223322
33233323
.basis-xl {
3324-
flex-basis: var(--width-xl);
3324+
flex-basis: var(--container-xl);
33253325
}"
33263326
`)
33273327
expect(
@@ -6451,8 +6451,8 @@ test('columns', async () => {
64516451
await compileCss(
64526452
css`
64536453
@theme {
6454-
--width-3xs: 16rem;
6455-
--width-7xl: 80rem;
6454+
--container-3xs: 16rem;
6455+
--container-7xl: 80rem;
64566456
}
64576457
@tailwind utilities;
64586458
`,
@@ -6468,20 +6468,20 @@ test('columns', async () => {
64686468
),
64696469
).toMatchInlineSnapshot(`
64706470
":root {
6471-
--width-3xs: 16rem;
6472-
--width-7xl: 80rem;
6471+
--container-3xs: 16rem;
6472+
--container-7xl: 80rem;
64736473
}
64746474
64756475
.columns-3xs {
6476-
columns: var(--width-3xs);
6476+
columns: var(--container-3xs);
64776477
}
64786478
64796479
.columns-4 {
64806480
columns: 4;
64816481
}
64826482
64836483
.columns-7xl {
6484-
columns: var(--width-7xl);
6484+
columns: var(--container-7xl);
64856485
}
64866486
64876487
.columns-99 {

‎packages/tailwindcss/src/utilities.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -909,9 +909,9 @@ export function createUtilities(theme: Theme) {
909909
)
910910

911911
for (let [name, namespaces, property] of [
912-
['w', ['--width'], 'width'],
913-
['min-w', ['--min-width', '--width'], 'min-width'],
914-
['max-w', ['--max-width', '--width'], 'max-width'],
912+
['w', ['--width', '--container'], 'width'],
913+
['min-w', ['--min-width', '--container'], 'min-width'],
914+
['max-w', ['--max-width', '--container'], 'max-width'],
915915
['h', ['--height'], 'height'],
916916
['min-h', ['--min-height', '--height'], 'min-height'],
917917
['max-h', ['--max-height', '--height'], 'max-height'],
@@ -1001,7 +1001,7 @@ export function createUtilities(theme: Theme) {
10011001
*/
10021002
staticUtility('basis-auto', [['flex-basis', 'auto']])
10031003
staticUtility('basis-full', [['flex-basis', '100%']])
1004-
spacingUtility('basis', ['--flex-basis', '--width'], (value) => [decl('flex-basis', value)], {
1004+
spacingUtility('basis', ['--flex-basis', '--container'], (value) => [decl('flex-basis', value)], {
10051005
supportsFractions: true,
10061006
})
10071007

@@ -1653,7 +1653,7 @@ export function createUtilities(theme: Theme) {
16531653
staticUtility('columns-auto', [['columns', 'auto']])
16541654

16551655
functionalUtility('columns', {
1656-
themeKeys: ['--columns', '--width'],
1656+
themeKeys: ['--columns', '--container'],
16571657
handleBareValue: ({ value }) => {
16581658
if (!isPositiveInteger(value)) return null
16591659
return value
@@ -1664,7 +1664,7 @@ export function createUtilities(theme: Theme) {
16641664
suggest('columns', () => [
16651665
{
16661666
values: Array.from({ length: 12 }, (_, i) => `${i + 1}`),
1667-
valueThemeKeys: ['--columns', '--width'],
1667+
valueThemeKeys: ['--columns', '--container'],
16681668
},
16691669
])
16701670

‎packages/tailwindcss/src/variants.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1942,7 +1942,7 @@ test('container queries', async () => {
19421942
await compileCss(
19431943
css`
19441944
@theme {
1945-
--width-lg: 1024px;
1945+
--container-lg: 1024px;
19461946
}
19471947
@tailwind utilities;
19481948
`,
@@ -1965,7 +1965,7 @@ test('container queries', async () => {
19651965
),
19661966
).toMatchInlineSnapshot(`
19671967
":root {
1968-
--width-lg: 1024px;
1968+
--container-lg: 1024px;
19691969
}
19701970
19711971
@container name (width < 1024px) {

0 commit comments

Comments
 (0)