Merge pull request #2075 from wadefletch/master

Add overscroll features (Resolves #1957)

Author: adamwathan

__tests__/fixtures/tailwind-output-ie11.css

@@ -6133,6 +6133,42 @@ 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;
 }

__tests__/fixtures/tailwind-output-important.css

@@ -7813,6 +7813,42 @@ video {
   -webkit-overflow-scrolling: auto !important;
 }
 
+.overscroll-auto {
+  overscroll-behavior: auto !important;
+}
+
+.overscroll-contain {
+  overscroll-behavior: contain !important;
+}
+
+.overscroll-none {
+  overscroll-behavior: none !important;
+}
+
+.overscroll-y-auto {
+  overscroll-behavior-y: auto !important;
+}
+
+.overscroll-y-contain {
+  overscroll-behavior-y: contain !important;
+}
+
+.overscroll-y-none {
+  overscroll-behavior-y: none !important;
+}
+
+.overscroll-x-auto {
+  overscroll-behavior-x: auto !important;
+}
+
+.overscroll-x-contain {
+  overscroll-behavior-x: contain !important;
+}
+
+.overscroll-x-none {
+  overscroll-behavior-x: none !important;
+}
+
 .p-0 {
   padding: 0 !important;
 }

__tests__/fixtures/tailwind-output-no-color-opacity.css

@@ -6385,6 +6385,42 @@ 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;
 }

__tests__/fixtures/tailwind-output.css

@@ -7813,6 +7813,42 @@ 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;
 }

src/corePlugins.js

@@ -46,6 +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 padding from './plugins/padding'
 import placeholderColor from './plugins/placeholderColor'
 import pointerEvents from './plugins/pointerEvents'
@@ -155,6 +156,7 @@ export default function({ corePlugins: corePluginConfig }) {
     opacity,
     outline,
     overflow,
+    overscroll,
     padding,
     placeholderColor,
     placeholderOpacity,

src/plugins/overscroll.js

@@ -0,0 +1,18 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.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' },
+      },
+      variants('overscroll')
+    )
+  }
+}