0build.dev
Choose a layout

scroll-snap-type

Report an Issue
Class Description

snap-none

Sets scroll-snap-type to none, disabling scroll snapping on this container.

CSS Rules 

.snap-none {
  scroll-snap-type: none;
}

Usage 

<element class="snap-none" />

Responsive

Prefix .snap-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:snap-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="snap-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="snap-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 snap-none::before" />

<element class="content-after snap-none::after" />
 .snap-none Sets scroll-snap-type to none, disabling scroll snapping on this container.

snap-x

Sets scroll-snap-type: x. Enables horizontal scroll snapping on a container.

CSS Rules 

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

Usage 

<element class="snap-x" />

Responsive

Prefix .snap-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:snap-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="snap-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="snap-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 snap-x::before" />

<element class="content-after snap-x::after" />
 .snap-x Sets scroll-snap-type: x. Enables horizontal scroll snapping on a container.

snap-y

Sets scroll-snap-type: y. Enables vertical scroll snapping on a container.

CSS Rules 

.snap-y {
  scroll-snap-type: y var(--tw-scroll-snap-strictness);
}

Usage 

<element class="snap-y" />

Responsive

Prefix .snap-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:snap-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="snap-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="snap-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 snap-y::before" />

<element class="content-after snap-y::after" />
 .snap-y Sets scroll-snap-type: y. Enables vertical scroll snapping on a container.

snap-both

Sets scroll-snap-type to snap on both axes, using the configured strictness variable.

CSS Rules 

.snap-both {
  scroll-snap-type: both var(--tw-scroll-snap-strictness);
}

Usage 

<element class="snap-both" />

Responsive

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

<element class="md:snap-both" />

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="snap-both: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="snap-both: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 snap-both::before" />

<element class="content-after snap-both::after" />
 .snap-both Sets scroll-snap-type to snap on both axes, using the configured strictness variable.

snap-mandatory

Sets scroll-snap-type mandatory mode. Always snaps to an alignment point.

CSS Rules 

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

Usage 

<element class="snap-mandatory" />

Responsive

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

<element class="md:snap-mandatory" />

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="snap-mandatory: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="snap-mandatory: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 snap-mandatory::before" />

<element class="content-after snap-mandatory::after" />
 .snap-mandatory Sets scroll-snap-type mandatory mode. Always snaps to an alignment point.

snap-proximity

Sets the scroll-snap strictness variable to proximity, snapping only when close to a snap point.

CSS Rules 

.snap-proximity {
  --tw-scroll-snap-strictness: proximity;
}

Usage 

<element class="snap-proximity" />

Responsive

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

<element class="md:snap-proximity" />

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="snap-proximity: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="snap-proximity: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 snap-proximity::before" />

<element class="content-after snap-proximity::after" />
 .snap-proximity Sets the scroll-snap strictness variable to proximity, snapping only when close to a snap point.