touch-auto/none/pan-x/pan-y/pinch-zoom — gesture control. This family contains 10 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
touch-autotouch-action: auto;
touch-nonetouch-action: none;
touch-pan-x--tw-pan-x: pan-x; 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-right--tw-pan-x: pan-right; 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-pan-down--tw-pan-y: pan-down; 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-manipulationtouch-action: manipulation;

Example#

example
html
<div class="touch-pan-y">Vertical scroll preserved, horizontal gestures free for JS</div>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • touch-none on custom sliders prevents scroll fighting

utilities/interactivity/cursor|Cursor · utilities/interactivity/scroll-snap|Scroll snap