From 0f9c4fcc5d1ee875d65013a6ad7adfa8a1a407db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A8o=20Gauthier?= <matteo.gauthier@gmail.com>
Date: Mon, 21 Jun 2021 01:16:14 +0200
Subject: [PATCH 1/4] Adding touch-action utility

---
 src/plugins/index.js            |  1 +
 src/plugins/touchAction.js      | 19 +++++++++++++++++++
 stubs/defaultConfig.stub.js     | 12 ++++++++++++
 tests/jit/basic-usage.test.css  |  3 +++
 tests/jit/basic-usage.test.html | 19 ++++++++++---------
 5 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 src/plugins/touchAction.js

diff --git a/src/plugins/index.js b/src/plugins/index.js
index be8f4b284362..76611c150782 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -32,6 +32,7 @@ export { default as flexShrink } from './flexShrink'
 export { default as flexGrow } from './flexGrow'
 export { default as tableLayout } from './tableLayout'
 export { default as borderCollapse } from './borderCollapse'
+export { default as touchAction } from './touchAction'
 
 export { default as transformOrigin } from './transformOrigin'
 export { default as translate } from './translate'
diff --git a/src/plugins/touchAction.js b/src/plugins/touchAction.js
new file mode 100644
index 000000000000..32939a16a18f
--- /dev/null
+++ b/src/plugins/touchAction.js
@@ -0,0 +1,19 @@
+export default function () {
+  return function ({ addUtilities, variants }) {
+    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' },
+      },
+      variants('touchAction')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 3dfba6bbde48..33df295ab409 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -693,6 +693,18 @@ module.exports = {
     },
     textColor: (theme) => theme('colors'),
     textOpacity: (theme) => theme('opacity'),
+    touchAction: {
+      'auto': 'auto',
+      'none': 'none',
+      'pan-x': 'pan-x',
+      'pan-left': 'pan-left',
+      'pan-right': 'pan-right',
+      'pan-y': 'pan-y',
+      'pan-up': 'pan-up',
+      'pan-down': 'pan-down',
+      'pinch-zoom': 'pinch-zoom',
+      'manipulation': 'manipulation',
+    },
     transformOrigin: {
       center: 'center',
       top: 'top',
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index e4ceeffd38cd..8178d2dd0258 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -807,3 +807,6 @@
 .content-none {
   content: none;
 }
+.touch-manipulation {
+  touch-action: manipulation;
+}
diff --git a/tests/jit/basic-usage.test.html b/tests/jit/basic-usage.test.html
index aeab54ede8db..52521321aab6 100644
--- a/tests/jit/basic-usage.test.html
+++ b/tests/jit/basic-usage.test.html
@@ -39,11 +39,11 @@
     <div class="clear-left"></div>
     <div class="container"></div>
     <div class="cursor-pointer"></div>
-    <div class="hidden inline-grid"></div>
+    <div class="inline-grid hidden"></div>
     <div class="divide-gray-200"></div>
     <div class="divide-opacity-50"></div>
     <div class="divide-dotted"></div>
-    <div class="divide-x-2 divide-y-4 divide-x-0 divide-y-0"></div>
+    <div class="divide-x-0 divide-x-2 divide-y-0 divide-y-4"></div>
     <div class="fill-current"></div>
     <div class="flex-1"></div>
     <div class="flex-row-reverse"></div>
@@ -59,7 +59,7 @@
     <div class="not-italic"></div>
     <div class="tabular-nums ordinal diagonal-fractions"></div>
     <div class="font-medium"></div>
-    <div class="gap-x-2 gap-y-3 gap-4"></div>
+    <div class="gap-4 gap-x-2 gap-y-3"></div>
     <div class="from-red-300 via-purple-200 to-blue-400"></div>
     <div class="auto-cols-min"></div>
     <div class="grid-flow-row"></div>
@@ -82,7 +82,7 @@
     <div class="leading-relaxed leading-5"></div>
     <div class="list-inside"></div>
     <div class="list-disc"></div>
-    <div class="m-4 my-2 mx-auto mt-0 mr-1 mb-3 ml-4"></div>
+    <div class="m-4 mx-auto my-2 mt-0 mb-3 ml-4 mr-1"></div>
     <div class="max-h-screen"></div>
     <div class="max-w-full"></div>
     <div class="min-h-0"></div>
@@ -96,7 +96,7 @@
     <div class="outline-none outline-black"></div>
     <div class="overflow-hidden"></div>
     <div class="overscroll-contain"></div>
-    <div class="p-4 py-2 px-3 pt-1 pr-2 pb-3 pl-4"></div>
+    <div class="p-4 px-3 py-2 pt-1 pb-3 pl-4 pr-2"></div>
     <div class="place-content-start"></div>
     <div class="placeholder-green-300"></div>
     <div class="placeholder-opacity-60"></div>
@@ -119,7 +119,7 @@
     ></div>
     <div class="rotate-3"></div>
     <div class="scale-95"></div>
-    <div class="skew-y-12 skew-x-12"></div>
+    <div class="skew-x-12 skew-y-12"></div>
     <div class="space-x-4 space-y-3 space-x-reverse space-y-reverse"></div>
     <div class="stroke-current"></div>
     <div class="stroke-2"></div>
@@ -128,15 +128,15 @@
     <div class="text-indigo-500"></div>
     <div class="underline"></div>
     <div class="text-opacity-10"></div>
-    <div class="overflow-ellipsis truncate"></div>
+    <div class="truncate overflow-ellipsis"></div>
     <div class="uppercase"></div>
     <div class="transform transform-gpu transform-none"></div>
     <div class="origin-top-right"></div>
     <div class="delay-300"></div>
     <div class="duration-200"></div>
-    <div class="transition transition-all"></div>
+    <div class="transition-all transition"></div>
     <div class="ease-in-out"></div>
-    <div class="translate-x-5 -translate-x-4 translate-y-6 -translate-x-3"></div>
+    <div class="translate-x-5 -translate-x-3 -translate-x-4 translate-y-6"></div>
     <div class="select-none"></div>
     <div class="align-middle"></div>
     <div class="invisible"></div>
@@ -145,5 +145,6 @@
     <div class="break-words"></div>
     <div class="z-30"></div>
     <div class="content-none"></div>
+    <div class="touch-manipulation"></div>
   </body>
 </html>

From 20a3426456d1e737bf987aac5498c001bdee91b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A8o=20Gauthier?= <matteo.gauthier@gmail.com>
Date: Mon, 21 Jun 2021 10:06:22 +0200
Subject: [PATCH 2/4] generate fixtures tests

---
 tests/fixtures/tailwind-output-flagged.css    | 40 +++++++++++++++++++
 tests/fixtures/tailwind-output-important.css  | 40 +++++++++++++++++++
 .../tailwind-output-no-color-opacity.css      | 40 +++++++++++++++++++
 tests/fixtures/tailwind-output.css            | 40 +++++++++++++++++++
 4 files changed, 160 insertions(+)

diff --git a/tests/fixtures/tailwind-output-flagged.css b/tests/fixtures/tailwind-output-flagged.css
index b8a64c546e56..1d7fe76de499 100644
--- a/tests/fixtures/tailwind-output-flagged.css
+++ b/tests/fixtures/tailwind-output-flagged.css
@@ -6951,6 +6951,46 @@ video {
   border-collapse: separate;
 }
 
+.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;
+}
+
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
diff --git a/tests/fixtures/tailwind-output-important.css b/tests/fixtures/tailwind-output-important.css
index 9619935f699c..92745478ad25 100644
--- a/tests/fixtures/tailwind-output-important.css
+++ b/tests/fixtures/tailwind-output-important.css
@@ -6951,6 +6951,46 @@ video {
   border-collapse: separate !important;
 }
 
+.touch-auto {
+  touch-action: auto !important;
+}
+
+.touch-none {
+  touch-action: none !important;
+}
+
+.touch-pan-x {
+  touch-action: pan-x !important;
+}
+
+.touch-pan-left {
+  touch-action: pan-left !important;
+}
+
+.touch-pan-right {
+  touch-action: pan-right !important;
+}
+
+.touch-pan-y {
+  touch-action: pan-y !important;
+}
+
+.touch-pan-up {
+  touch-action: pan-up !important;
+}
+
+.touch-pan-down {
+  touch-action: pan-down !important;
+}
+
+.touch-pinch-zoom {
+  touch-action: pinch-zoom !important;
+}
+
+.touch-manipulation {
+  touch-action: manipulation !important;
+}
+
 .transform {
   --tw-translate-x: 0 !important;
   --tw-translate-y: 0 !important;
diff --git a/tests/fixtures/tailwind-output-no-color-opacity.css b/tests/fixtures/tailwind-output-no-color-opacity.css
index 2a9f5b8f099e..393d5b6a7ccd 100644
--- a/tests/fixtures/tailwind-output-no-color-opacity.css
+++ b/tests/fixtures/tailwind-output-no-color-opacity.css
@@ -6950,6 +6950,46 @@ video {
   border-collapse: separate;
 }
 
+.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;
+}
+
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
diff --git a/tests/fixtures/tailwind-output.css b/tests/fixtures/tailwind-output.css
index b8a64c546e56..1d7fe76de499 100644
--- a/tests/fixtures/tailwind-output.css
+++ b/tests/fixtures/tailwind-output.css
@@ -6951,6 +6951,46 @@ video {
   border-collapse: separate;
 }
 
+.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;
+}
+
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;

