Why is scroll-smooth not working in Tailwind CSS?-CodePudding

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?

CodePudding user response：

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