Why is scroll-smooth not working in Tailwind CSS?

Question

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?

Why there is an apostrophe before this class `!scroll-smooth`? Try removing this `!` — Piyush Pranjal, Sep 16 '22 at 17:06
There is no apostrophe, the exclamation mark is just to indicate important — Youssef-mic, Sep 16 '22 at 17:07
Nice I discovered another thing thanks. I didn't found any issues here and I hope you already tried running this in incognito and Ctrl + F5 already used — Piyush Pranjal, Sep 16 '22 at 17:09
At first glance I thought this was the magical fix, but sorrowfully I didn't work :( — Youssef-mic, Sep 16 '22 at 17:13
If you haven't see this yet give it a try https://stackoverflow.com/questions/71129698/how-to-use-smooth-scroll-from-tailwindcss-in-react — Piyush Pranjal, Sep 16 '22 at 17:24

score 1 · Accepted Answer · answered Sep 16 '22 at 17:23

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

score 0 · Answer 2 · answered Mar 30 '23 at 02:43

0

I was using Link component from Next.js and it is not working with scroll-smooth, only working with tag.

answered Mar 30 '23 at 02:43

Shimizu Yang

31
3

Why is scroll-smooth not working in Tailwind CSS?

2 Answers2