diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index ea5ce43fa..7e06186a7 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -6133,42 +6133,6 @@ video { -webkit-overflow-scrolling: auto; } -.overscroll-auto { - overscroll-behavior: auto; -} - -.overscroll-contain { - overscroll-behavior: contain; -} - -.overscroll-none { - overscroll-behavior: none; -} - -.overscroll-y-auto { - overscroll-behavior-y: auto; -} - -.overscroll-y-contain { - overscroll-behavior-y: contain; -} - -.overscroll-y-none { - overscroll-behavior-y: none; -} - -.overscroll-x-auto { - overscroll-behavior-x: auto; -} - -.overscroll-x-contain { - overscroll-behavior-x: contain; -} - -.overscroll-x-none { - overscroll-behavior-x: none; -} - .p-0 { padding: 0; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 406488135..aa8399c3b 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -21634,6 +21634,42 @@ video { -webkit-overflow-scrolling: auto !important; } + .sm\:overscroll-auto { + overscroll-behavior: auto !important; + } + + .sm\:overscroll-contain { + overscroll-behavior: contain !important; + } + + .sm\:overscroll-none { + overscroll-behavior: none !important; + } + + .sm\:overscroll-y-auto { + overscroll-behavior-y: auto !important; + } + + .sm\:overscroll-y-contain { + overscroll-behavior-y: contain !important; + } + + .sm\:overscroll-y-none { + overscroll-behavior-y: none !important; + } + + .sm\:overscroll-x-auto { + overscroll-behavior-x: auto !important; + } + + .sm\:overscroll-x-contain { + overscroll-behavior-x: contain !important; + } + + .sm\:overscroll-x-none { + overscroll-behavior-x: none !important; + } + .sm\:p-0 { padding: 0 !important; } @@ -35420,6 +35456,42 @@ video { -webkit-overflow-scrolling: auto !important; } + .md\:overscroll-auto { + overscroll-behavior: auto !important; + } + + .md\:overscroll-contain { + overscroll-behavior: contain !important; + } + + .md\:overscroll-none { + overscroll-behavior: none !important; + } + + .md\:overscroll-y-auto { + overscroll-behavior-y: auto !important; + } + + .md\:overscroll-y-contain { + overscroll-behavior-y: contain !important; + } + + .md\:overscroll-y-none { + overscroll-behavior-y: none !important; + } + + .md\:overscroll-x-auto { + overscroll-behavior-x: auto !important; + } + + .md\:overscroll-x-contain { + overscroll-behavior-x: contain !important; + } + + .md\:overscroll-x-none { + overscroll-behavior-x: none !important; + } + .md\:p-0 { padding: 0 !important; } @@ -49206,6 +49278,42 @@ video { -webkit-overflow-scrolling: auto !important; } + .lg\:overscroll-auto { + overscroll-behavior: auto !important; + } + + .lg\:overscroll-contain { + overscroll-behavior: contain !important; + } + + .lg\:overscroll-none { + overscroll-behavior: none !important; + } + + .lg\:overscroll-y-auto { + overscroll-behavior-y: auto !important; + } + + .lg\:overscroll-y-contain { + overscroll-behavior-y: contain !important; + } + + .lg\:overscroll-y-none { + overscroll-behavior-y: none !important; + } + + .lg\:overscroll-x-auto { + overscroll-behavior-x: auto !important; + } + + .lg\:overscroll-x-contain { + overscroll-behavior-x: contain !important; + } + + .lg\:overscroll-x-none { + overscroll-behavior-x: none !important; + } + .lg\:p-0 { padding: 0 !important; } @@ -62992,6 +63100,42 @@ video { -webkit-overflow-scrolling: auto !important; } + .xl\:overscroll-auto { + overscroll-behavior: auto !important; + } + + .xl\:overscroll-contain { + overscroll-behavior: contain !important; + } + + .xl\:overscroll-none { + overscroll-behavior: none !important; + } + + .xl\:overscroll-y-auto { + overscroll-behavior-y: auto !important; + } + + .xl\:overscroll-y-contain { + overscroll-behavior-y: contain !important; + } + + .xl\:overscroll-y-none { + overscroll-behavior-y: none !important; + } + + .xl\:overscroll-x-auto { + overscroll-behavior-x: auto !important; + } + + .xl\:overscroll-x-contain { + overscroll-behavior-x: contain !important; + } + + .xl\:overscroll-x-none { + overscroll-behavior-x: none !important; + } + .xl\:p-0 { padding: 0 !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index 6a7c0f3f6..c3a640132 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -17758,6 +17758,42 @@ video { -webkit-overflow-scrolling: auto; } + .sm\:overscroll-auto { + overscroll-behavior: auto; + } + + .sm\:overscroll-contain { + overscroll-behavior: contain; + } + + .sm\:overscroll-none { + overscroll-behavior: none; + } + + .sm\:overscroll-y-auto { + overscroll-behavior-y: auto; + } + + .sm\:overscroll-y-contain { + overscroll-behavior-y: contain; + } + + .sm\:overscroll-y-none { + overscroll-behavior-y: none; + } + + .sm\:overscroll-x-auto { + overscroll-behavior-x: auto; + } + + .sm\:overscroll-x-contain { + overscroll-behavior-x: contain; + } + + .sm\:overscroll-x-none { + overscroll-behavior-x: none; + } + .sm\:p-0 { padding: 0; } @@ -29096,6 +29132,42 @@ video { -webkit-overflow-scrolling: auto; } + .md\:overscroll-auto { + overscroll-behavior: auto; + } + + .md\:overscroll-contain { + overscroll-behavior: contain; + } + + .md\:overscroll-none { + overscroll-behavior: none; + } + + .md\:overscroll-y-auto { + overscroll-behavior-y: auto; + } + + .md\:overscroll-y-contain { + overscroll-behavior-y: contain; + } + + .md\:overscroll-y-none { + overscroll-behavior-y: none; + } + + .md\:overscroll-x-auto { + overscroll-behavior-x: auto; + } + + .md\:overscroll-x-contain { + overscroll-behavior-x: contain; + } + + .md\:overscroll-x-none { + overscroll-behavior-x: none; + } + .md\:p-0 { padding: 0; } @@ -40434,6 +40506,42 @@ video { -webkit-overflow-scrolling: auto; } + .lg\:overscroll-auto { + overscroll-behavior: auto; + } + + .lg\:overscroll-contain { + overscroll-behavior: contain; + } + + .lg\:overscroll-none { + overscroll-behavior: none; + } + + .lg\:overscroll-y-auto { + overscroll-behavior-y: auto; + } + + .lg\:overscroll-y-contain { + overscroll-behavior-y: contain; + } + + .lg\:overscroll-y-none { + overscroll-behavior-y: none; + } + + .lg\:overscroll-x-auto { + overscroll-behavior-x: auto; + } + + .lg\:overscroll-x-contain { + overscroll-behavior-x: contain; + } + + .lg\:overscroll-x-none { + overscroll-behavior-x: none; + } + .lg\:p-0 { padding: 0; } @@ -51772,6 +51880,42 @@ video { -webkit-overflow-scrolling: auto; } + .xl\:overscroll-auto { + overscroll-behavior: auto; + } + + .xl\:overscroll-contain { + overscroll-behavior: contain; + } + + .xl\:overscroll-none { + overscroll-behavior: none; + } + + .xl\:overscroll-y-auto { + overscroll-behavior-y: auto; + } + + .xl\:overscroll-y-contain { + overscroll-behavior-y: contain; + } + + .xl\:overscroll-y-none { + overscroll-behavior-y: none; + } + + .xl\:overscroll-x-auto { + overscroll-behavior-x: auto; + } + + .xl\:overscroll-x-contain { + overscroll-behavior-x: contain; + } + + .xl\:overscroll-x-none { + overscroll-behavior-x: none; + } + .xl\:p-0 { padding: 0; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index de92257bf..6251b6d39 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -21634,6 +21634,42 @@ video { -webkit-overflow-scrolling: auto; } + .sm\:overscroll-auto { + overscroll-behavior: auto; + } + + .sm\:overscroll-contain { + overscroll-behavior: contain; + } + + .sm\:overscroll-none { + overscroll-behavior: none; + } + + .sm\:overscroll-y-auto { + overscroll-behavior-y: auto; + } + + .sm\:overscroll-y-contain { + overscroll-behavior-y: contain; + } + + .sm\:overscroll-y-none { + overscroll-behavior-y: none; + } + + .sm\:overscroll-x-auto { + overscroll-behavior-x: auto; + } + + .sm\:overscroll-x-contain { + overscroll-behavior-x: contain; + } + + .sm\:overscroll-x-none { + overscroll-behavior-x: none; + } + .sm\:p-0 { padding: 0; } @@ -35420,6 +35456,42 @@ video { -webkit-overflow-scrolling: auto; } + .md\:overscroll-auto { + overscroll-behavior: auto; + } + + .md\:overscroll-contain { + overscroll-behavior: contain; + } + + .md\:overscroll-none { + overscroll-behavior: none; + } + + .md\:overscroll-y-auto { + overscroll-behavior-y: auto; + } + + .md\:overscroll-y-contain { + overscroll-behavior-y: contain; + } + + .md\:overscroll-y-none { + overscroll-behavior-y: none; + } + + .md\:overscroll-x-auto { + overscroll-behavior-x: auto; + } + + .md\:overscroll-x-contain { + overscroll-behavior-x: contain; + } + + .md\:overscroll-x-none { + overscroll-behavior-x: none; + } + .md\:p-0 { padding: 0; } @@ -49206,6 +49278,42 @@ video { -webkit-overflow-scrolling: auto; } + .lg\:overscroll-auto { + overscroll-behavior: auto; + } + + .lg\:overscroll-contain { + overscroll-behavior: contain; + } + + .lg\:overscroll-none { + overscroll-behavior: none; + } + + .lg\:overscroll-y-auto { + overscroll-behavior-y: auto; + } + + .lg\:overscroll-y-contain { + overscroll-behavior-y: contain; + } + + .lg\:overscroll-y-none { + overscroll-behavior-y: none; + } + + .lg\:overscroll-x-auto { + overscroll-behavior-x: auto; + } + + .lg\:overscroll-x-contain { + overscroll-behavior-x: contain; + } + + .lg\:overscroll-x-none { + overscroll-behavior-x: none; + } + .lg\:p-0 { padding: 0; } @@ -62992,6 +63100,42 @@ video { -webkit-overflow-scrolling: auto; } + .xl\:overscroll-auto { + overscroll-behavior: auto; + } + + .xl\:overscroll-contain { + overscroll-behavior: contain; + } + + .xl\:overscroll-none { + overscroll-behavior: none; + } + + .xl\:overscroll-y-auto { + overscroll-behavior-y: auto; + } + + .xl\:overscroll-y-contain { + overscroll-behavior-y: contain; + } + + .xl\:overscroll-y-none { + overscroll-behavior-y: none; + } + + .xl\:overscroll-x-auto { + overscroll-behavior-x: auto; + } + + .xl\:overscroll-x-contain { + overscroll-behavior-x: contain; + } + + .xl\:overscroll-x-none { + overscroll-behavior-x: none; + } + .xl\:p-0 { padding: 0; } diff --git a/src/corePlugins.js b/src/corePlugins.js index 74c989b9b..2a14f2b0e 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -46,7 +46,7 @@ import objectPosition from './plugins/objectPosition' import opacity from './plugins/opacity' import outline from './plugins/outline' import overflow from './plugins/overflow' -import overscroll from './plugins/overscroll' +import overscrollBehavior from './plugins/overscrollBehavior' import padding from './plugins/padding' import placeholderColor from './plugins/placeholderColor' import pointerEvents from './plugins/pointerEvents' @@ -156,7 +156,7 @@ export default function({ corePlugins: corePluginConfig }) { opacity, outline, overflow, - overscroll, + overscrollBehavior, padding, placeholderColor, placeholderOpacity, diff --git a/src/plugins/overscroll.js b/src/plugins/overscrollBehavior.js similarity index 80% rename from src/plugins/overscroll.js rename to src/plugins/overscrollBehavior.js index 5ef010ae7..f736c97c3 100644 --- a/src/plugins/overscroll.js +++ b/src/plugins/overscrollBehavior.js @@ -1,5 +1,9 @@ export default function() { - return function({ addUtilities, variants }) { + return function({ addUtilities, variants, target }) { + if (target('overscrollBehavior') === 'ie11') { + return + } + addUtilities( { '.overscroll-auto': { 'overscroll-behavior': 'auto' }, @@ -12,7 +16,7 @@ export default function() { '.overscroll-x-contain': { 'overscroll-behavior-x': 'contain' }, '.overscroll-x-none': { 'overscroll-behavior-x': 'none' }, }, - variants('overscroll') + variants('overscrollBehavior') ) } } diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index f75f95f3f..cba3864e5 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -711,6 +711,7 @@ module.exports = { order: ['responsive'], outline: ['responsive', 'focus'], overflow: ['responsive'], + overscrollBehavior: ['responsive'], padding: ['responsive'], placeholderColor: ['responsive', 'focus'], placeholderOpacity: ['responsive', 'focus'],