Source: https://tailwindcss.com/docs/touch-action

v4.1

⌘KCtrl KDocs Blog Showcase Sponsor Plus

1. Interactivity
2. touch-action

Interactivity

touch-action

Utilities for controlling how an element can be scrolled and zoomed on touchscreens.

| Class | Styles | | --- | --- | | 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; |

Examples

---

Basic example

Use utilities like touch-pan-y and touch-pinch-zoom to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens:

Try panning these images on a touchscreen

touch-auto

touch-none

touch-pan-x

touch-pan-y

<div class="h-48 w-full touch-auto overflow-auto ...">  <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-none overflow-auto ...">  <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-pan-x overflow-auto ...">  <img class="h-auto w-[150%] max-w-none" src="..." /></div><div class="h-48 w-full touch-pan-y overflow-auto ...">  <img class="h-auto w-[150%] max-w-none" src="..." /></div>

Responsive design

Prefix a touch-action utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="touch-pan-x md:touch-auto ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation .

On this page

• Quick reference

• Examples

  • Basic example

  • Responsive design

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy