Menu
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!
886
asked Sep 15 '25 13:09
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.
152
answered Sep 17 '25 04:09
After trying everything I could think of adding this to my tailwind.css did it for me.
@layer base {
html,
body,
body>div:first-child,
div#__next,
div#__next>div {
height: 100%;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With