Add scroll-snap utilities

[reinink]

This PR adds new scroll-snap utilities to Tailwind CSS.

scroll-snap-type

The scroll-snap-type utilities are used to enable scroll snapping on a container.

This can be enabled on the horizontal axis (.snap-x), vertical axis (.snap-y), or both (.snap-both). You can also control how the snapping behaves, by either forcing a snap point (.snap-mandatory), or being less strict and only having it snap if the scroll position is close to a snap point (.snap-proximity).

These classes are designed to be composable, meaning if you omit a strictness class, it will default to proximity.

<div class="snap-x">
  <!-- proximity strictness (default) -->
</div>

<div class="snap-x snap-mandatory">
  <!-- mandatory strictness -->
</div>

Class	CSS
.snap-none	scroll-snap-type: none
.snap-x	scroll-snap-type: x var(--tw-scroll-snap-strictness)
.snap-y	scroll-snap-type: y var(--tw-scroll-snap-strictness)
.snap-both	scroll-snap-type: both var(--tw-scroll-snap-strictness)
.snap-mandatory	--tw-scroll-snap-strictness: mandatory
.snap-proximity	--tw-scroll-snap-strictness: proximity

scroll-snap-align

The scroll-snap-align utilities are used to enable scroll snapping as well as set the scroll snap point (alignment) on each child within a snap container.

You can set the alignment to the start of the element (.snap-start), the end of the element (.snap-end) or the center of the element (.snap-center). This value can be different for each of the children within the snap container.

<div class="snap-x snap-mandatory">
  <div class="snap-start"></div>
  <div class="snap-center"></div>
  <div class="snap-end"></div>
</div>

It's also possible to omit a child element, which will cause that element to be "skipped" when scrolling.

<div class="snap-x snap-mandatory">
  <div class="snap-start"></div>
  <div><!-- This element will be skipped --></div>
  <div class="snap-start"></div>
</div>

You can also disable scroll snapping on a child element using the .snap-align-none utility.

<div class="snap-x snap-mandatory">
  <div class="snap-start"></div>
  <div class="snap-start md:snap-align-none">
    <!-- This element will be skipped on medium screens and larger -->
  </div>
  <div class="snap-start"></div>
</div>

The name here is somewhat unfortunate. It would have been nicer to use .snap-none, but that was already used to disable the scroll-snap-type utilities.

Class	CSS
.snap-start	scroll-snap-align: start
.snap-end	scroll-snap-align: end
.snap-center	scroll-snap-align: center
.snap-align-none	scroll-snap-align: none

scroll-snap-stop

The scroll-snap-stop utilities are used to set whether it's possible to scroll past ("pass over") an element's snap position. There are only two options here: the default browser behaviour (.snap-normal), and the option to prevent scrolling past a snap position (.snap-always).

<div class="snap-x snap-mandatory">
  <div class="snap-start snap-always"></div>
  <div class="snap-start snap-always"></div>
  <div class="snap-start snap-always"></div>
</div>

It's worth noting that this feature isn't supported by Firefox yet (see here).

Class	CSS
.snap-normal	scroll-snap-stop: normal
.snap-always	scroll-snap-stop: always

scroll-margin

The scroll-margin utilities are used to set the scroll margin position of an element. This is very similar to how the margin property works, except it only applies to the scroll position.

One handy use-case for this feature is setting the scroll margin top on an anchor link. This allows you to add some scroll spacing above an element when linking to it.

<div id="faqs" class="scroll-pt-8">
  <h1>FAQs</h1>
  <div></div>
  <div></div>
  <div></div>
</div>

Like the margin utilities, these values extend the spacing scale, so you have all the same values available as you do with margin. Here's a list of all the 2rem values:

Class	CSS
.scroll-m-8	scroll-margin: 2rem
.scroll-mt-8	scroll-margin-top: 2rem
.scroll-mr-8	scroll-margin-right: 2rem
.scroll-ml-8	scroll-margin-left: 2rem
.scroll-mb-8	scroll-margin-bottom: 2rem
.scroll-my-8	scroll-margin-top: 2rem scroll-margin-bottom: 2rem
.scroll-mx-8	scroll-margin-left: 2rem scroll-margin-right: 2rem

scroll-padding

The scroll-padding utilities are used to set the scroll padding of an element. This is very similar to how the padding property works, except it only applies to the scroll position.

<div class="snap-x snap-mandatory scroll-pl-6">
  <div class="snap-start"></div>
  <div class="snap-start"></div>
  <div class="snap-start"></div>
</div>

Like the padding utilities, these values extend the spacing scale, so you have all the same values available as you do with padding. Here's a list of all the 2rem values:

Class	CSS
.scroll-p-8	scroll-padding: 2rem
.scroll-pt-8	scroll-padding-top: 2rem
.scroll-pr-8	scroll-padding-right: 2rem
.scroll-pl-8	scroll-padding-left: 2rem
.scroll-pb-8	scroll-padding-bottom: 2rem
.scroll-py-8	scroll-padding-top: 2rem scroll-padding-bottom: 2rem
.scroll-px-8	scroll-padding-left: 2rem scroll-padding-right: 2rem

[reinink]

Hey there @95jonpet and @innocenzi, just wanted to let you know that I've included you as co-authors on this PR, because of your work on #569 and tailwindcss-scroll-snap 🤟