how to set styles on <html> and <body> on specific pages (and not on others)
Unanswered
French Angora posted this in #help-forum
French AngoraOP
Exactly what the title says. I’m using nextjs 14 with pages router, tailwind css, and typescript.
The reason I want to do this is because i want to have h-full for html and body for a dashboard page, but not for a landing page.
The reason I want to do this is because i want to have h-full for html and body for a dashboard page, but not for a landing page.
21 Replies
well you cant have multiple html's
so you cant have different ones per page
French AngoraOP
You can’t conditionally apply different styles?
body should be fine, just make sure to not have multiple bodies in one page or you are gonna get hydration errors
French AngoraOP
Like for instance, I know I can apply different styles to divs by either using inline tailwind inside the component file, but for html and body, they’re not accessible in components
@French Angora You can’t conditionally apply different styles?
sure, use tailwind
French AngoraOP
How do I access the html?
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}French AngoraOP
Document.queryselector?
this is your root layout right?
like its similar to this right
French AngoraOP
In document.tsx?
nope, layout.tsx
French AngoraOP
No
I’m using pages router btw if that’s relevant
And I have multiple different layouts
oh, sorry im only used to app router. You will need to wait for someone else.
French AngoraOP
Ah okay, thanks anyway
bump