CODEWITHSUNDEEP
next.jstailwind-css
prog-pog
prog-pog

Reputation: 59

Scroll snapping on tailwind css doesn't work on next js

so in the index.tsx i've put a className "snap-y" on the root div and a "snap-center" on its children (section) but it doesn't seem to work when i followed what the docs says

here'es the code:

import Head from 'next/head'
import Hero from '../components/Hero'
import About from '../components/About'

export default function Home() {
  return (
    <div className='bg-[#fff] snap-y snap-mandatory '>
      <Head>
        <title>Portfolio | name</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <section className='snap-center'>
        <Hero/> 
      </section>

      <section className='snap-center'>
        <About/>
      </section>
    </div>
  )
}

Tried doing what the docs said.

Upvotes: 1

Views: 2554

Answers (1)

RK007
RK007

Reputation: 311

Set fixed height, width and overflow-scroll for parent wrapper

  <div className='bg-[#fff] snap-y snap-mandatory h-screen w-screen overflow-scroll'>
      <section className='snap-center'>
        <Hero/> 
      </section>
      <section className='snap-center'>
        <About/>
      </section>
    </div>

Upvotes: 0

Related Questions