From fa0827b7e8c2770e043e6cc16802a7992d8415a9 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 26 Sep 2021 09:36:50 -0400
Subject: [PATCH] Add touch-action utilities
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Mattèo Gauthier <matteo.gauthier@gmail.com>
---
 src/corePlugins.js          | 15 +++++++++++++++
 tests/basic-usage.test.css  |  6 ++++++
 tests/basic-usage.test.html |  1 +
 3 files changed, 22 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index ba56033d76cf..f3f04a638ed2 100644
--- 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
index 00bb9e4115b7..eed0e41014ce 100644
--- 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
index 01103fc3bff7..91e4bced1f27 100644
--- 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>