Add touch-action utilities (#5603)

Co-Authored-By: Mattèo Gauthier <[email protected]> Co-authored-by: Mattèo Gauthier <[email protected]>
tailwindlabs · Sep 26, 2021 · e602a3d · e602a3d
1 parent 2959b83
commit e602a3d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/src/corePlugins.js b/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' },

diff --git a/tests/basic-usage.test.css b/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;
 }

diff --git a/tests/basic-usage.test.html b/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>