6

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

MarioG8
  • 5,122
  • 4
  • 13
  • 29
Gregor Wedlich
  • 654
  • 6
  • 14
  • Which browser are you using? The CSS `scroll-behavior` (used by `scroll-smooth`) is not supported by all browsers. See: https://caniuse.com/?search=scroll-behavior – Ed Lucas Feb 15 '22 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 Feb 15 '22 at 19:03

2 Answers2

11

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

Folder & File structure:

enter image description here

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:

enter image description here

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

MarioG8
  • 5,122
  • 4
  • 13
  • 29
4

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

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
}
Haroon Hayat
  • 329
  • 2
  • 4