如何在 React 中使用 tailwindcss 的平滑滚动？

Question

tailwindcss我使用和创建了一个单页网站React。在原型中，我使用tailwindcss“scroll-smooth”类并且它有效。在React类中“滚动平滑”不起作用，但原因是什么？

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

当我单击导航上的“为什么”时，我跳转到“为什么”部分，但并不顺利：

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>
  );
}

解决方案：

我认为TailwindCss“滚动平滑”类不适用于反应。所以我使用NPM“react-scroll”包，它工作得很好，而且我可能不太担心兼容性。

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

Answer 1

React-Scroll工作得很好，但我们仍然可以使用scroll-behavior: smooth和。这是我的解决方案：reacttailwindcss

文件夹和文件结构：

应用程序.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;

索引.css：

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

@tailwind components;
@tailwind utilities;

输出：

测试使用：“tailwindcss”：“^3.0.11”，“react”：“^17.0.2” Firefox和Chrome

Answer 2

添加scroll-behavior: smooth到代码对我有用。

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

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