When TailwindCSS v3 is released, we will have some awesome new utility classes to include in our pages. One of which is the the scroll-snap utilities. This will allow you to easily add simple scroll snapping to elements when a user scrolls the page.
In this quick post you'll learn how to implement this awesome utility in your pages. Let's jump into it.
Quick Demo
It's always nice to see a working demo of what these utility classes can do. Check out this quick codepen below to see a quick example:
As you can see when you scroll down the page it will snap to each element. This will allow you to create some really simple sliding animations between elements. Keep on reading and I'll show you how simple this is to implement.
How to use these classes
Below 👇 are the new utility classes that are now available to use in the parent container:
-
.snap-none -
.snap-x -
.snap-y -
.snap-both -
.snap-mandatory -
.snap-proximity
In our example we are using .snap-y and .snap-mandatory. in our parent container:
<div class="snap-y snap-mandatory h-screen overflow-scroll">
...
</div>
We are also using .h-screen to make the parent container the same height as all the child elements, and .overflow-scroll which tells the container to clip the content but allow the overflow to be visible when the user scrolls.
Next, we need to add one of the following classes to each child element:
-
.snap-start -
.snap-end -
.snap-center -
.snap-align-none
In our example we are using .snap-start :
<div class="snap-y snap-mandatory h-screen overflow-scroll">
<div class="snap-start bg-amber-200 w-screen h-screen flex items-center justify-center text-8xl">1</div>
<div class="snap-start bg-teal-200 w-screen h-screen flex items-center justify-center text-8xl">2</div>
<div class="snap-start bg-cyan-200 w-screen h-screen flex items-center justify-center text-8xl">3</div>
<div class="snap-start bg-fuchsia-200 w-screen h-screen flex items-center justify-center text-8xl">4</div>
</div>
You can use these classes to set the position of your child elements.
Scroll snap on the X-axis
The cool thing is that we can add this scroll snap behavior to the x-axis if we could like. That means we can create a design like the following:
As you can see from the Codepen above 👆 we can scroll the parent container from the left or right and it will work similarly to a slider. Here is the code we used to accomplish this:
<div class="snap-x mx-auto snap-mandatory h-screen flex w-96 overflow-scroll">
<div class="snap-start bg-amber-200 w-96 flex-shrink-0 h-screen flex items-center justify-center text-8xl">1</div>
<div class="snap-start bg-teal-200 w-96 flex-shrink-0 h-screen flex items-center justify-center text-8xl">2</div>
<div class="snap-start bg-cyan-200 w-96 flex-shrink-0 h-screen flex items-center justify-center text-8xl">3</div>
<div class="snap-start bg-fuchsia-200 w-96 flex-shrink-0 h-screen flex items-center justify-center text-8xl">4</div>
</div>
How cool is that? With a few utility classes we are able to create scroll snapping functionality that would typically require many lines of javascript.
Conclusion
The new scroll-snap utlities are going to make building sliders and full page slides super duper easy! You can learn more about how to use these utility classes from the following PR: https://github.com/tailwindlabs/tailwindcss/pull/5637.
Additionally, if you would like to learn more about the awesome new stuff coming to TailwindCSS version 3, check out my other post here.
I hope you found this tutorial useful and I hope you have an amazing day. Happy snapping 👌