TailwindUI and Next.js styling issues
Are you using TailwindUI and Next.js? If so, you might be here because you Google'd like this:
This example requires updating your template:
<html class="h-full bg-white">
<body class="h-full overflow-hidden"></body>
</html>
If you don't apply these, there's a high chance your layout copied over from TailwindUI won't scroll.
Getting your layout working requires adding those classes to the correct elements of your DOM.
While this is pretty easy to address, it can be tricky because of some of the underlying elements added to the DOM by Next.js.
The solution
Create a CSS file with the following styles:
#__next {
@apply h-full overflow-hidden;
}
html {
@apply h-full bg-white;
}
body {
@apply h-full overflow-hidden;
}
Import the styles into your _app.js file:
import './styles.css'
And that's it
Now that you've got your layout working, you can go ahead and start building your site.
A special thanks to demonz and IncognitoQQ for posting about this in the TailwindUI Discord 🙏
See you on the other side,
Drew
Interested in reading more?
Get each post sent to your inbox about once or twice a month.