Add svh, lvh, and dvh values to default theme (#11317)

* Add svh, lvh, and dvh values to default theme * Update changelog --------- Co-authored-by: Adam Wathan <[email protected]>
tailwindlabs · Dec 4, 2023 · 831036a · 831036a
1 parent 3125829
commit 831036a
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,10 @@ 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.6] - 2023-12-04
 

diff --git 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
@@ -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
@@ -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
@@ -91,9 +91,10 @@ crosscheck(({ stable, oxide, engine }) => {
             <div class="list-disc"></div>
             <div class="list-image-none"></div>
             <div class="m-4 my-2 mx-auto mt-0 mr-1 mb-3 ml-4"></div>
-            <div class="max-h-screen"></div>
+            <div class="h-0 h-full h-screen h-svh h-lvh h-dvh"></div>
+            <div class="max-h-0 max-h-full max-h-screen max-h-svh max-h-lvh max-h-dvh"></div>
             <div class="max-w-full"></div>
-            <div class="min-h-0"></div>
+            <div class="min-h-0 min-h-full min-h-0 min-h-svh min-h-lvh min-h-dvh"></div>
             <div class="min-w-min"></div>
             <div class="object-cover"></div>
             <div class="object-bottom"></div>