# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/touch-action.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "touch-action";
export const description = "Utilities for controlling how an element can be scrolled and zoomed on touchscreens.";

<ApiTable
  rows={[
    ["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:

<Figure hint="Try panning these images on a touchscreen">

<Example>
  {
    <div className="grid gap-x-6 gap-y-14 font-mono font-bold sm:grid-cols-2">
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-auto</p>
        <div className="grid h-48 w-full touch-auto overflow-auto rounded-lg">
          <img
            className="col-span-1 col-start-1 col-end-1 w-[150%] max-w-none"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80"
          />
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-none</p>
        <div className="h-48 w-full touch-none overflow-auto rounded-lg">
          <img
            className="w-[150%] max-w-none"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80"
          />
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-pan-x</p>
        <div className="h-48 w-full touch-pan-x overflow-auto rounded-lg">
          <img
            className="w-[150%] max-w-none"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80"
          />
        </div>
      </div>
      <div className="flex flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-pan-y</p>
        <div className="h-48 w-full touch-pan-y overflow-auto rounded-lg">
          <img
            className="w-[150%] max-w-none"
            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80"
          />
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:overflow-auto,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>
```

</Figure>

### Responsive design

<ResponsiveDesign property="touch-action" defaultClass="touch-pan-x" featuredClass="touch-auto" />