How to update my template in my nextjs app

user_15330425 0
Viewed 849

im using tailwind css to build my nextjs app, so im copying this template from tailwind ui and it says for it to work properly i have to..

 {/*
      This example requires updating your template:

      ```
      <html class="h-full">
      <body class="h-full">
      ```
    */}

and im not sure where is what i have to update that. this is what my tailwind.config.js looks like,

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

if you guys can give me a hand i would appreciate it, thanks!

tailwind-ui next.js reactjs
1 Answers

Your template needs your html and body tag to have the h-full class.

The way to do this with Next.JS is to create a custom document. To do so, create a new file in your pages folder: ./pages/_document.{jsx,tsx} and add the following snippet:

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 className="h-full"> // This is where you add the class to the html tag of your page
        <Head/>
        <body className="h-full"> // This is where you add the class to the body tag of your page
        <Main/>
        <NextScript/>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

More information about custom document in the doc.

user_66604970
Related