How to use smooth-scroll from tailwindcss in React?

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

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