TailwindUI and Next.js styling issues
By Drew Bredvick··1 min read
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
Continue reading
A few useful places to go next.
- Why Next.js?Next.js is my default choice when starting a new project, big or small. Here's why I think you should use it, pros and cons included.
- Promise.all in the Next.js App RouterWhen Promise.all blocks a React Server Component, use Suspense boundaries to stream independent data as each request finishes.
- Multiple repos on the same domain in VercelHow to do micro-frontends on Vercel with a single domain.
The newsletter
Don’t miss the next one.
Field notes on GTM engineering and the craft of shipping software in the AI era — straight to your inbox.
No spam. Unsubscribe anytime.