From d12d56cc981d15111cf56b8e774ee74a19c6f411 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A8o=20Gauthier?= <matteo.gauthier@gmail.com>
Date: Mon, 21 Jun 2021 16:54:00 +0200
Subject: [PATCH 3/4] Correcting errors noticed in pull request review

---
 src/plugins/index.js            |  2 +-
 stubs/defaultConfig.stub.js     | 12 ------------
 tests/jit/basic-usage.test.html | 18 +++++++++---------
 3 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/plugins/index.js b/src/plugins/index.js
index 76611c150782..cb7c4db6e8f5 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -32,7 +32,6 @@ export { default as flexShrink } from './flexShrink'
 export { default as flexGrow } from './flexGrow'
 export { default as tableLayout } from './tableLayout'
 export { default as borderCollapse } from './borderCollapse'
-export { default as touchAction } from './touchAction'
 
 export { default as transformOrigin } from './transformOrigin'
 export { default as translate } from './translate'
@@ -44,6 +43,7 @@ export { default as transform } from './transform'
 export { default as animation } from './animation'
 
 export { default as cursor } from './cursor'
+export { default as touchAction } from './touchAction'
 export { default as userSelect } from './userSelect'
 export { default as resize } from './resize'
 
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 33df295ab409..3dfba6bbde48 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -693,18 +693,6 @@ module.exports = {
     },
     textColor: (theme) => theme('colors'),
     textOpacity: (theme) => theme('opacity'),
