Add h-lh/min-h-lh/max-h-lh utilities to match an elements line height (#17790)

This PR adds the following utilities that can be used to match an
elements line height:

- `h-lh`
- `min-h-lh`
- `max-h-lh`

These are all equivalent to providing `1lh` as an arbitrary value. e.g.
`h-[1lh]`

Author: thecrypticace

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Ensure `@tailwindcss/upgrade` runs on Tailwind CSS v4 projects ([#17717](https://github.com/tailwindlabs/tailwindcss/pull/17717))
+- Add `h-lh` / `min-h-lh` / `max-h-lh` utilities to match an elements line height ([#17790](https://github.com/tailwindlabs/tailwindcss/pull/17790))
 
 ### Fixed
 

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -4562,6 +4562,7 @@ exports[`getClassList 1`] = `
   "h-dvw",
   "h-fit",
   "h-full",
+  "h-lh",
   "h-lvh",
   "h-lvw",
   "h-max",
@@ -7482,6 +7483,7 @@ exports[`getClassList 1`] = `
   "max-h-dvw",
   "max-h-fit",
   "max-h-full",
+  "max-h-lh",
   "max-h-lvh",
   "max-h-lvw",
   "max-h-max",
@@ -7703,6 +7705,7 @@ exports[`getClassList 1`] = `
   "min-h-dvw",
   "min-h-fit",
   "min-h-full",
+  "min-h-lh",
   "min-h-lvh",
   "min-h-lvw",
   "min-h-max",

packages/tailwindcss/src/utilities.test.ts

@@ -2917,6 +2917,7 @@ test('height', async () => {
         'h-lvh',
         'h-dvh',
         'h-min',
+        'h-lh',
         'h-max',
         'h-fit',
         'h-4',
@@ -2957,6 +2958,10 @@ test('height', async () => {
       height: 100%;
     }
 
+    .h-lh {
+      height: 1lh;
+    }
+
     .h-lvh {
       height: 100lvh;
     }
@@ -2993,6 +2998,7 @@ test('height', async () => {
       'h-svh/foo',
       'h-lvh/foo',
       'h-dvh/foo',
+      'h-lh/foo',
       'h-min/foo',
       'h-max/foo',
       'h-fit/foo',
@@ -3020,6 +3026,7 @@ test('min-height', async () => {
         'min-h-lvh',
         'min-h-dvh',
         'min-h-min',
+        'min-h-lh',
         'min-h-max',
         'min-h-fit',
         'min-h-4',
@@ -3055,6 +3062,10 @@ test('min-height', async () => {
       min-height: 100%;
     }
 
+    .min-h-lh {
+      min-height: 1lh;
+    }
+
     .min-h-lvh {
       min-height: 100lvh;
     }
@@ -3086,6 +3097,7 @@ test('min-height', async () => {
       'min-h-svh/foo',
       'min-h-lvh/foo',
       'min-h-dvh/foo',
+      'min-h-lh/foo',
       'min-h-min/foo',
       'min-h-max/foo',
       'min-h-fit/foo',
@@ -3111,6 +3123,7 @@ test('max-height', async () => {
         'max-h-svh',
         'max-h-lvh',
         'max-h-dvh',
+        'max-h-lh',
         'max-h-min',
         'max-h-max',
         'max-h-fit',
@@ -3143,6 +3156,10 @@ test('max-height', async () => {
       max-height: 100%;
     }
 
+    .max-h-lh {
+      max-height: 1lh;
+    }
+
     .max-h-lvh {
       max-height: 100lvh;
     }
@@ -3179,6 +3196,7 @@ test('max-height', async () => {
       'max-h-svh/foo',
       'max-h-lvh/foo',
       'max-h-dvh/foo',
+      'max-h-lh/foo',
       'max-h-min/foo',
       'max-h-max/foo',
       'max-h-fit/foo',

packages/tailwindcss/src/utilities.ts

@@ -943,7 +943,6 @@ export function createUtilities(theme: Theme) {
    * @css `max-height`
    */
   for (let [key, value] of [
-    ['auto', 'auto'],
     ['full', '100%'],
     ['svw', '100svw'],
     ['lvw', '100lvw'],
@@ -964,12 +963,24 @@ export function createUtilities(theme: Theme) {
     staticUtility(`h-${key}`, [['height', value]])
     staticUtility(`min-w-${key}`, [['min-width', value]])
     staticUtility(`min-h-${key}`, [['min-height', value]])
-    if (key !== 'auto') {
-      staticUtility(`max-w-${key}`, [['max-width', value]])
-      staticUtility(`max-h-${key}`, [['max-height', value]])
-    }
+    staticUtility(`max-w-${key}`, [['max-width', value]])
+    staticUtility(`max-h-${key}`, [['max-height', value]])
   }
 
+  staticUtility(`size-auto`, [
+    ['--tw-sort', 'size'],
+    ['width', 'auto'],
+    ['height', 'auto'],
+  ])
+  staticUtility(`w-auto`, [['width', 'auto']])
+  staticUtility(`h-auto`, [['height', 'auto']])
+  staticUtility(`min-w-auto`, [['min-width', 'auto']])
+  staticUtility(`min-h-auto`, [['min-height', 'auto']])
+
+  staticUtility(`h-lh`, [['height', '1lh']])
+  staticUtility(`min-h-lh`, [['min-height', '1lh']])
+  staticUtility(`max-h-lh`, [['max-height', '1lh']])
+
   staticUtility(`w-screen`, [['width', '100vw']])
   staticUtility(`min-w-screen`, [['min-width', '100vw']])
   staticUtility(`max-w-screen`, [['max-width', '100vw']])