fix: support decimal values in aspect ratio utilities

[shtse8]

Problem

The aspect-ratio utility only accepts integer values for bare fractions (e.g. aspect-4/3), but the CSS aspect-ratio property supports any positive number. Using a decimal like aspect-8.5/11 silently produces no output.

Reported in #19663.

Solution

Added an isPositiveNumber helper (alongside the existing isPositiveInteger) that accepts finite non-negative numbers including decimals. Updated the aspect utility's handleBareValue to use isPositiveNumber instead of isPositiveInteger.

Before

<div class="aspect-8.5/11">  <!-- ❌ No CSS generated -->

After

<div class="aspect-8.5/11">  <!-- ✅ aspect-ratio: 8.5 / 11 -->

Changes

• packages/tailwindcss/src/utils/infer-data-type.ts — Added isPositiveNumber() utility function
• packages/tailwindcss/src/utilities.ts — Changed aspect ratio validation from isPositiveInteger to isPositiveNumber
• packages/tailwindcss/src/utilities.test.ts — Added test case for aspect-8.5/11

Fixes #19663

[coderabbitai]

Walkthrough

This change extends Tailwind CSS to support fractional aspect ratios in addition to integer ratios. A new utility function isPositiveNumber is added to validate positive decimal values, allowing aspect ratio definitions like 8.5/11. The aspect ratio utility is updated to use isPositiveNumber instead of isPositiveInteger for validating both numerator and denominator components. Test coverage is expanded to include the new fractional aspect ratio class .aspect-8\.5\/11. The changes maintain the existing structure for aspect ratio generation while broadening the supported input formats.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: support decimal values in aspect ratio utilities' directly and clearly summarizes the main change: enabling decimal values in aspect ratio utilities.
Description check	✅ Passed	The description clearly explains the problem, solution, and changes made, directly addressing the issue of decimal values not being supported in aspect-ratio utilities.
Linked Issues check	✅ Passed	The PR successfully implements the required changes to support decimal values in aspect-ratio utilities (#19663): adds isPositiveNumber validator, updates aspect validation logic, and includes test coverage.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the aspect-ratio decimal values issue; no out-of-scope modifications were introduced.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

packages/tailwindcss/src/utilities.test.ts (1)

3159-3159: Add edge-case tests for zero boundaries in aspect-ratio validation to document isPositiveNumber behavior.

The isPositiveNumber function accepts zero (num >= 0), but its name suggests it rejects zero. Currently, tests only cover negative and non-numeric invalid cases. Adding tests for aspect-0/3, aspect-3/0, and aspect-0/1 would clarify whether zero numerators/denominators are intentionally accepted at the validation layer and document the actual contract of the function—important since a zero denominator or numerator may cause unexpected behavior downstream.

Note: aspect-.5/1 and aspect-0.0/1 will fail validation due to the string-matching requirement, so these are not worth testing.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}