Why is scroll-smooth not working in tailwindcss?

September 16, 2022

so I have this code:

<div className="bg-black font-serif pl-20 grid text-white !scroll-smooth">
  <Head>
    <title>MinimDays | Ultimate minimalism</title>
    <link rel="icon" href="/plant.ico" className="fill-white" />
  </Head>
  <section id="home">
    <div className="flex">
      <span className="pt-72 mr-[400px]">
        <h1 className="text-3xl ">MinimDays | Ultimate minimalism</h1>
        <Link href="#about"><a className="text-lg hover:text-gray-400">About</a></Link> |
        <Link href="#contactus"><a className="text-lg hover:text-gray-400"> Contact Us</a></Link>
      </span>
      <picture>
        <img src="/photo.jpg" alt="photo" className="h-[480px] w-[320px] mt-[80px] rounded-xl border-white border-4"/>
      </picture>
    </div>
  </section>
  <section id="about" className="mt-20">
    <h1 className="text-3xl mb-5">About Us</h1>
    <hr className="mb-5"/>
    <p className="text-lg">I like the idea of digital minimalism, but apps that satisfy this category are usually paid <br /> or have a free tier which is highly limited, so I said SCREW IT, <br /> and created my own! </p>
  </section>
</div>

And the scroll animation does not work, I tried on Firefox Developer Edition and Chrome but nothing seems to help, any suggestions?

>Solution :

You need to add smooth-scroll to the html element. So add this to your main css file:

html {
  scroll-behavior: smooth;
}

I managed to get smooth scrolling working with your example code with the above change, in an HTML version that I put together.

I haven’t tested it in Next.js, but note the <Link /> is for navigation between pages. Not sure if that will cause problems for links within the page.

MDN Smooth Scroll documentation:

When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior