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 <4323180+adamwathan@users.noreply.github.com>
tailwindlabs · May 30, 2023 · 7248f21 · 7248f21
1 parent 820815b
commit 7248f21
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use `lightningcss` for nesting and vendor prefixes in PostCSS plugin ([#10399](https://github.com/tailwindlabs/tailwindcss/pull/10399))
 - Automatically detect content paths when no `content` configuration is provided ([#11173](https://github.com/tailwindlabs/tailwindcss/pull/11173), [#11221](https://github.com/tailwindlabs/tailwindcss/pull/11221))
 - Process and inline `@import` at-rules natively ([#11239](https://github.com/tailwindlabs/tailwindcss/pull/11239))
+- Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317))
 
 ### Changed
 

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.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
@@ -90,9 +90,10 @@ test('basic usage', () => {
           <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>