🥳

Nuxt3 + tailwindcss + snap scrollが効かない？これで解決した！

2022/05/22に公開

Nuxt

Vue.js

Tailwind CSS

tech

tailwindcssのドキュメント通りに設定したのに、思った動きにならない時は、
classにoverflow-scrollを追加してみてください。

このコードで実現可能。（縦方向のsnap-scrollです）

sample.vue

<template>
  <div class="snap-y snap-mandatory h-screen w-screen overflow-scroll">
    <div class="snap-start h-screen w-screen">1</div>
    <div class="snap-start h-screen w-screen">2</div>
    <div class="snap-start h-screen w-screen">3</div>
  </div>
</template>

公式ドキュメント

参考

↑の動画ではjit設定が紹介されていますが、tailwindcss v3では設定不要みたいです。

Discussion