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

#__next {
  @apply h-full overflow-hidden;
}
html {
  @apply h-full bg-white;
}
body {
  @apply h-full overflow-hidden;
}

import './styles.css'

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