diff --git a/CHANGELOG.md b/CHANGELOG.md index f20ab5940..9f77b5f5a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure `outline-hidden` behaves like `outline-none` in non-`forced-colors` mode ([#](https://github.com/tailwindlabs/tailwindcss/pull/)) - Allow `!important` on CSS variables again ([#16873](https://github.com/tailwindlabs/tailwindcss/pull/16873)) +### Changed + +- Removed `max-w-auto` and `max-h-auto` utilities as they generate invalid CSS ([#16917](https://github.com/tailwindlabs/tailwindcss/pull/16917)) + ## [4.0.9] - 2025-02-25 ### Fixed diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index ba6dd4141..ec055e7b4 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -5110,7 +5110,6 @@ exports[`getClassList 1`] = ` "max-h-9/12", "max-h-10/12", "max-h-11/12", - "max-h-auto", "max-h-dvh", "max-h-dvw", "max-h-fit", @@ -5158,7 +5157,6 @@ exports[`getClassList 1`] = ` "max-w-72", "max-w-80", "max-w-96", - "max-w-auto", "max-w-dvh", "max-w-dvw", "max-w-fit", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index bd7a90923..9cf0f943a 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -2738,8 +2738,8 @@ test('min-width', async () => { @tailwind utilities; `, [ - 'min-w-auto', 'min-w-full', + 'min-w-auto', 'min-w-min', 'min-w-max', 'min-w-fit', @@ -2813,16 +2813,7 @@ test('max-width', async () => { } @tailwind utilities; `, - [ - 'max-w-none', - 'max-w-full', - 'max-w-max', - 'max-w-max', - 'max-w-fit', - 'max-w-4', - 'max-w-xl', - 'max-w-[4px]', - ], + ['max-w-none', 'max-w-full', 'max-w-max', 'max-w-fit', 'max-w-4', 'max-w-xl', 'max-w-[4px]'], ), ).toMatchInlineSnapshot(` ":root, :host { @@ -2861,6 +2852,7 @@ test('max-width', async () => { expect( await run([ 'max-w', + 'max-w-auto', '-max-w-4', '-max-w-[4px]', 'max-w-none/foo', @@ -2988,8 +2980,8 @@ test('min-height', async () => { @tailwind utilities; `, [ - 'min-h-auto', 'min-h-full', + 'min-h-auto', 'min-h-screen', 'min-h-svh', 'min-h-lvh', @@ -3145,6 +3137,7 @@ test('max-height', async () => { expect( await run([ 'max-h', + 'max-h-auto', '-max-h-4', '-max-h-[4px]', 'max-h-none/foo', diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index ccf87a1cf..83226ebc1 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -944,11 +944,13 @@ export function createUtilities(theme: Theme) { ['height', value], ]) staticUtility(`w-${key}`, [['width', value]]) - staticUtility(`min-w-${key}`, [['min-width', value]]) - staticUtility(`max-w-${key}`, [['max-width', value]]) staticUtility(`h-${key}`, [['height', value]]) + staticUtility(`min-w-${key}`, [['min-width', value]]) staticUtility(`min-h-${key}`, [['min-height', value]]) - staticUtility(`max-h-${key}`, [['max-height', value]]) + if (key !== 'auto') { + staticUtility(`max-w-${key}`, [['max-width', value]]) + staticUtility(`max-h-${key}`, [['max-height', value]]) + } } staticUtility(`w-screen`, [['width', '100vw']])