diff --git a/CHANGELOG.md b/CHANGELOG.md index 45f2264e8324..9f7d9be27aa5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,8 @@ 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)) +- 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 diff --git a/packages/tailwindcss/src/theme.ts b/packages/tailwindcss/src/theme.ts index dc9c750a12f8..073fb242f1e0 100644 --- a/packages/tailwindcss/src/theme.ts +++ b/packages/tailwindcss/src/theme.ts @@ -28,6 +28,8 @@ const ignoredThemeKeyMap = new Map([ '--text-underline-offset', ], ], + ['--grid-column', ['--grid-column-start', '--grid-column-end']], + ['--grid-row', ['--grid-row-start', '--grid-row-end']], ]) function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) { diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 32a01fda86eb..5a1fe7596014 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', @@ -1317,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); } @@ -1337,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( @@ -1354,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',