Touch Action

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

Class	CSS Output
`touch-pan-x`	`--tw-pan-x: pan-x; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); }`
`touch-pinch-zoom`	`--tw-pinch-zoom: pinch-zoom; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); }`
`touch-none`	`touch-action: none; }`
`touch-pan-down`	`--tw-pan-y: pan-down; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); }`
`touch-pan-left`	`--tw-pan-x: pan-left; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); }`
`touch-pan-y`	`--tw-pan-y: pan-y; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); }`
`touch-pan-up`	`--tw-pan-y: pan-up; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); }`
`touch-auto`	`touch-action: auto; }`
`touch-pan-right`	`--tw-pan-x: pan-right; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); }`
`touch-manipulation`	`touch-action: manipulation; }`

touch-pan-x

--tw-pan-x: pan-x;
touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);

touch-pinch-zoom

--tw-pinch-zoom: pinch-zoom;
touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);

touch-none

touch-action: none;

touch-pan-down

--tw-pan-y: pan-down;
touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);

touch-pan-left

--tw-pan-x: pan-left;
touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);

touch-pan-y

--tw-pan-y: pan-y;
touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);

touch-pan-up

--tw-pan-y: pan-up;
touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);

touch-auto

touch-action: auto;

touch-pan-right

--tw-pan-x: pan-right;
touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);

touch-manipulation

touch-action: manipulation;

Reference

MDN ↗