Adding touch-action utility

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'

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')
+    )
+  }
+}

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',

tests/jit/basic-usage.test.css

@@ -807,3 +807,6 @@
 .content-none {
   content: none;
 }
+.touch-manipulation {
+  touch-action: manipulation;
+}

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>