Repository: tailwindlabs/tailwindcss

Problem statement:
[v4] arbritary values for row and col classes
In v4 utilities some utilities like grid-cols-12 and z-40 do not depend on the theme values and just work.

Does that mean that row-42 should also just work? Because it does not work in v4.0.0-beta.2.
I still need the square brackets like row-[42].


Hints:
Hey! I think you're looking for `row-start-42` which will work. `row-[42]` didn't work in v3 and is a new class in v4 for the shorthand `grid-row` property where I think it's most common to pass multiple values like `grid-row: 3 / 6` but it does work with one value too so maybe we can make that work anyways also.
I think col-[42] and row-[42] already did work in v3:
https://play.tailwindcss.com/eSauO2KMnr

It would be nice if col-42 also worked. Maybe even mapping to `grid-column: 42 / span 1` instead of the `grid-column: 42` in v3 (which is maybe a little weird if col-end- was set separately).
> I think col-[42] and row-[42] already did work in v3:

Wow I swear when I went to test it it didn't but clearly I'm wrong 😅 Will make this work, hilariously I didn't even know you could do this and I'm excited to be able to start writing `col-3` instead of `col-start-3` all the time now.
Thanks!

Also related to arbitrary values for grid utilities: I use to write `grid-rows-[1fr,auto]` in v3, but that does not work in v4 anymore with the comma as a seperator. Don't know if this is intentional or not.
@subhero24 Ah yeah need to use underscores there, we supported commas for 5 seconds when v3 was first released before switching to underscores because sometimes you need real commas in arbitrary values 👍 

Patch:
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
--- 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)],
   })


Test patch:
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
--- 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;
     }