-    touchAction: {
-      'auto': 'auto',
-      'none': 'none',
-      'pan-x': 'pan-x',
-      'pan-left': 'pan-left',
-      'pan-right': 'pan-right',
-      'pan-y': 'pan-y',
-      'pan-up': 'pan-up',
-      'pan-down': 'pan-down',
-      'pinch-zoom': 'pinch-zoom',
-      'manipulation': 'manipulation',
-    },
     transformOrigin: {
       center: 'center',
       top: 'top',
diff --git a/tests/jit/basic-usage.test.html b/tests/jit/basic-usage.test.html
index 52521321aab6..ead75881b206 100644
--- a/tests/jit/basic-usage.test.html
+++ b/tests/jit/basic-usage.test.html
@@ -39,11 +39,11 @@
     <div class="clear-left"></div>
     <div class="container"></div>
     <div class="cursor-pointer"></div>
-    <div class="inline-grid hidden"></div>
+    <div class="hidden inline-grid"></div>
     <div class="divide-gray-200"></div>
     <div class="divide-opacity-50"></div>
     <div class="divide-dotted"></div>
-    <div class="divide-x-0 divide-x-2 divide-y-0 divide-y-4"></div>
+    <div class="divide-x-2 divide-y-4 divide-x-0 divide-y-0"></div>
     <div class="fill-current"></div>
     <div class="flex-1"></div>
     <div class="flex-row-reverse"></div>
@@ -59,7 +59,7 @@
     <div class="not-italic"></div>
     <div class="tabular-nums ordinal diagonal-fractions"></div>
     <div class="font-medium"></div>
-    <div class="gap-4 gap-x-2 gap-y-3"></div>
+    <div class="gap-x-2 gap-y-3 gap-4"></div>
     <div class="from-red-300 via-purple-200 to-blue-400"></div>
     <div class="auto-cols-min"></div>
     <div class="grid-flow-row"></div>
@@ -82,7 +82,7 @@
     <div class="leading-relaxed leading-5"></div>
     <div class="list-inside"></div>
     <div class="list-disc"></div>
-    <div class="m-4 mx-auto my-2 mt-0 mb-3 ml-4 mr-1"></div>
+    <div class="m-4 my-2 mx-auto mt-0 mr-1 mb-3 ml-4"></div>
     <div class="max-h-screen"></div>
     <div class="max-w-full"></div>
     <div class="min-h-0"></div>
@@ -96,7 +96,7 @@
     <div class="outline-none outline-black"></div>
     <div class="overflow-hidden"></div>
     <div class="overscroll-contain"></div>
-    <div class="p-4 px-3 py-2 pt-1 pb-3 pl-4 pr-2"></div>
+    <div class="p-4 py-2 px-3 pt-1 pr-2 pb-3 pl-4"></div>
     <div class="place-content-start"></div>
     <div class="placeholder-green-300"></div>
     <div class="placeholder-opacity-60"></div>
@@ -119,7 +119,7 @@
     ></div>
     <div class="rotate-3"></div>
     <div class="scale-95"></div>
-    <div class="skew-x-12 skew-y-12"></div>
+    <div class="skew-y-12 skew-x-12"></div>
     <div class="space-x-4 space-y-3 space-x-reverse space-y-reverse"></div>
     <div class="stroke-current"></div>
     <div class="stroke-2"></div>
@@ -128,15 +128,15 @@
     <div class="text-indigo-500"></div>
     <div class="underline"></div>
     <div class="text-opacity-10"></div>
-    <div class="truncate overflow-ellipsis"></div>
+    <div class="overflow-ellipsis truncate"></div>
     <div class="uppercase"></div>
     <div class="transform transform-gpu transform-none"></div>
     <div class="origin-top-right"></div>
     <div class="delay-300"></div>
     <div class="duration-200"></div>
-    <div class="transition-all transition"></div>
+    <div class="transition transition-all"></div>
     <div class="ease-in-out"></div>
-    <div class="translate-x-5 -translate-x-3 -translate-x-4 translate-y-6"></div>
+    <div class="translate-x-5 -translate-x-4 translate-y-6 -translate-x-3"></div>
     <div class="select-none"></div>
     <div class="align-middle"></div>
     <div class="invisible"></div>

From 71efc3049002a857809bd208ebc64c684ccdc3c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A8o=20Gauthier?= <matteo.gauthier@gmail.com>
Date: Fri, 16 Jul 2021 11:04:03 +0200
Subject: [PATCH 4/4] rebuild fixtures and change order of class in
 basic-usage.test.css

---
 tests/fixtures/tailwind-output-flagged.css    | 80 +++++++++----------
 tests/fixtures/tailwind-output-important.css  | 80 +++++++++----------
 .../tailwind-output-no-color-opacity.css      | 80 +++++++++----------
 tests/fixtures/tailwind-output.css            | 80 +++++++++----------
 tests/jit/basic-usage.test.css                |  6 +-
 5 files changed, 163 insertions(+), 163 deletions(-)

diff --git a/tests/fixtures/tailwind-output-flagged.css b/tests/fixtures/tailwind-output-flagged.css
index 1d7fe76de499..1ccff4dc9e3a 100644
--- a/tests/fixtures/tailwind-output-flagged.css
+++ b/tests/fixtures/tailwind-output-flagged.css
@@ -6951,46 +6951,6 @@ video {
   border-collapse: separate;
 }
 
-.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;
-}
-
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -10010,6 +9970,46 @@ video {
   cursor: not-allowed;
 }
 
