Add isolation utilities (#3914)

__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;
   }

__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;
   }

__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;
   }

__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;
   }

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'),

jit/corePlugins/isolation.js

@@ -0,0 +1 @@
+module.exports = require('../../lib/plugins/isolation').default()

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;
 }

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>

src/corePluginList.js

@@ -96,6 +96,7 @@ export const corePluginList = [
   'wordBreak',
   'width',
   'zIndex',
+  'isolation',
   'gap',
   'gridAutoFlow',
   'gridTemplateColumns',

src/plugins/index.js

@@ -57,6 +57,7 @@ export { default as gridTemplateColumns } from './gridTemplateColumns'
 export { default as gridTemplateRows } from './gridTemplateRows'
 export { default as height } from './height'
 export { default as inset } from './inset'
+export { default as isolation } from './isolation'
 export { default as justifyContent } from './justifyContent'
 export { default as justifyItems } from './justifyItems'
 export { default as justifySelf } from './justifySelf'

src/plugins/isolation.js

@@ -0,0 +1,15 @@
+export default function () {
+  return function ({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.isolate': {
+          isolation: 'isolate',
+        },
+        '.isolation-auto': {
+          isolation: 'auto',
+        },
+      },
+      variants('isolation')
+    )
+  }
+}

stubs/defaultConfig.stub.js

@@ -792,6 +792,7 @@ module.exports = {
     gridTemplateRows: ['responsive'],
     height: ['responsive'],
     inset: ['responsive'],
+    isolation: ['responsive'],
     justifyContent: ['responsive'],
     justifyItems: ['responsive'],
     justifySelf: ['responsive'],