Hi everyone.
I'm working on a Next.js 14 project using Tailwind CSS. As you know, Next.js has a layout.js file that wraps every page. Mine is as follows:

Find bith layout.tsx and page.tsx attatched.

Essentially, I'm trying to move the scrollbar classes to the home component. The home compoennet has sections, where the user can smooth scroll to.

But when I try to style the navabr there and not teh root layout.tsx file, I get double Y scrollbars. If I then do overflow-y-hidden on the layout, nothing scrolls anymore. So it's nothing or double now. Maybe I'm applying the wrong classes, or doing so in the wrong place.

I'm using context to read the theme and then conditionally apply the class 'dark' to the parent component. I can't do it inside the layout because it's necessarily out of scope.

The solution would be to move all the scrollbar classes to the page itself. But I can't seem to do it. This is the crux of the matter. Once I can do that, there's a Tailwind plugin that allows you to apply Tailwind classes to the scrollbar. But first, I need to be able to style the scrollbar within the pages themselves, not in the layout.

How do I do it?

Any help would be greatly appreciated.

Thanks in advance!