Remove max-w-auto and max-h-auto (#16917)

Closes #16916

This PR removes `max-w-auto` and `max-h-auto` due to them not being part
of v3 and not being valid CSS:

- https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax
- https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#syntax

<img width="886" alt="Screenshot 2025-03-03 at 14 00 39"
src="https://github.com/user-attachments/assets/2c7fa17c-975b-4e1f-ae56-99b703d6ca70"
/>

<img width="163" alt="Screenshot 2025-03-03 at 13 54 26"
src="https://github.com/user-attachments/assets/12902a14-5a1e-4d7f-8127-fc2a3833221d"
/>

I decided to keep `max-w-auto` and `max-h-auto` since these values are
valid even though these were not in v3 either:

<img width="886" alt="Screenshot 2025-03-03 at 13 55 11"
src="https://github.com/user-attachments/assets/83bf6543-06a3-429e-b39e-ef3ac3290f0b"
/>

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

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",

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',

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