From 50dd0e418adb0aaffd995963b1dab17455c6af2e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 12 Jun 2026 16:43:52 +0200 Subject: [PATCH 1/4] add failing test We expect that `auto-cols-12` and `auto-rows-12` will compile using the spacing scale. --- packages/tailwindcss/src/utilities.test.ts | 62 +++++++++++++++++----- 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 3adabd010523..0cf35bd2ff60 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -9012,15 +9012,28 @@ test('break-after', async () => { test('auto-cols', async () => { expect( - await run([ - 'auto-cols-auto', - 'auto-cols-min', - 'auto-cols-max', - 'auto-cols-fr', - 'auto-cols-[2fr]', - ]), + await run( + [ + 'auto-cols-auto', + 'auto-cols-min', + 'auto-cols-max', + 'auto-cols-fr', + 'auto-cols-[2fr]', + 'auto-cols-12', + ], + css` + @tailwind utilities; + @theme { + --spacing: 0.25rem; + } + `, + ), ).toMatchInlineSnapshot(` " + .auto-cols-12 { + grid-auto-columns: calc(var(--spacing) * 12); + } + .auto-cols-\\[2fr\\] { grid-auto-columns: 2fr; } @@ -9040,6 +9053,10 @@ test('auto-cols', async () => { .auto-cols-min { grid-auto-columns: min-content; } + + :root, :host { + --spacing: .25rem; + } " `) expect( @@ -9129,15 +9146,28 @@ test('grid-flow', async () => { test('auto-rows', async () => { expect( - await run([ - 'auto-rows-auto', - 'auto-rows-min', - 'auto-rows-max', - 'auto-rows-fr', - 'auto-rows-[2fr]', - ]), + await run( + [ + 'auto-rows-auto', + 'auto-rows-min', + 'auto-rows-max', + 'auto-rows-fr', + 'auto-rows-[2fr]', + 'auto-rows-12', + ], + css` + @tailwind utilities; + @theme { + --spacing: 0.25rem; + } + `, + ), ).toMatchInlineSnapshot(` " + .auto-rows-12 { + grid-auto-rows: calc(var(--spacing) * 12); + } + .auto-rows-\\[2fr\\] { grid-auto-rows: 2fr; } @@ -9157,6 +9187,10 @@ test('auto-rows', async () => { .auto-rows-min { grid-auto-rows: min-content; } + + :root, :host { + --spacing: .25rem; + } " `) expect( From 97af69faba01d07cb1dac9aa5de713aad9afba10 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 12 Jun 2026 16:45:30 +0200 Subject: [PATCH 2/4] handle bare values for `auto-rows-*` and `auto-cols-*` --- packages/tailwindcss/src/utilities.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index ba7b9a39d88e..38d870b82c78 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1985,6 +1985,10 @@ export function createUtilities(theme: Theme) { functionalUtility('auto-cols', { themeKeys: ['--grid-auto-columns'], + handleBareValue: ({ value }) => { + if (!isPositiveInteger(value)) return null + return `--spacing(${value})` + }, handle: (value) => [decl('grid-auto-columns', value)], staticValues: { auto: [decl('grid-auto-columns', 'auto')], @@ -1996,6 +2000,10 @@ export function createUtilities(theme: Theme) { functionalUtility('auto-rows', { themeKeys: ['--grid-auto-rows'], + handleBareValue: ({ value }) => { + if (!isPositiveInteger(value)) return null + return `--spacing(${value})` + }, handle: (value) => [decl('grid-auto-rows', value)], staticValues: { auto: [decl('grid-auto-rows', 'auto')], From 43d3199def8c1aed082968a700799a399469bb34 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 12 Jun 2026 17:10:49 +0200 Subject: [PATCH 3/4] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b6e8e5b878f8..d0276e2786b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- Support bare spacing values for `auto-rows-*` and `auto-cols-*` utilities (e.g. `auto-rows-12` and `auto-cols-16`) ([#20229](https://github.com/tailwindlabs/tailwindcss/pull/20229)) + ### Fixed - Ensure `@tailwindcss/cli` in `--watch` mode doesn't crash on Windows when `@source` points to a directory that doesn't exist ([#20242](https://github.com/tailwindlabs/tailwindcss/pull/20242)) From 28447f505762463e9038c5c5c17e86b910e3825b Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 12 Jun 2026 17:29:54 +0200 Subject: [PATCH 4/4] use `isValidSpacingMultiplier` This is more consistent with other places where we use the spacing scale --- packages/tailwindcss/src/utilities.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 38d870b82c78..ae52159d320b 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1986,7 +1986,8 @@ export function createUtilities(theme: Theme) { functionalUtility('auto-cols', { themeKeys: ['--grid-auto-columns'], handleBareValue: ({ value }) => { - if (!isPositiveInteger(value)) return null + if (!theme.resolve(null, ['--spacing'])) return null + if (!isValidSpacingMultiplier(value)) return null return `--spacing(${value})` }, handle: (value) => [decl('grid-auto-columns', value)], @@ -2001,7 +2002,8 @@ export function createUtilities(theme: Theme) { functionalUtility('auto-rows', { themeKeys: ['--grid-auto-rows'], handleBareValue: ({ value }) => { - if (!isPositiveInteger(value)) return null + if (!theme.resolve(null, ['--spacing'])) return null + if (!isValidSpacingMultiplier(value)) return null return `--spacing(${value})` }, handle: (value) => [decl('grid-auto-rows', value)],