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.
![Animation of scrolling working inside of a TailwindUI Next.js app with a multi-part layout.](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftailwind-ui-scrolling.1c363773.gif&w=3840&q=85)
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