Touch Action

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

ClassProperties
touch-autotouch-action: auto;
touch-nonetouch-action: none;
touch-pan-xtouch-action: pan-x;
touch-pan-lefttouch-action: pan-left;
touch-pan-righttouch-action: pan-right;
touch-pan-ytouch-action: pan-y;
touch-pan-uptouch-action: pan-up;
touch-pan-downtouch-action: pan-down;
touch-pinch-zoomtouch-action: pinch-zoom;
touch-manipulationtouch-action: manipulation;

Usage

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

<div class="w-full h-48 overflow-auto touch-auto ...">
  <!-- ... -->
</div>
<div class="w-full h-48 overflow-auto touch-none ...">
  <!-- ... -->
</div>
<div class="w-full h-48 overflow-auto touch-pan-x ...">
  <!-- ... -->
</div>
<div class="w-full h-48 overflow-auto touch-pan-y ...">
  <!-- ... -->
</div>
Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.