Can you modify NextJS mount element or add classes to __next div?

Long story short is I’m working on a project where I want to have the content “fill” the vertical space below the static header. I’ve done this in React with tailwind like this:

<body class="flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal">
    <header class="flex h-18 bg-white shadow-md">
        {/* header menu options */}
    </header>
    <div class="flex flex-1 h-full bg-gray-200 p-6">
        {/* page content */}
    </div>

But with NextJS it seems to put the mounting div (i.e. <div id="__next">) between the body and the wrest of the content. If I modify the CSS to give #__next { height: %100 } but that makes the fill not work correctly, it overflows. So it looks like this:

<body class="flex flex-col h-screen text-gray-600 work-sans leading-normal text-base tracking-normal">
    <div id="__next">
        <header class="flex h-18 bg-white shadow-md">
            {/* header menu options */}
        </header>
        <div class="flex flex-1 h-full bg-gray-200 p-6">
            {/* page content */}
        </div>
    </div>

Here are screenshots to visually see why the extra div is causing problems: https://imgur.com/a/dHRsDkY

The two possible options to solve this problem that theoretically might work are add classes to the #__next div or mount to body instead of the #__next div. Does anyone know how to achieve either of those?

Edit: Yes, I think I could change the layout to a fixed header and padding on top of the content element and that’d sidestep the problem and that may end up being the workaround I need but I’m still interested in knowing if either of the solutions I’ve mentioned are possible because if they aren’t that’s a technical limitation of NextJS that doesn’t get much attention.

Answer

I’m not familiar with tailwind but I did some research and I resolved the issue by removing classes from body and applying them to #__next:

I used the approach in this example for using tailwind with nextjs.

and then I edited styles/index.css

@tailwind base;

/* Write your own custom base styles here */
/* #__next {
  height: 100%;
} */

/* Start purging... */
@tailwind components;
/* Stop purging. */

html,
body {
  @apply bg-gray-50 dark:bg-gray-900;
}

#__next {
  @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;
}

/* Write your own custom component styles here */
.btn-blue {
  @apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

as you said the point is to add the classes to #__next instead of body.

as you can see in the comments it’s important where to add the @apply instruction.

and the important lines are:

#__next {
  @apply flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal;
}

as you’ve asked in your question title, this is one way to add tailwind styles to #__next container div.

and the other solution is to set the classes after component or page is loaded using componentDidMount() lifecycle hook or useEffect hook like this:

useEffect(() => {
    document.querySelector("#__next").className =
      "flex flex-col h-screen text-gray-600 leading-normal text-base tracking-normal";
  }, []);

If you take a look at Nextjs documention about Custom document you can see that Main component and NextScript are the internals of Nextjs and are required for the page to be properly rendered and you can not change Nextjs internals so I think the solutions mentioned above are the best ways to add classes to __next div.