Styling specific routes with different background colors in Next.js and Tailwind CSS

I'm currently working on building a portfolio website using Next.js 13 and Tailwind CSS. In my project, I'm using app routing, and I have a Sidebar component that remains persistent on every route. Most of the pages share the same background color, but I need to apply different background colors to specific routes.

To achieve this, I tried changing the background color of the specific route by using a element to cover the full page. However, I'm facing issues with maintaining responsiveness when using this approach.

Here are some screenshots to provide visual context:

Screenshot 1: layout.jsx with Sidebar and shared background color (most pages):

enter image description here

Screenshot 2: sidebar component

enter image description here

Screenshot 3: enter image description here

Screenshot 4: Attempt to change background color with a covering the full page:

enter image description here

I understand that applying the background color directly to the body element may not be the optimal approach, but I'm unsure of the alternatives. I'm seeking guidance on how to properly style specific routes with different background colors while keeping the Sidebar persistent and maintaining responsiveness.

Thank you for your assistance.

Solution

You can use multiple root layouts as described over here.

https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts

To prevent duplication, these multi layouts can use the same component that will take a parameter (sideBarBackgroundColor maybe in your case).