0build.dev
Choose a layout

touch-action

Report an Issue
Class Description

touch-auto

Sets touch-action to auto, allowing the browser's default touch gesture handling.

CSS Rules 

.touch-auto {
  touch-action: auto;
}

Usage 

<element class="touch-auto" />

Responsive

Prefix .touch-auto utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-auto" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-auto:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-auto:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-auto::before" />

<element class="content-after touch-auto::after" />
 .touch-auto Sets touch-action to auto, allowing the browser's default touch gesture handling.

touch-none

Sets touch-action to none, disabling all browser touch gesture handling on the element.

CSS Rules 

.touch-none {
  touch-action: none;
}

Usage 

<element class="touch-none" />

Responsive

Prefix .touch-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-none::before" />

<element class="content-after touch-none::after" />
 .touch-none Sets touch-action to none, disabling all browser touch gesture handling on the element.

touch-pan-x

Sets touch-action to pan-x, allowing horizontal panning gestures only.

CSS Rules 

.touch-pan-x {
  touch-action: pan-x;
}

Usage 

<element class="touch-pan-x" />

Responsive

Prefix .touch-pan-x utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-pan-x" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-pan-x:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-pan-x:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-pan-x::before" />

<element class="content-after touch-pan-x::after" />
 .touch-pan-x Sets touch-action to pan-x, allowing horizontal panning gestures only.

touch-pan-left

Sets touch-action to pan-left, allowing leftward panning gestures only.

CSS Rules 

.touch-pan-left {
  touch-action: pan-left;
}

Usage 

<element class="touch-pan-left" />

Responsive

Prefix .touch-pan-left utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-pan-left" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-pan-left:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-pan-left:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-pan-left::before" />

<element class="content-after touch-pan-left::after" />
 .touch-pan-left Sets touch-action to pan-left, allowing leftward panning gestures only.

touch-pan-right

Sets touch-action to pan-right, allowing rightward panning gestures only.

CSS Rules 

.touch-pan-right {
  touch-action: pan-right;
}

Usage 

<element class="touch-pan-right" />

Responsive

Prefix .touch-pan-right utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-pan-right" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-pan-right:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-pan-right:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-pan-right::before" />

<element class="content-after touch-pan-right::after" />
 .touch-pan-right Sets touch-action to pan-right, allowing rightward panning gestures only.

touch-pan-y

Sets touch-action to pan-y, allowing vertical panning gestures only.

CSS Rules 

.touch-pan-y {
  touch-action: pan-y;
}

Usage 

<element class="touch-pan-y" />

Responsive

Prefix .touch-pan-y utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-pan-y" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-pan-y:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-pan-y:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-pan-y::before" />

<element class="content-after touch-pan-y::after" />
 .touch-pan-y Sets touch-action to pan-y, allowing vertical panning gestures only.

touch-pan-up

Sets touch-action to pan-up, allowing upward panning gestures only.

CSS Rules 

.touch-pan-up {
  touch-action: pan-up;
}

Usage 

<element class="touch-pan-up" />

Responsive

Prefix .touch-pan-up utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-pan-up" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-pan-up:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-pan-up:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-pan-up::before" />

<element class="content-after touch-pan-up::after" />
 .touch-pan-up Sets touch-action to pan-up, allowing upward panning gestures only.

touch-pan-down

Sets touch-action to pan-down, allowing downward panning gestures only.

CSS Rules 

.touch-pan-down {
  touch-action: pan-down;
}

Usage 

<element class="touch-pan-down" />

Responsive

Prefix .touch-pan-down utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-pan-down" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-pan-down:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-pan-down:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-pan-down::before" />

<element class="content-after touch-pan-down::after" />
 .touch-pan-down Sets touch-action to pan-down, allowing downward panning gestures only.

touch-pinch-zoom

Sets touch-action to pinch-zoom, allowing pinch-to-zoom gestures only.

CSS Rules 

.touch-pinch-zoom {
  touch-action: pinch-zoom;
}

Usage 

<element class="touch-pinch-zoom" />

Responsive

Prefix .touch-pinch-zoom utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-pinch-zoom" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-pinch-zoom:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-pinch-zoom:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-pinch-zoom::before" />

<element class="content-after touch-pinch-zoom::after" />
 .touch-pinch-zoom Sets touch-action to pinch-zoom, allowing pinch-to-zoom gestures only.

touch-manipulation

Sets touch-action to manipulation, allowing panning and pinch-zoom but disabling double-tap-to-zoom.

CSS Rules 

.touch-manipulation {
  touch-action: manipulation;
}

Usage 

<element class="touch-manipulation" />

Responsive

Prefix .touch-manipulation utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:touch-manipulation" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="touch-manipulation:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="touch-manipulation:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before touch-manipulation::before" />

<element class="content-after touch-manipulation::after" />
 .touch-manipulation Sets touch-action to manipulation, allowing panning and pinch-zoom but disabling double-tap-to-zoom.