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
– Piyush Pranjal, Commented Sep 16, 2022 at 17:06
There is no apostrophe, the exclamation mark is just to indicate important — Youssef-mic
– Youssef-mic, Commented Sep 16, 2022 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
– Piyush Pranjal, Commented Sep 16, 2022 at 17:09
At first glance I thought this was the magical fix, but sorrowfully I didn't work :( — Youssef-mic
– Youssef-mic, Commented Sep 16, 2022 at 17:13
If you haven't see this yet give it a try stackoverflow.com/questions/71129698/… — Piyush Pranjal
– Piyush Pranjal, Commented Sep 16, 2022 at 17:24

stickyuser · Accepted Answer · 2022-09-16 17:23:00Z

1

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

answered Sep 16, 2022 at 17:23

stickyuser

2,93018 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Snow Yáng · Accepted Answer · 2023-03-30 02:43:18Z

0

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

answered Mar 30, 2023 at 2:43

Snow Yáng

413 bronze badges

Collectives™ on Stack Overflow

Why is scroll-smooth not working in Tailwind CSS?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related