From f4d89877db1109da525aab13f54efdde98c5931f Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 17 Nov 2021 12:37:15 +0100
Subject: [PATCH 1/2] add combinable `touch-action` support

---
 src/corePlugins.js          | 53 +++++++++++++++++++++++++++++++------
 tests/basic-usage.test.css  | 25 ++++++++++++++++-
 tests/basic-usage.test.html |  1 +
 3 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 831358270858..a87825286ab7 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -602,17 +602,54 @@ export let corePlugins = {
 
   cursor: createUtilityPlugin('cursor'),
 
-  touchAction: ({ addUtilities }) => {
+  touchAction: ({ addBase, addUtilities }) => {
+    addBase({
+      '@defaults touch-action': {
+        '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
+      },
+    })
+
     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-pan-x': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-x',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-left': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-left',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-right': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-right',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-y': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-y',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-up': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-up',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-down': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-down',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pinch-zoom': {
+        '@defaults touch-action': {},
+        '--tw-pinch-zoom': 'pinch-zoom',
+        'touch-action': 'var(--tw-touch-action)',
+      },
       '.touch-manipulation': { 'touch-action': 'manipulation' },
     })
   },
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 3e491b6b07ee..6eb35b5b53f4 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -19,6 +19,16 @@
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.touch-pan-x,
+.touch-pan-y,
+.touch-pan-up,
+.touch-pinch-zoom {
+  --tw-pan-x: var(--tw-empty, /*!*/ /*!*/);
+  --tw-pan-y: var(--tw-empty, /*!*/ /*!*/);
+  --tw-pinch-zoom: var(--tw-empty, /*!*/ /*!*/);
+  --tw-touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
+}
+
 .snap-x {
   --tw-scroll-snap-strictness: proximity;
 }
@@ -374,8 +384,21 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-pan-x {
+  --tw-pan-x: pan-x;
+  touch-action: var(--tw-touch-action);
+}
 .touch-pan-y {
-  touch-action: pan-y;
+  --tw-pan-y: pan-y;
+  touch-action: var(--tw-touch-action);
+}
+.touch-pan-up {
+  --tw-pan-y: pan-up;
+  touch-action: var(--tw-touch-action);
+}
+.touch-pinch-zoom {
+  --tw-pinch-zoom: pinch-zoom;
+  touch-action: var(--tw-touch-action);
 }
 .touch-manipulation {
   touch-action: manipulation;
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
index 9d90c57a6629..4a64e43c51ae 100644
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -170,6 +170,7 @@
     <div class="transition transition-all"></div>
     <div class="ease-in-out"></div>
     <div class="translate-x-5 -translate-x-4 translate-y-6 -translate-x-3"></div>
+    <div class="touch-pan-up touch-pan-x touch-pinch-zoom"></div>
     <div class="select-none"></div>
     <div class="align-middle"></div>
     <div class="invisible"></div>

From 1b6a4b91fa4222847111907fe06fc0a2e95986dd Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 17 Nov 2021 15:49:21 +0100
Subject: [PATCH 2/2] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1965c00b164..4de3bc821e6b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add `placeholder` variant ([#6106](https://github.com/tailwindlabs/tailwindcss/pull/6106))
 - Add tuple syntax for configuring screens while guaranteeing order ([#5956](https://github.com/tailwindlabs/tailwindcss/pull/5956))
+- Add combinable `touch-action` support ([#6115](https://github.com/tailwindlabs/tailwindcss/pull/6115))
 
 ## [3.0.0-alpha.2] - 2021-11-08