From 1a13886ab24d179f5b7a712c7e80fdfc7f49877a Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 2 Apr 2021 16:24:00 -0400
Subject: [PATCH] Add `isolation` utilities

---
 .../fixtures/tailwind-output-flagged.css      | 48 +++++++++++++++++++
 .../fixtures/tailwind-output-important.css    | 48 +++++++++++++++++++
 .../tailwind-output-no-color-opacity.css      | 48 +++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 48 +++++++++++++++++++
 jit/corePlugins/index.js                      |  1 +
 jit/corePlugins/isolation.js                  |  1 +
 jit/tests/basic-usage.test.css                |  6 +++
 jit/tests/basic-usage.test.html               |  1 +
 src/corePluginList.js                         |  1 +
 src/plugins/index.js                          |  1 +
 src/plugins/isolation.js                      | 15 ++++++
 stubs/defaultConfig.stub.js                   |  1 +
 12 files changed, 219 insertions(+)
 create mode 100644 jit/corePlugins/isolation.js
 create mode 100644 src/plugins/isolation.js

diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index cf751fb1b6f3..4cd852aac9b7 100644
--- 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
index f1cbf4bdb186..d478b50a96cc 100644
--- 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
index ed2f65f22343..a96554c2f655 100644
--- 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
index cf751fb1b6f3..4cd852aac9b7 100644
--- 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
index d2b9f2dbfd26..33bb94f2c9ee 100644
--- 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
new file mode 100644
index 000000000000..e3f6cdbd0d66
--- /dev/null
+++ 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
index 2e977f8e2ac1..ea3eb98a3781 100644
--- 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
index 46150f81c9c4..5289c1e50d68 100644
--- 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
index e8a0b04fae81..07dd33ebbfae 100644
--- a/src/corePluginList.js
+++ b/src/corePluginList.js
@@ -96,6 +96,7 @@ export const corePluginList = [
   'wordBreak',
   'width',
   'zIndex',
+  'isolation',
   'gap',
   'gridAutoFlow',
   'gridTemplateColumns',
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 58b1c401d69e..8844f40b5a0e 100644
--- a/src/plugins/index.js
+++ b/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'
diff --git a/src/plugins/isolation.js b/src/plugins/isolation.js
new file mode 100644
index 000000000000..6aaeabdfbd78
--- /dev/null
+++ b/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')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index dc40ae248fad..40a4d82c8cfe 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -792,6 +792,7 @@ module.exports = {
     gridTemplateRows: ['responsive'],
     height: ['responsive'],
     inset: ['responsive'],
+    isolation: ['responsive'],
     justifyContent: ['responsive'],
     justifyItems: ['responsive'],
     justifySelf: ['responsive'],