From 595b88f2718d07cf8a22be9416fc2fbc10c5c841 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 27 Feb 2025 17:58:24 -0500
Subject: [PATCH] Support bare `col-*` and `row-*` utilities (#15183)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves #15170.

This PR adds support for bare integer values to the `col-*` and `row-*`
utilities:

```css
.col-5 {
  grid-column: 5;
}
.row-6 {
  grid-row: 6;
}
```

These properties are shorthands for
`grid-column-start`/`grid-column-end` and
`grid-row-start`/`grid-row-end`, so using a bare integer value ends up
being a shortcut for:

```css
.col-5 {
  grid-column-start: 5;
  grid-column-end: auto;
}
```

…which makes these basically work like an alternative to `col-start-*`
and `row-start-*`.

These support negative values like `-col-6` as well, which also
technically extends to arbitrary values like `-col-[6/span_2]` now even
though that is a junk value. I've decided not to guard against that
though and just consider it user error to keep the implementation
simple.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
---
 CHANGELOG.md                               |  1 +
 packages/tailwindcss/src/utilities.test.ts | 24 ++++++++++++++++++++--
 packages/tailwindcss/src/utilities.ts      | 10 +++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d817dcdd..4490a97a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `scripting`, `scripting-none`, and `scripting-initial` variants ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))
 - _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-<number>` and `row-<number>` utilities for `grid-column` and `grid-row` ([#15183](https://github.com/tailwindlabs/tailwindcss/pull/15183))
 
 ### Fixed
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 0530b7fc9..d0be566ef 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 a5a31a006..1fa8bd216 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)],
   })