Remove max-w-auto, min-w-auto, max-h-auto, and min-h-auto

Author: philipp-spiess

CHANGELOG.md

@@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `not-*` does not remove `:is(…)` from variants ([#16825](https://github.com/tailwindlabs/tailwindcss/pull/16825))
 - Ensure `@keyframes` are correctly emitted when using a prefixed setup ([#16850](https://github.com/tailwindlabs/tailwindcss/pull/16850))
 
+### 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']])