Add isolation utilities (#3914)

tailwindlabs · Apr 2, 2021 · e1e66e3 · e1e66e3
1 parent b1aac51
commit e1e66e3
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 0 deletions.
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
@@ -25218,6 +25218,14 @@ video {
   z-index: auto;
 }
 
+.isolate {
+  isolation: isolate;
+}
+
+.isolation-auto {
+  isolation: auto;
+}
+
 .gap-0 {
   gap: 0px;
 }
@@ -53809,6 +53817,14 @@ video {
     z-index: auto;
   }
 
+  .sm\:isolate {
+    isolation: isolate;
+  }
+
+  .sm\:isolation-auto {
+    isolation: auto;
+  }
+
   .sm\:gap-0 {
     gap: 0px;
   }
@@ -82370,6 +82386,14 @@ video {
     z-index: auto;
   }
 
+  .md\:isolate {
+    isolation: isolate;
+  }
+
+  .md\:isolation-auto {
+    isolation: auto;
+  }
+
   .md\:gap-0 {
     gap: 0px;
   }
@@ -110931,6 +110955,14 @@ video {
     z-index: auto;
   }
 
+  .lg\:isolate {
+    isolation: isolate;
+  }
+
+  .lg\:isolation-auto {
+    isolation: auto;
+  }
+
   .lg\:gap-0 {
     gap: 0px;
   }
@@ -139492,6 +139524,14 @@ video {
     z-index: auto;
   }
 
+  .xl\:isolate {
+    isolation: isolate;
+  }
+
+  .xl\:isolation-auto {
+    isolation: auto;
+  }
+
   .xl\:gap-0 {
     gap: 0px;
   }
@@ -168053,6 +168093,14 @@ video {
     z-index: auto;
   }
 
+  .\32xl\:isolate {
+    isolation: isolate;
+  }
+
+  .\32xl\:isolation-auto {
+    isolation: auto;
+  }
+
   .\32xl\:gap-0 {
     gap: 0px;
   }

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
@@ -25218,6 +25218,14 @@ video {
   z-index: auto !important;
 }
 
+.isolate {
+  isolation: isolate !important;
+}
+
+.isolation-auto {
+  isolation: auto !important;
+}
+
 .gap-0 {
   gap: 0px !important;
 }
@@ -53809,6 +53817,14 @@ video {
     z-index: auto !important;
   }
 
+  .sm\:isolate {
+    isolation: isolate !important;
+  }
+
+  .sm\:isolation-auto {
+    isolation: auto !important;
+  }
+
   .sm\:gap-0 {
     gap: 0px !important;
   }
@@ -82370,6 +82386,14 @@ video {
     z-index: auto !important;
   }
 
+  .md\:isolate {
+    isolation: isolate !important;
+  }
+
+  .md\:isolation-auto {
+    isolation: auto !important;
+  }
+
   .md\:gap-0 {
     gap: 0px !important;
   }
@@ -110931,6 +110955,14 @@ video {
     z-index: auto !important;
   }
 
+  .lg\:isolate {
+    isolation: isolate !important;
+  }
+
+  .lg\:isolation-auto {
+    isolation: auto !important;
+  }
+
   .lg\:gap-0 {
     gap: 0px !important;
   }
@@ -139492,6 +139524,14 @@ video {
     z-index: auto !important;
   }
 
+  .xl\:isolate {
+    isolation: isolate !important;
+  }
+
+  .xl\:isolation-auto {
+    isolation: auto !important;
+  }
+
   .xl\:gap-0 {
     gap: 0px !important;
   }
@@ -168053,6 +168093,14 @@ video {
     z-index: auto !important;
   }
 
+  .\32xl\:isolate {
+    isolation: isolate !important;
+  }
+
+  .\32xl\:isolation-auto {
+    isolation: auto !important;
+  }
+
   .\32xl\:gap-0 {
     gap: 0px !important;
   }

diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -22662,6 +22662,14 @@ video {
   z-index: auto;
 }
 
+.isolate {
+  isolation: isolate;
+}
+
+.isolation-auto {
+  isolation: auto;
+}
+
 .gap-0 {
   gap: 0px;
 }
@@ -48697,6 +48705,14 @@ video {
     z-index: auto;
   }
 
+  .sm\:isolate {
+    isolation: isolate;
+  }
+
+  .sm\:isolation-auto {
+    isolation: auto;
+  }
+
   .sm\:gap-0 {
     gap: 0px;
   }
@@ -74702,6 +74718,14 @@ video {
     z-index: auto;
   }
 
+  .md\:isolate {
+    isolation: isolate;
+  }
+
+  .md\:isolation-auto {
+    isolation: auto;
+  }
+
   .md\:gap-0 {
     gap: 0px;
   }
@@ -100707,6 +100731,14 @@ video {
     z-index: auto;
   }
 
+  .lg\:isolate {
+    isolation: isolate;
+  }
+
+  .lg\:isolation-auto {
+    isolation: auto;
+  }
+
   .lg\:gap-0 {
     gap: 0px;
   }
@@ -126712,6 +126744,14 @@ video {
     z-index: auto;
   }
 
+  .xl\:isolate {
+    isolation: isolate;
+  }
+
+  .xl\:isolation-auto {
+    isolation: auto;
+  }
+
   .xl\:gap-0 {
     gap: 0px;
   }
@@ -152717,6 +152757,14 @@ video {
     z-index: auto;
   }
 
+  .\32xl\:isolate {
+    isolation: isolate;
+  }
+
+  .\32xl\:isolation-auto {
+    isolation: auto;
+  }
+
   .\32xl\:gap-0 {
     gap: 0px;
   }

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
@@ -25218,6 +25218,14 @@ video {
   z-index: auto;
 }
 
+.isolate {
+  isolation: isolate;
+}
+
+.isolation-auto {
+  isolation: auto;
+}
+
 .gap-0 {
   gap: 0px;
 }
@@ -53809,6 +53817,14 @@ video {
     z-index: auto;
   }
 
+  .sm\:isolate {
+    isolation: isolate;
+  }
+
+  .sm\:isolation-auto {
+    isolation: auto;
+  }
+
   .sm\:gap-0 {
     gap: 0px;
   }
@@ -82370,6 +82386,14 @@ video {
     z-index: auto;
   }
 
+  .md\:isolate {
+    isolation: isolate;
+  }
+
+  .md\:isolation-auto {
+    isolation: auto;
+  }
+
   .md\:gap-0 {
     gap: 0px;
   }
@@ -110931,6 +110955,14 @@ video {
     z-index: auto;
   }
 
+  .lg\:isolate {
+    isolation: isolate;
+  }
+
+  .lg\:isolation-auto {
+    isolation: auto;
+  }
+
   .lg\:gap-0 {
     gap: 0px;
   }
@@ -139492,6 +139524,14 @@ video {
     z-index: auto;
   }
 
+  .xl\:isolate {
+    isolation: isolate;
+  }
+
+  .xl\:isolation-auto {
+    isolation: auto;
+  }
+
   .xl\:gap-0 {
     gap: 0px;
   }
@@ -168053,6 +168093,14 @@ video {
     z-index: auto;
   }
 
+  .\32xl\:isolate {
+    isolation: isolate;
+  }
+
+  .\32xl\:isolation-auto {
+    isolation: auto;
+  }
+
   .\32xl\:gap-0 {
     gap: 0px;
   }

diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js
@@ -165,6 +165,7 @@ module.exports = {
   visibility: require('./visibility'),
   position: require('./position'),
   inset: require('./inset'),
+  isolation: require('./isolation'),
   zIndex: require('./zIndex'),
   order: require('./order'),
   gridColumn: require('./gridColumn'),

diff --git a/jit/corePlugins/isolation.js b/jit/corePlugins/isolation.js
@@ -0,0 +1 @@
+module.exports = require('../../lib/plugins/isolation').default()
diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css
@@ -81,6 +81,12 @@
 .left-16 {
   left: 4rem;
 }
+.isolate {
+  isolation: isolate;
+}
+.isolation-auto {
+  isolation: auto;
+}
 .z-30 {
   z-index: 30;
 }

diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html
@@ -72,6 +72,7 @@
     <div class="grid-rows-3"></div>
     <div class="h-16"></div>
     <div class="inset-0 inset-y-4 inset-x-2 top-6 right-8 bottom-12 left-16"></div>
+    <div class="isolate isolation-auto"></div>
     <div class="justify-center"></div>
     <div class="justify-items-end"></div>
     <div class="justify-self-start"></div>

diff --git a/src/corePluginList.js b/src/corePluginList.js
@@ -96,6 +96,7 @@ export const corePluginList = [
   'wordBreak',
   'width',
   'zIndex',
+  'isolation',
   'gap',
   'gridAutoFlow',
   'gridTemplateColumns',