Tailwind flex not scrolling with NuxtPage

[austere elm]

Tailwind recommends to add h-full to html and h-full overflow-hidden to body.

This makes their internal flex components scroll with overflow-y-auto.

But since <NuxtPage> adds a div with <div id="__nuxt" that wraps the whole page, this breaks the scrolling.

I can't for the life of my understand how to ... add a class to that div or prevent it from interrupting the scrolling behavior.

Is there a way to customie <NuxtPage> component? or make it not be a div?

[sharp scarab]

Hi @austere elm , I have solved it like this:

// assets/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body,
    #__nuxt {
        @apply min-h-screen;
    }

    #__nuxt {
        @apply flex flex-col;
    }

    body {
        @apply overflow-x-hidden overflow-y-scroll;
    }
}

// layouts/default.vue
<template>
    <LayoutHeader />
    <div class="flex-1">
        <slot />
    </div>
    <LayoutFooter />
</template>

This ensures that your page is a minimum of 100vh (screen height) and always have a scrollbar, so that there never is a jump, even if your page content itsself is not as high as the screen.

[austere elm]

Oh wow, thanks Fabian! So styling the #__nuxt via css is the way to go here eh?
Crap, ok! I guess that's good enough of a solution

[sharp scarab]

@austere elm Yeah, it's exactly the same for next.js (#__next) for example. I think most frameworks have some kind of root div other than body. But yeah works perfectly to style this element 💪

[austere elm]

Thanks @sharp scarab !!