new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

scroll-snap-type

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

snap-none utility

The snap-none utility produces the CSS declaration 'scroll-snap-type: none;'. It disables scroll snapping on a snap container.

snap-x utility

The snap-x utility produces the CSS declaration 'scroll-snap-type: x var(--tw-scroll-snap-strictness);'. It enables horizontal scroll snapping within an element.

snap-y utility

The snap-y utility produces the CSS declaration 'scroll-snap-type: y var(--tw-scroll-snap-strictness);'. It enables vertical scroll snapping within an element.

snap-both utility

The snap-both utility produces the CSS declaration 'scroll-snap-type: both var(--tw-scroll-snap-strictness);'. It enables scroll snapping in both horizontal and vertical directions.

snap-mandatory utility

The snap-mandatory utility sets the CSS custom property '--tw-scroll-snap-strictness: mandatory;'. It forces a snap container to always come to rest on a snap point.

snap-proximity utility

The snap-proximity utility sets the CSS custom property '--tw-scroll-snap-strictness: proximity;'. It makes a snap container come to rest on snap points that are close in proximity.

snap-x with snap-center example

Example of horizontal scroll snapping: <div class="snap-x ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div> </div> For scroll snapping to work, scroll snap alignment must also be set on the children using utilities like snap-center.

snap-x with snap-mandatory example

Example of mandatory horizontal scroll snapping: <div class="snap-x snap-mandatory ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div> </div>

snap-x with snap-proximity example

Example of proximity-based horizontal scroll snapping: <div class="snap-x snap-proximity ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> </div>

scroll-snap-type responsive design

The scroll-snap-type utilities support responsive design using Tailwind's responsive breakpoint prefixes, such as md:snap-x or lg:snap-mandatory.

Give your agent this brain