diff --git a/CHANGELOG.md b/CHANGELOG.md index 55cec3e08..2eb00b020 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix class extraction for Rails' strict locals ([#19525](https://github.com/tailwindlabs/tailwindcss/pull/19525)) - Align `@utility` name validation with Oxide scanner rules ([#19524](https://github.com/tailwindlabs/tailwindcss/pull/19524)) - Fix infinite loop when using `@variant` inside `@custom-variant` ([#19633](https://github.com/tailwindlabs/tailwindcss/pull/19633)) +- Allow multiples of `.25` in `aspect-*` fractions ([#19688](https://github.com/tailwindlabs/tailwindcss/pull/19688)) ### Deprecated diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 29e8dae3a..7bd03b577 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/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; } @@ -3188,6 +3192,7 @@ test('aspect-ratio', async () => { 'aspect--4/3', 'aspect--4/-3', 'aspect-4/-3', + 'aspect-1.23/4.56', ]), ).toEqual('') }) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index fd524f495..015821e4e 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -981,7 +981,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 (!isValidSpacingMultiplier(lhs) || !isValidSpacingMultiplier(rhs)) return null return fraction }, handle: (value) => [decl('aspect-ratio', value)],