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

Question

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

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

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

Run Code Online (Sandbox Code Playgroud)

该文件不包含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;

Run Code Online (Sandbox Code Playgroud)

如何以及在哪里可以smooth-scroll在我的项目中添加实用程序类？

Answer 1

小智 17

最简单的解决方案是从您的 globals.css 文件中执行此操作...

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

@layer base {
  html {
    @apply scroll-smooth;
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ram*_*kay 6

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，9 月前
查看次数：	11741 次
最近记录：	2 年，10 月前