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

I want to add scroll behaviour smooth to my Next.js app, and the Tailwind CSS documentation instructs us to add the utility class in <html/>.

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

This file does not contain an html tag:

  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;

How and where can I add the smooth-scroll utility class in my project?

next.js tailwind-css

Solution 1:^[1]

The simplest solution, do it from your globals.css file...

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Rochdi Belhirch

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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]