Is there a better way to put classes into html and body tags in next.js?

user_2366771 0
Viewed 497

I'm working with Next.js and Tailwind, and to get some elements displaying correctly I need to put some style classes into <html> and <body>.

I did this to my MyApp

function MyApp({ Component, pageProps}: AppProps) {
  useEffect(() => {
    document.querySelector("html").classList.add("h-full");
    document.querySelector("body").classList.add("h-full");
    document.querySelector("#__next").classList.add("h-full");
  });

  return (
      <Component {...pageProps} />
  )
}

That's working... but I would like to know if there any other way of doing, or more elegant solution.

tailwind-css next.js reactjs
1 Answers

We use both and did a _document.tsx file with this:

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

export default function Document() {
    return (
        <Html lang="en-us" className="h-full">
            <Head />
            <body className="h-full">
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

We found this in some Tailwind CSS/Next.js researching and it works for us.

user_111459760
Related