如何将 Tailwind CSS 滚动平滑 class 添加到 Next.js

Question

我想向我的 Next.js 应用添加滚动行为 smooth，Tailwind CSS 文档指示我们添加实用程序 class 在 <html/>.

    <html class="scroll-smooth ">
      <!-- ... -->
    </html>

此文件不包含 html 标签：

  import Head from "next/head";
  import "@material-tailwind/react/tailwind.css";
  import "../styles/globals.css";
 
    function MyApp({ Component, pageProps }) {
      return (
        <>
          <Head>
            <link
              href="https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet"
            />
          </Head>
    
            <Component {...pageProps} />
    
        </>
      );
    }
    
    export default MyApp;

如何以及在何处可以将 smooth-scroll 实用程序 class 添加到我的项目中？

Answer 1

使用自定义 _document.js 并将其添加到那里 - Here 是对其作用的解释 -

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html class="scroll-smooth">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

如何将 Tailwind CSS 滚动平滑 class 添加到 Next.js

How to add Tailwind CSS scroll-smooth class to Next.js

next.js

tailwind-css