Touch Action

Control how touch gestures are handled by an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Usage

Auto

Allow all default touch behaviors.

<div class="ta-auto">Full touch support</div>

None

Disable all touch interactions.

<div class="ta-none">Touch disabled</div>

Pan X

Allow only horizontal panning.

Scroll horizontally only

<div class="ta-px h-32 w-full ov-s">
  <div class="w-128 bg-indigo/10 p-4 br-1">
    Scroll horizontally only
  </div>
</div>

Pan Y

Allow only vertical panning.

Scroll vertically only

<div class="ta-py h-32 w-full ov-s">
  <div class="h-64 bg-indigo/10 p-4 br-1">
    Scroll vertically only
  </div>
</div>

Directional Panning

Control panning direction with granular utilities.

ta-pl: Panning to the left.
ta-pr: Panning to the right.
ta-pu: Panning upward.
ta-pd: Panning downward.

<div class="ta-pr ov-s">
  Swipe right only
</div>

Pinch Zoom

Enable pinch-to-zoom gestures.

<div class="ta-pz">
  Pinch to zoom
</div>

Manipulation

Enable panning and pinch zooming while disabling double-tap-to-zoom.

<div class="ta-m">
  Pan and pinch, no double-tap zoom
</div>

Common use cases

Custom scroll containers

<div class="ta-py h-64 ov-s">
  <div class="h-128">
    <!-- Vertical scrolling content -->
  </div>
</div>

Horizontal carousels

<div class="ta-px ov-s">
  <div class="d-f g-4 w-128">
    <!-- Horizontal carousel items -->
  </div>
</div>

Prevent scroll interference

<canvas class="ta-none">
  <!-- Canvas for drawing, disable touch scrolling -->
</canvas>

Responsive Design

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:ta-[value]

Small≥640px

md:ta-[value]

Medium≥768px

lg:ta-[value]

Large≥1024px

xxl:ta-[value]

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:ta-[value]