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.

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

Stay up to date

Don't miss my next essay — get it delivered straight to your inbox.

Related Content