Support bare col and row utilities

tailwindlabs · Nov 25, 2024 · bc94685 · bc94685
1 parent 98359be
commit bc94685
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -1106,6 +1106,8 @@ test('order', async () => {
 test('col', async () => {
   expect(
     await run([
+      'col-11',
+      '-col-12',
       'col-auto',
       'col-span-4',
       'col-span-17',
@@ -1114,7 +1116,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;
     }
 
@@ -1233,6 +1243,8 @@ test('col-end', async () => {
 test('row', async () => {
   expect(
     await run([
+      'row-11',
+      '-row-12',
       'row-auto',
       'row-span-4',
       'row-span-17',
@@ -1241,7 +1253,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
@@ -585,6 +585,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)],
   })
@@ -653,6 +658,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)],
   })