diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b8158e2edc3..beca233673a9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 2a2c23d3bfbd..8c3b136a79ac 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/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", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 549f556e3ed2..1b7cf00edd16 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/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', diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index c695ae13d106..40050cfd2ab1 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/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']])