Next.js Discord

Discord Forum

App Router, className in body

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hello! Could you please tell me how to overwrite className in the body? App Router and Tailwindcss
Answered by alfon
(withHeader)/layout.tsx -> <body className="bg-black">
(withoutHeader)/layout.tsx -> <body className="bg-white">
View full answer

12 Replies

@Asiatic Lion Hello! Could you please tell me how to overwrite className in the body? App Router and Tailwindcss
alfon
what do you mean by overwrite className in the body?
<body className="flex flex-col min-h-screen">
  ...
</body>

like this?
@Asiatic Lion Hello! Could you please tell me how to overwrite className in the body? App Router and Tailwindcss
Youssef
Just pass the class names you want to the className prop of the body tag in a layout file
Is that what you meant?
@alfon what do you mean by overwrite className in the body? tsx <body className="flex flex-col min-h-screen"> ... </body> like this?
Asiatic LionOP
I have a background defined in a body element in Root Layout for the whole application. A certain page should have a different background, so that when scrolling it does not show a different color.
alfon
you create multiple root layouts that defines a different styling for your <body> then
Personally you can also achieve thay by creating a <div> that detects the path and changes the color in the client side so that you don't need to create mnultiple root layouts
Asiatic LionOP
I need to define styles specifically for the body, can you tell me how I can switch them? Thank you.
alfon
I can't tell you a suboptimal solution so i need more information on how you can achieve your desired result.
Judging by your case, you need to change styling of body based on "certain page" so that when scrolling it does not "show a different color". Based on that i suggest either creating a separate route group for that particular page or handle it on the client side
Asiatic LionOP
If I define the background in the top div, the white color appears when scrolling. That's why I want to do it somehow in the body.
alfon
yeah so, a route group then
alfon
(withHeader)/layout.tsx -> <body className="bg-black">
(withoutHeader)/layout.tsx -> <body className="bg-white">
Answer
Asiatic LionOP
Got it. Thank you so much for your help.