How to implement Tailwind v4 scroll snap layouts?

<template>
  <div class="snap-x snap-mandatory flex overflow-x-auto scroll-smooth">
    <section class="snap-start flex-shrink-0 w-screen h-64 bg-red-400 text-white flex items-center justify-center">
      Slide 1
    </section>
    <section class="snap-start flex-shrink-0 w-screen h-64 bg-blue-400 text-white flex items-center justify-center">
      Slide 2
    </section>
    <section class="snap-start flex-shrink-0 w-screen h-64 bg-green-400 text-white flex items-center justify-center">
      Slide 3
    </section>
  </div>
</template>