+.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;
+}
+
 .select-none {
   user-select: none;
 }
diff --git a/tests/fixtures/tailwind-output-important.css b/tests/fixtures/tailwind-output-important.css
index 92745478ad25..fb47f022139d 100644
--- a/tests/fixtures/tailwind-output-important.css
+++ b/tests/fixtures/tailwind-output-important.css
@@ -6951,46 +6951,6 @@ video {
   border-collapse: separate !important;
 }
 
-.touch-auto {
-  touch-action: auto !important;
-}
-
-.touch-none {
-  touch-action: none !important;
-}
-
-.touch-pan-x {
-  touch-action: pan-x !important;
-}
-
-.touch-pan-left {
-  touch-action: pan-left !important;
-}
-
-.touch-pan-right {
-  touch-action: pan-right !important;
-}
-
-.touch-pan-y {
-  touch-action: pan-y !important;
-}
-
-.touch-pan-up {
-  touch-action: pan-up !important;
-}
-
-.touch-pan-down {
-  touch-action: pan-down !important;
-}
-
-.touch-pinch-zoom {
-  touch-action: pinch-zoom !important;
-}
-
-.touch-manipulation {
-  touch-action: manipulation !important;
-}
-
 .transform {
   --tw-translate-x: 0 !important;
   --tw-translate-y: 0 !important;
@@ -10010,6 +9970,46 @@ video {
   cursor: not-allowed !important;
 }
 
+.touch-auto {
+  touch-action: auto !important;
+}
+
+.touch-none {
+  touch-action: none !important;
+}
+
+.touch-pan-x {
+  touch-action: pan-x !important;
+}
+
+.touch-pan-left {
+  touch-action: pan-left !important;
+}
+
+.touch-pan-right {
+  touch-action: pan-right !important;
+}
+
+.touch-pan-y {
+  touch-action: pan-y !important;
+}
+
+.touch-pan-up {
+  touch-action: pan-up !important;
+}
+
+.touch-pan-down {
+  touch-action: pan-down !important;
+}
+
+.touch-pinch-zoom {
+  touch-action: pinch-zoom !important;
+}
+
+.touch-manipulation {
+  touch-action: manipulation !important;
+}
+
 .select-none {
   user-select: none !important;
 }
diff --git a/tests/fixtures/tailwind-output-no-color-opacity.css b/tests/fixtures/tailwind-output-no-color-opacity.css
index 393d5b6a7ccd..c541c20d7b25 100644
--- a/tests/fixtures/tailwind-output-no-color-opacity.css
+++ b/tests/fixtures/tailwind-output-no-color-opacity.css
@@ -6950,46 +6950,6 @@ video {
   border-collapse: separate;
 }
 
-.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;
-}
-
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -10009,6 +9969,46 @@ video {
   cursor: not-allowed;
 }
 
+.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;
+}
+
 .select-none {
   user-select: none;
 }
diff --git a/tests/fixtures/tailwind-output.css b/tests/fixtures/tailwind-output.css
index 1d7fe76de499..1ccff4dc9e3a 100644
--- a/tests/fixtures/tailwind-output.css
+++ b/tests/fixtures/tailwind-output.css
@@ -6951,46 +6951,6 @@ video {
   border-collapse: separate;
 }
 
-.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;
-}
-
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -10010,6 +9970,46 @@ video {
   cursor: not-allowed;
 }
 
+.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;
+}
+
 .select-none {
   user-select: none;
 }
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index 8178d2dd0258..e7cfd6aa5ea9 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -290,6 +290,9 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-manipulation {
+  touch-action: manipulation;
+}
 .select-none {
   user-select: none;
 }
@@ -807,6 +810,3 @@
 .content-none {
   content: none;
 }
-.touch-manipulation {
-  touch-action: manipulation;
-}