From 4feb89336874c25477081ef499e1e5d2c5e9d17b Mon Sep 17 00:00:00 2001
From: Kyle Tse <shtse8@gmail.com>
Date: Thu, 12 Feb 2026 23:44:02 +0000
Subject: [PATCH] fix: support decimal values in aspect ratio utilities

Allow decimal numbers in aspect ratio bare values (e.g. `aspect-8.5/11`)
by using `isPositiveNumber` instead of `isPositiveInteger` for validation.

The CSS `aspect-ratio` property accepts any positive number, not just
integers, so `aspect-ratio: 8.5 / 11` is valid CSS. Previously,
`aspect-8.5/11` would silently produce no output because the decimal
value failed the integer check.

Fixes #19663
---
 packages/tailwindcss/src/utilities.test.ts        | 9 +++++++--
 packages/tailwindcss/src/utilities.ts             | 3 ++-
 packages/tailwindcss/src/utils/infer-data-type.ts | 8 ++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 29e8dae3a524..315997433f8c 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -3156,10 +3156,11 @@ test('aspect-ratio', async () => {
         }
         @tailwind utilities;
       `,
-      ['aspect-video', 'aspect-[10/9]', 'aspect-4/3'],
+      ['aspect-video', 'aspect-[10/9]', 'aspect-4/3', 'aspect-8.5/11'],
     ),
   ).toMatchInlineSnapshot(`
-    ":root, :host {
+    "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+    :root, :host {
       --aspect-video: 16 / 9;
     }
 
@@ -3167,6 +3168,10 @@ test('aspect-ratio', async () => {
       aspect-ratio: 4 / 3;
     }
 
+    .aspect-8\\.5\\/11 {
+      aspect-ratio: 8.5 / 11;
+    }
+
     .aspect-\\[10\\/9\\] {
       aspect-ratio: 10 / 9;
     }
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index fd524f495575..f5625c25d89b 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -19,6 +19,7 @@ import { DefaultMap } from './utils/default-map'
 import {
   inferDataType,
   isPositiveInteger,
+  isPositiveNumber,
   isStrictPositiveInteger,
   isValidOpacityValue,
   isValidSpacingMultiplier,
@@ -981,7 +982,7 @@ export function createUtilities(theme: Theme) {
     handleBareValue: ({ fraction }) => {
       if (fraction === null) return null
       let [lhs, rhs] = segment(fraction, '/')
-      if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) return null
+      if (!isPositiveNumber(lhs) || !isPositiveNumber(rhs)) return null
       return fraction
     },
     handle: (value) => [decl('aspect-ratio', value)],
diff --git a/packages/tailwindcss/src/utils/infer-data-type.ts b/packages/tailwindcss/src/utils/infer-data-type.ts
index 587bae785c79..b98b501805f5 100644
--- a/packages/tailwindcss/src/utils/infer-data-type.ts
+++ b/packages/tailwindcss/src/utils/infer-data-type.ts
@@ -353,6 +353,14 @@ export function isStrictPositiveInteger(value: any) {
   return Number.isInteger(num) && num > 0 && String(num) === String(value)
 }
 
+/**
+ * Returns true if the value can be parsed as a positive number (integer or decimal).
+ */
+export function isPositiveNumber(value: any) {
+  let num = Number(value)
+  return Number.isFinite(num) && num >= 0 && String(num) === String(value)
+}
+
 export function isValidSpacingMultiplier(value: any) {
   return isMultipleOf(value, 0.25)
 }