Tailwind smooth scroll

Hello, It is probably super simple but I have a simple react app in vite, the app.tsx looks like this

<div className="scroll-smooth">
  <Navbar theme={theme} toggleTheme={toggleTheme} />
  <section id="">
    <Hero />
  </section>
  <section id="about">
      <About />
  </section>
  <section id="skills">
       <Skills />
  </section>
</div>

<div className="scroll-smooth">
  <Navbar theme={theme} toggleTheme={toggleTheme} />
  <section id="">
    <Hero />
  </section>
  <section id="about">
      <About />
  </section>
  <section id="skills">
       <Skills />
  </section>
</div>

If I click on an anchor that has #about for example it just jumps instantly, everything online says it should be scroll-smooth.

4 Replies

Brendonovich•2y ago

I think scroll-smooth need to be applied to the element that is actually scrolling, is it possible that the root <html> is the element that is scrolling and needs the class?

Ted•2y ago

Yep, that was it thanks so much! Didn't think to go outside of the main app.tsx file had to go the index.html file.

Brendonovich•2y ago

I only though of it bc the tailwind docs use <html> in their examples

Ted•2y ago

Makes sense thanks again, you probably just saved me from spending way to much time on that.

Gaming

Programming

Tailwind smooth scroll