How to use smooth-scroll from tailwindcss in React? - reactjs

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

Answer 1

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

Answer 2

Add scroll-behavior: smooth to the code works for me.
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
html {
scroll-behavior: smooth;
}
}