Adding touch-action utility

src/plugins/index.js

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

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

tests/fixtures/tailwind-output-flagged.css

@@ -9970,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;
 }

tests/fixtures/tailwind-output-important.css

@@ -9970,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;
 }

tests/fixtures/tailwind-output-no-color-opacity.css

@@ -9969,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;
 }

tests/fixtures/tailwind-output.css

@@ -9970,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;
 }

tests/jit/basic-usage.test.css

@@ -290,6 +290,9 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-manipulation {
+  touch-action: manipulation;
+}
 .select-none {
   user-select: none;
 }

tests/jit/basic-usage.test.html

@@ -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>