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 @@
+
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'],