diff --git a/CHANGELOG.md b/CHANGELOG.md index e2cf69322edc..f4b71efb7198 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Add `inverted-colors` variant ([#11693](https://github.com/tailwindlabs/tailwindcss/pull/11693)) - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370)) - _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128)) +- Add `col-` and `row-` utilities for `grid-column` and `grid-row` ([#15183](https://github.com/tailwindlabs/tailwindcss/pull/15183)) ## [4.0.9] - 2025-02-25 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0530b7fc954e..d0be566effc0 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1086,6 +1086,8 @@ test('order', async () => { test('col', async () => { expect( await run([ + 'col-11', + '-col-12', 'col-auto', 'col-span-4', 'col-span-17', @@ -1094,7 +1096,15 @@ test('col', async () => { 'col-span-[var(--my-variable)]', ]), ).toMatchInlineSnapshot(` - ".col-\\[span_123\\/span_123\\] { + ".-col-12 { + grid-column: calc(12 * -1); + } + + .col-11 { + grid-column: 11; + } + + .col-\\[span_123\\/span_123\\] { grid-column: span 123 / span 123; } @@ -1213,6 +1223,8 @@ test('col-end', async () => { test('row', async () => { expect( await run([ + 'row-11', + '-row-12', 'row-auto', 'row-span-4', 'row-span-17', @@ -1221,7 +1233,15 @@ test('row', async () => { 'row-span-[var(--my-variable)]', ]), ).toMatchInlineSnapshot(` - ".row-\\[span_123\\/span_123\\] { + ".-row-12 { + grid-row: calc(12 * -1); + } + + .row-11 { + grid-row: 11; + } + + .row-\\[span_123\\/span_123\\] { grid-row: span 123 / span 123; } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index a5a31a006780..1fa8bd216151 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -651,6 +651,11 @@ export function createUtilities(theme: Theme) { */ staticUtility('col-auto', [['grid-column', 'auto']]) functionalUtility('col', { + supportsNegative: true, + handleBareValue: ({ value }) => { + if (!isPositiveInteger(value)) return null + return value + }, themeKeys: ['--grid-column'], handle: (value) => [decl('grid-column', value)], }) @@ -719,6 +724,11 @@ export function createUtilities(theme: Theme) { */ staticUtility('row-auto', [['grid-row', 'auto']]) functionalUtility('row', { + supportsNegative: true, + handleBareValue: ({ value }) => { + if (!isPositiveInteger(value)) return null + return value + }, themeKeys: ['--grid-row'], handle: (value) => [decl('grid-row', value)], })