From 84187f5be6322a48e82246466cce7e60c1c8d191 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 9 Sep 2025 19:25:46 +0200 Subject: [PATCH 1/6] add failing test --- packages/tailwindcss/src/utilities.test.ts | 80 ++++++++++++++++------ 1 file changed, 60 insertions(+), 20 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 32a01fda86eb..727afe6576c6 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1180,9 +1180,28 @@ test('col', async () => { test('col-start', async () => { expect( - await run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]', '-col-start-4']), + await compileCss( + css` + @theme { + --grid-column-start-custom: 1 column-start; + } + @tailwind utilities; + `, + [ + 'col-start-auto', + 'col-start-4', + 'col-start-99', + 'col-start-[123]', + '-col-start-4', + 'col-start-custom', + ], + ), ).toMatchInlineSnapshot(` - ".-col-start-4 { + ":root, :host { + --grid-column-start-custom: 1 column-start; + } + + .-col-start-4 { grid-column-start: calc(4 * -1); } @@ -1200,6 +1219,10 @@ test('col-start', async () => { .col-start-auto { grid-column-start: auto; + } + + .col-start-custom { + grid-column-start: var(--grid-column-start-custom); }" `) expect( @@ -1217,28 +1240,45 @@ test('col-start', async () => { }) test('col-end', async () => { - expect(await run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4'])) - .toMatchInlineSnapshot(` - ".-col-end-4 { - grid-column-end: calc(4 * -1); - } + expect( + await compileCss( + css` + @theme { + --grid-column-end-custom: 1 column-end; + } + @tailwind utilities; + `, + ['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4', 'col-end-custom'], + ), + ).toMatchInlineSnapshot(` + ":root, :host { + --grid-column-end-custom: 1 column-end; + } - .col-end-4 { - grid-column-end: 4; - } + .-col-end-4 { + grid-column-end: calc(4 * -1); + } - .col-end-99 { - grid-column-end: 99; - } + .col-end-4 { + grid-column-end: 4; + } - .col-end-\\[123\\] { - grid-column-end: 123; - } + .col-end-99 { + grid-column-end: 99; + } - .col-end-auto { - grid-column-end: auto; - }" - `) + .col-end-\\[123\\] { + grid-column-end: 123; + } + + .col-end-auto { + grid-column-end: auto; + } + + .col-end-custom { + grid-column-end: var(--grid-column-end-custom); + }" + `) expect( await run([ 'col-end', From f5dffe451ba80452f20525be18ae27b5cb0412aa Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 9 Sep 2025 19:28:38 +0200 Subject: [PATCH 2/6] ignore `--grid-column-start` and `--grid-column-end` for `--grid-column` --- packages/tailwindcss/src/theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index dc9c750a12f8..eb7c8fb160d8 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -28,6 +28,7 @@ const ignoredThemeKeyMap = new Map([ '--text-underline-offset', ], ], + ['--grid-column', ['--grid-column-start', '--grid-column-end']], ]) function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) { From 7f004402c58967a8e379be7f6af1a7230bff0ae6 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 9 Sep 2025 19:31:22 +0200 Subject: [PATCH 3/6] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 45f2264e8324..1e8a7890251d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Handle `@variant` inside `@custom-variant` ([#18885](https://github.com/tailwindlabs/tailwindcss/pull/18885)) - Merge suggestions when using `@utility` ([#18900](https://github.com/tailwindlabs/tailwindcss/pull/18900)) - Ensure that file system watchers created when using the CLI are always cleaned up ([#18905](https://github.com/tailwindlabs/tailwindcss/pull/18905)) +- Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907)) ## [4.1.13] - 2025-09-03 From db3bb40e22a9323584da25f9d0ee652d1214f185 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Sep 2025 14:25:07 +0200 Subject: [PATCH 4/6] add failing test for `grid-row-start` and `grid-row-end` --- packages/tailwindcss/src/utilities.test.ts | 80 ++++++++++++++++------ 1 file changed, 60 insertions(+), 20 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 727afe6576c6..5a1fe7596014 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1357,9 +1357,28 @@ test('row', async () => { test('row-start', async () => { expect( - await run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']), + await compileCss( + css` + @theme { + --grid-row-start-custom: 1 row-start; + } + @tailwind utilities; + `, + [ + 'row-start-auto', + 'row-start-4', + 'row-start-99', + 'row-start-[123]', + '-row-start-4', + 'row-start-custom', + ], + ), ).toMatchInlineSnapshot(` - ".-row-start-4 { + ":root, :host { + --grid-row-start-custom: 1 row-start; + } + + .-row-start-4 { grid-row-start: calc(4 * -1); } @@ -1377,6 +1396,10 @@ test('row-start', async () => { .row-start-auto { grid-row-start: auto; + } + + .row-start-custom { + grid-row-start: var(--grid-row-start-custom); }" `) expect( @@ -1394,28 +1417,45 @@ test('row-start', async () => { }) test('row-end', async () => { - expect(await run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4'])) - .toMatchInlineSnapshot(` - ".-row-end-4 { - grid-row-end: calc(4 * -1); - } + expect( + await compileCss( + css` + @theme { + --grid-row-end-custom: 1 row-end; + } + @tailwind utilities; + `, + ['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4', 'row-end-custom'], + ), + ).toMatchInlineSnapshot(` + ":root, :host { + --grid-row-end-custom: 1 row-end; + } - .row-end-4 { - grid-row-end: 4; - } + .-row-end-4 { + grid-row-end: calc(4 * -1); + } - .row-end-99 { - grid-row-end: 99; - } + .row-end-4 { + grid-row-end: 4; + } - .row-end-\\[123\\] { - grid-row-end: 123; - } + .row-end-99 { + grid-row-end: 99; + } - .row-end-auto { - grid-row-end: auto; - }" - `) + .row-end-\\[123\\] { + grid-row-end: 123; + } + + .row-end-auto { + grid-row-end: auto; + } + + .row-end-custom { + grid-row-end: var(--grid-row-end-custom); + }" + `) expect( await run([ 'row-end', From 21234c9d85e034499c0c68589e9d8360f2f2223d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Sep 2025 14:25:26 +0200 Subject: [PATCH 5/6] fix for `--grid-row-start` and `--grid-row-end` --- packages/tailwindcss/src/theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index eb7c8fb160d8..073fb242f1e0 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -29,6 +29,7 @@ const ignoredThemeKeyMap = new Map([ ], ], ['--grid-column', ['--grid-column-start', '--grid-column-end']], + ['--grid-row', ['--grid-row-start', '--grid-row-end']], ]) function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) { From 5187eb977878fec90851e9a159d11a2c25877406 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Sep 2025 14:25:55 +0200 Subject: [PATCH 6/6] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e8a7890251d..9f7d9be27aa5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Merge suggestions when using `@utility` ([#18900](https://github.com/tailwindlabs/tailwindcss/pull/18900)) - Ensure that file system watchers created when using the CLI are always cleaned up ([#18905](https://github.com/tailwindlabs/tailwindcss/pull/18905)) - Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907)) +- Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907)) ## [4.1.13] - 2025-09-03