Touch Action

Basic usage

Setting the touch action

Use the touch-{action} utilities to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens.

touch-auto

touch-none

touch-pan-x

touch-pan-y

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