🥳

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

2022/05/22に公開約600字

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>

公式ドキュメント

https://tailwindcss.com/docs/scroll-snap-type

参考

https://www.youtube.com/watch?v=Vs7pSXTMAuQ

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

https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine

Discussion

ログインするとコメントできます