Scroll-smooth in NextJs

Question

Hello i'm trying to add smooth scrolling to my nextjs page, i'm using tailwind and i'm marking it is as important on the html yet i do not see the effects.
is there some kind of extra configuration to be done in next or tailwind for the smooth scrolling to take effect?
i've written this on my root layout

import "./styles/globals.css";
import { poppins, sofia } from "./styles/fonts";
import ScrollToTop from "./utils/functions/scrollToTop";
interface RootLayoutProps {
  children: React.ReactNode;
}

export const dynamic = 'force-dynamic';

export default async function RootLayout({ children }: RootLayoutProps) {

  return (
    <html lang="fr" className="!scroll-smooth">
      <body className={`${poppins.variable} ${sofia.variable} bg-primary max-w-[1440px] min-w-[375px] m-auto`}>
        <ScrollToTop />
        {children}
      </body>
    </html>
  );
}

also tried with the globals css

html {
    scroll-behavior: smooth;
}

Scroll-smooth in NextJs

0 Replies