Skip to content

Allow decimal values in aspect ratio utilities#19680

Open
veeceey wants to merge 1 commit intotailwindlabs:mainfrom
veeceey:fix/issue-19663-aspect-ratio-decimals
Open

Allow decimal values in aspect ratio utilities#19680
veeceey wants to merge 1 commit intotailwindlabs:mainfrom
veeceey:fix/issue-19663-aspect-ratio-decimals

Conversation

@veeceey
Copy link

@veeceey veeceey commented Feb 15, 2026

Fixes #19663

The aspect-* utility currently only accepts integer ratios (e.g. aspect-4/3) because handleBareValue validates both sides of the fraction with isPositiveInteger. This means perfectly valid ratios like aspect-8.5/11 are silently dropped from the stylesheet.

CSS aspect-ratio supports any positive number ratio, so there's no reason to restrict it to integers. This PR adds an isPositiveNumber check and uses it for the aspect utility, so aspect-8.5/11 now correctly generates:

.aspect-8\.5\/11 {
  aspect-ratio: 8.5 / 11;
}

Tested by adding aspect-8.5/11 to the existing aspect-ratio test case and confirming the output. All 382 utility tests pass, no regressions.

The `aspect-*` utility only accepted integer ratios like `aspect-4/3`,
rejecting valid decimal ratios like `aspect-8.5/11`. This is because the
bare value handler used `isPositiveInteger` to validate both sides of the
fraction.

CSS `aspect-ratio` accepts any positive number ratio, so this adds an
`isPositiveNumber` helper and uses it for the aspect utility validation,
allowing classes like `aspect-8.5/11` to generate `aspect-ratio: 8.5 / 11`.

Fixes tailwindlabs#19663
@veeceey veeceey requested a review from a team as a code owner February 15, 2026 10:07
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 15, 2026

Walkthrough

The pull request extends aspect ratio utility support in Tailwind CSS by enabling decimal values in ratios. A new isPositiveNumber validation function is introduced to verify positive numeric values, replacing the previous integer-only validation for fraction components. The aspect utility generator is updated to use this broader validation for both numerator and denominator values. Test coverage is added for aspect ratio classes with decimal values, such as .aspect-8\.5\/11. This change allows users to define aspect ratios with fractional components while maintaining the existing CSS output structure.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Allow decimal values in aspect ratio utilities' clearly and concisely summarizes the main change: enabling decimal support in aspect ratio utility classes.
Description check ✅ Passed The description is directly related to the changeset, explaining the problem, solution, and providing specific examples and test results.
Linked Issues check ✅ Passed The PR fully addresses issue #19663 by replacing integer-only validation with numeric validation to support decimal ratios in aspect utility classes.
Out of Scope Changes check ✅ Passed All changes are directly scoped to enabling decimal aspect ratios: adding isPositiveNumber utility, updating aspect validation, and extending tests.
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. 🎉


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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

aspect ignored when decimals included in ratio

1 participant