How to use smooth-scroll from tailwindcss in React?

Question

I have created a one-page website using tailwindcss and React. In the prototype I use the tailwindcss class "scroll-smooth" and it works. In React the class "scroll-smooth" does not work, but what is the reason?

https://tailwindcss.com/docs/scroll-behavior#basic-usage

When I click "Why" on Navigation i jump to the section "why" but not smoothly:

function App() {
  return (
    <div className="App">
      <div className="relative">
        <div className="flex flex-col scroll-smooth">

          <HomeNav />

          <HomeHero />

          <section id="why" className="flex flex-col items-center px-6 pt-20">
            ...
          </section>
          <HomeFooter />
        </div>
      </div>
    </div>
  );
}

Solution:

I think TailwindCss Class "scroll-smooth" it doesn't work on react. So I use the NPM package "react-scroll" with which it works great and I probably have less compatibility worries.

https://www.npmjs.com/package/react-scroll

Which browser are you using? The CSS scroll-behavior (used by scroll-smooth) is not supported by all browsers. See: caniuse.com/?search=scroll-behavior — Ed Lucas
– Ed Lucas, Commented Feb 15, 2022 at 18:29
I use the latest Firefox and Chrome browser :) And in my clean Tailwind Prototype it works, but not in my React app. Maybe it's a React specific problem. I am new to React ;) — Gregor Wedlich
– Gregor Wedlich, Commented Feb 15, 2022 at 19:03

MarioG8 · Accepted Answer · 2022-02-17 11:27:48Z

14

react-scroll working superb but We can still use scroll-behavior: smooth with react and tailwindcss. Here is my solution:

Folder & File structure:

App.js :

import "./App.css";
import AntyHero from "./components/AntyHero";
import Footer from "./components/Footer";
import Hero from "./components/Hero";
import Navbar from "./components/Navbar";

function App() {
  return (
    <>
      <section id="header">
        <Navbar />
      </section>
      <div className="flex flex-col h-screen items-center justify-center additional gap-3">
        <h1 className="text-5xl">TailwindCSS & React.js</h1>
        <h2 className="text-3xl pb-5">smooth scrolling behavior</h2>
        <div className="flex gap-5 items-center justify-center text-2xl underline bg-white rounded-md p-2">
          <a href="#one" className="text-orange-600">
            Section One
          </a>
          <a href="#two" className="text-red-600">
            Section Two
          </a>
          <a href="#three" className="text-green-700">
            Section Three
          </a>
        </div>
      </div>
      <div className="text-center text-3xl">
        <section id="one" className="h-screen bg-orange-600">
          Section One
        </section>
        <AntyHero />
        <section id="two" className="h-screen bg-red-600">
          Section Two
        </section>
        <Hero />
        <section id="three" className="h-screen bg-green-700">
          Section Three
        </section>
      </div>
      <Footer />
    </>
  );
}

export default App;

index.css :

@tailwind base;
html {
  scroll-behavior: smooth;
}

@tailwind components;
@tailwind utilities;

Output:

Tested with:"tailwindcss": "^3.0.11", "react": "^17.0.2" Firefox and Chrome

answered Feb 17, 2022 at 11:27

MarioG8

6,1014 gold badges20 silver badges33 bronze badges

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

3 Comments

Gregor Wedlich Over a year ago

Yes you are right when i add it to base layer than works ;) But for now, I will use my solution via the react-scroll package. Thanks!

MarioG8 Over a year ago

@GregorWedlich You're welcome ! React-scroll is marvelous ;-) Best regards and Thank You...

Wangwe Over a year ago

Thank you big time! You just saved me from having to install a bunch of packages ;0

Haroon Hayat · Accepted Answer · 2022-10-26 10:32:24Z

5

Add scroll-behavior: smooth to the code works for me.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

answered Oct 26, 2022 at 10:32

Haroon Hayat

4656 silver badges5 bronze badges

Comments

Kevin Nielsen · Accepted Answer · 2024-02-05 00:54:51Z

2

Adding "scroll-smooth" to the html tag worked for me. I am using react with next.js.

return (
    <html lang="en" className="h-full scroll-smooth">
      ...body
    </html>
  );

answered Feb 5, 2024 at 0:54

Kevin Nielsen

212 bronze badges

Comments

Faranix · Accepted Answer · 2024-07-23 10:25:52Z

0

You need add scroll-behavior: smooth in the css file or in the html.

Solution 1 - CSS :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

Solution 2 - HTML :

<html lang="fr" className="scroll-smooth">
</html>

answered Jul 23, 2024 at 10:25

Faranix

613 bronze badges

Comments

Fatemeh motlagh · Accepted Answer · 2024-09-08 08:39:08Z

0

Just give this value (scroll-smooth) to the body tag to be applied.

answered Sep 8, 2024 at 8:39

Fatemeh motlagh

3391 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to use smooth-scroll from tailwindcss in React?

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related