Allow decimal values in aspect ratio utilities

packages/tailwindcss/src/utilities.test.ts

@@ -3156,7 +3156,7 @@ 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 {
@@ -3167,6 +3167,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;
     }

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)],

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

@@ -353,6 +353,11 @@ export function isStrictPositiveInteger(value: any) {
   return Number.isInteger(num) && num > 0 && String(num) === String(value)
 }
 
+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)
 }