TailwindUI and Next.js styling issues

Drew Bredvick, next.jsbuilding-productstailwind
Back

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.

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

Subscribe to 3-2-1 Tech

Get emails from me with tips for your side projects, web dev articles, and project updates.

Read the latest issue
© Drew Bredvick.RSS