Tailwind CSS Touch Action Cheatsheet

Complete reference for all Tailwind v4 touch-action utilities.
Control how elements respond to touch gestures on mobile devices. Click to copy.

Quick Navigation

All Utilities Interactive Demo Use Cases Combining Values Reference Table FAQ

Touch Action Utilities

Control which touch gestures are handled by the browser vs. your JavaScript code.

Interactive Touch Demo

Test these touch behaviors on a mobile device or touch-enabled screen. Each box has a different touch-action applied.

touch-auto

Try panning and zooming

touch-none

All gestures disabled

touch-pan-x

Horizontal pan only

touch-pan-y

Vertical pan only

touch-pinch-zoom

Zoom only, no pan

touch-manipulation

Pan + zoom, fast taps

Common Use Cases

Canvas Drawing

<canvas class="touch-none">
  <!-- Prevent scrolling while drawing -->
</canvas>

{/* Handle touch events manually */}
canvas.addEventListener('touchmove',
  handleDraw);

Horizontal Carousel

<div class="touch-pan-x overflow-x-auto">
  <div class="flex gap-4">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
  </div>
</div>

Remove Tap Delay

{/* Use touch-manipulation for faster
   button responses on mobile */}
<button class="touch-manipulation">
  Click me instantly
</button>

{/* No 300ms delay before click */}

Image Zoom Gallery

<div class="touch-pinch-zoom">
  <img src="photo.jpg" alt="..." />
</div>

{/* Allow zoom but prevent
   accidental scrolling */}

Map Container

<div class="touch-none">
  {/* Map library handles all
     touch interactions */}
  <MapComponent />
</div>

Swipe Cards

{/* Like Tinder-style cards */}
<div class="touch-pan-x">
  <div class="card"
    onTouchMove={handleSwipe}>
    Swipe left or right
  </div>
</div>

Combining Touch Action Values

You can combine multiple touch-action values using Tailwind's arbitrary value syntax. This gives you fine-grained control over which gestures are allowed.

touch-action: pan-x pan-y;

Tailwind: touch-[pan-x_pan-y]

Allow panning in both directions but disable zooming.

touch-action: pan-y pinch-zoom;

Tailwind: touch-[pan-y_pinch-zoom]

Allow vertical scrolling and pinch-zoom only.

touch-action: pan-left pan-up;

Tailwind: touch-[pan-left_pan-up]

Only allow panning toward top-left corner.

Quick Reference Table

Class	CSS	Effect
`touch-auto`	`touch-action: auto;`	Enable all browser-handled touch behaviors
`touch-none`	`touch-action: none;`	Disable all browser touch behaviors
`touch-pan-x`	`touch-action: pan-x;`	Enable horizontal panning only
`touch-pan-left`	`touch-action: pan-left;`	Enable leftward panning only
`touch-pan-right`	`touch-action: pan-right;`	Enable rightward panning only
`touch-pan-y`	`touch-action: pan-y;`	Enable vertical panning only
`touch-pan-up`	`touch-action: pan-up;`	Enable upward panning only
`touch-pan-down`	`touch-action: pan-down;`	Enable downward panning only
`touch-pinch-zoom`	`touch-action: pinch-zoom;`	Enable pinch-to-zoom only
`touch-manipulation`	`touch-action: manipulation;`	Enable panning and pinch-zoom (removes 300ms tap delay)

Browser Support

The touch-action CSS property is well-supported across modern browsers:

Chrome

36+

Firefox

52+

Safari

13+

Edge

12+

Note: Some directional values (pan-left, pan-right, pan-up, pan-down) have more limited support. Check caniuse.com for specific browser compatibility.

Frequently Asked Questions

What is touch-action in Tailwind CSS?

Touch-action utilities in Tailwind CSS control how an element responds to touch gestures on mobile devices. They allow you to enable or disable panning, zooming, and other touch behaviors for specific elements, giving you fine-grained control over the touch experience.

When should I use touch-none in Tailwind?

Use touch-none when you want to completely disable browser touch gestures on an element. This is essential for custom canvas drawing applications, drag-and-drop interfaces, games, or any situation where you need to handle all touch events manually with JavaScript.

What is the difference between touch-pan-x and touch-pan-left?

touch-pan-x allows panning in both horizontal directions (left and right), while touch-pan-left only allows panning to the left. Similarly, touch-pan-right only allows rightward panning. Use directional variants when you want to restrict gesture direction.

What does touch-manipulation do?

touch-manipulation enables panning and pinch-zoom gestures but disables other non-standard gestures like double-tap to zoom. This is particularly useful for improving tap responsiveness by removing the 300ms delay that browsers add to distinguish between tap and double-tap.

How do I remove the 300ms tap delay on mobile?

Add touch-manipulation to clickable elements. This tells the browser that double-tap-to-zoom isn't needed, so it can fire click events immediately without waiting 300ms to see if a second tap is coming.

Can I combine multiple touch-action values?

Yes, you can combine values using Tailwind's arbitrary value syntax. For example, touch-[pan-y_pinch-zoom] allows vertical panning and pinch zoom but disables horizontal panning. Separate multiple values with underscores.

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element including touch-action utilities. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →