Only generate positive grid-cols-* and grid-rows-* utilities (#16020

)

This PR fixes an issue where `grid-cols-0` and `grid-rows-0` generated
invalid CSS. We now ensure that the value is any positive integer
(except 0).

Fixes: #16012

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
 
 ## [4.0.1] - 2025-01-29
 

packages/tailwindcss/src/utilities.test.ts

@@ -6995,6 +6995,7 @@ test('grid-cols', async () => {
   expect(
     await run([
       'grid-cols',
+      'grid-cols-0',
       '-grid-cols-none',
       '-grid-cols-subgrid',
       'grid-cols--12',
@@ -7043,6 +7044,7 @@ test('grid-rows', async () => {
   expect(
     await run([
       'grid-rows',
+      'grid-rows-0',
       '-grid-rows-none',
       '-grid-rows-subgrid',
       'grid-rows--12',

packages/tailwindcss/src/utilities.ts

@@ -17,6 +17,7 @@ import { DefaultMap } from './utils/default-map'
 import {
   inferDataType,
   isPositiveInteger,
+  isStrictPositiveInteger,
   isValidOpacityValue,
   isValidSpacingMultiplier,
 } from './utils/infer-data-type'
@@ -1752,7 +1753,7 @@ export function createUtilities(theme: Theme) {
   functionalUtility('grid-cols', {
     themeKeys: ['--grid-template-columns'],
     handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
+      if (!isStrictPositiveInteger(value)) return null
       return `repeat(${value}, minmax(0, 1fr))`
     },
     handle: (value) => [decl('grid-template-columns', value)],
@@ -1763,7 +1764,7 @@ export function createUtilities(theme: Theme) {
   functionalUtility('grid-rows', {
     themeKeys: ['--grid-template-rows'],
     handleBareValue: ({ value }) => {
-      if (!isPositiveInteger(value)) return null
+      if (!isStrictPositiveInteger(value)) return null
       return `repeat(${value}, minmax(0, 1fr))`
     },
     handle: (value) => [decl('grid-template-rows', value)],

packages/tailwindcss/src/utils/infer-data-type.ts

@@ -341,6 +341,11 @@ export function isPositiveInteger(value: any) {
   return Number.isInteger(num) && num >= 0 && String(num) === String(value)
 }
 
+export function isStrictPositiveInteger(value: any) {
+  let num = Number(value)
+  return Number.isInteger(num) && num > 0 && String(num) === String(value)
+}
+
 export function isValidSpacingMultiplier(value: any) {
   return isMultipleOf(value, 0.25)
 }