diff --git a/CHANGELOG.md b/CHANGELOG.md index 31f65b985218..8afb2ce4fe8d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Added + +- Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) ## [3.3.7] - 2023-12-18 diff --git a/stubs/config.full.js b/stubs/config.full.js index 2dd01c6fd467..ed0b5a9860f0 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -517,6 +517,9 @@ module.exports = { '5/6': '83.333333%', full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', @@ -621,6 +624,9 @@ module.exports = { none: 'none', full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', @@ -650,6 +656,9 @@ module.exports = { 0: '0px', full: '100%', screen: '100vh', + svh: '100svh', + lvh: '100lvh', + dvh: '100dvh', min: 'min-content', max: 'max-content', fit: 'fit-content', @@ -967,6 +976,9 @@ module.exports = { '11/12': '91.666667%', full: '100%', screen: '100vw', + svw: '100svw', + lvw: '100lvw', + dvw: '100dvw', min: 'min-content', max: 'max-content', fit: 'fit-content', diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css index 6a01dc045efa..455e672ee7b4 100644 --- a/tests/basic-usage.oxide.test.css +++ b/tests/basic-usage.oxide.test.css @@ -201,15 +201,60 @@ .aspect-video { aspect-ratio: 16 / 9; } +.h-0 { + height: 0; +} .h-16 { height: 4rem; } +.h-dvh { + height: 100dvh; +} +.h-full { + height: 100%; +} +.h-lvh { + height: 100lvh; +} +.h-screen { + height: 100vh; +} +.h-svh { + height: 100svh; +} +.max-h-0 { + max-height: 0; +} +.max-h-dvh { + max-height: 100dvh; +} +.max-h-full { + max-height: 100%; +} +.max-h-lvh { + max-height: 100lvh; +} .max-h-screen { max-height: 100vh; } +.max-h-svh { + max-height: 100svh; +} .min-h-0 { min-height: 0; } +.min-h-dvh { + min-height: 100dvh; +} +.min-h-full { + min-height: 100%; +} +.min-h-lvh { + min-height: 100lvh; +} +.min-h-svh { + min-height: 100svh; +} .w-12 { width: 3rem; } diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 720c783e91ab..8d1ba2da8dd1 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -201,15 +201,60 @@ .aspect-video { aspect-ratio: 16 / 9; } +.h-0 { + height: 0; +} .h-16 { height: 4rem; } +.h-dvh { + height: 100dvh; +} +.h-full { + height: 100%; +} +.h-lvh { + height: 100lvh; +} +.h-screen { + height: 100vh; +} +.h-svh { + height: 100svh; +} +.max-h-0 { + max-height: 0; +} +.max-h-dvh { + max-height: 100dvh; +} +.max-h-full { + max-height: 100%; +} +.max-h-lvh { + max-height: 100lvh; +} .max-h-screen { max-height: 100vh; } +.max-h-svh { + max-height: 100svh; +} .min-h-0 { min-height: 0; } +.min-h-dvh { + min-height: 100dvh; +} +.min-h-full { + min-height: 100%; +} +.min-h-lvh { + min-height: 100lvh; +} +.min-h-svh { + min-height: 100svh; +} .w-12 { width: 3rem; } diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 24bae0e68537..c8a560c3b05e 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -91,9 +91,10 @@ crosscheck(({ stable, oxide, engine }) => {
- + + - +