Add touch-action utilities (#5603)

Co-Authored-By: Mattèo Gauthier <[email protected]>

Co-authored-by: Mattèo Gauthier <[email protected]>

Author: adamwathan

src/corePlugins.js

@@ -775,6 +775,21 @@ export default {
 
   cursor: createUtilityPlugin('cursor'),
 
+  touchAction: ({ addUtilities }) => {
+    addUtilities({
+      '.touch-auto': { 'touch-action': 'auto' },
+      '.touch-none': { 'touch-action': 'none' },
+      '.touch-pan-x': { 'touch-action': 'pan-x' },
+      '.touch-pan-left': { 'touch-action': 'pan-left' },
+      '.touch-pan-right': { 'touch-action': 'pan-right' },
+      '.touch-pan-y': { 'touch-action': 'pan-y' },
+      '.touch-pan-up': { 'touch-action': 'pan-up' },
+      '.touch-pan-down': { 'touch-action': 'pan-down' },
+      '.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' },
+      '.touch-manipulation': { 'touch-action': 'manipulation' },
+    })
+  },
+
   userSelect: ({ addUtilities }) => {
     addUtilities({
       '.select-none': { 'user-select': 'none' },

tests/basic-usage.test.css

@@ -299,6 +299,12 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-pan-y {
+  touch-action: pan-y;
+}
+.touch-manipulation {
+  touch-action: manipulation;
+}
 .select-none {
   user-select: none;
 }

tests/basic-usage.test.html

@@ -39,6 +39,7 @@
     <div class="clear-left"></div>
     <div class="container"></div>
     <div class="cursor-pointer"></div>
+    <div class="touch-pan-y touch-manipulation"></div>
     <div class="hidden inline-grid"></div>
     <div class="divide-gray-200"></div>
     <div class="divide-opacity-50"></div>