#how to set styles on <html> and <body> on specific pages (and not on others)

22 messages · Page 1 of 1 (latest)

tame violet
#

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.

vast pierBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

hot lily
#

well you cant have multiple html's

#

so you cant have different ones per page

tame violet
#

You can’t conditionally apply different styles?

hot lily
#

body should be fine, just make sure to not have multiple bodies in one page or you are gonna get hydration errors

tame violet
#

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

hot lily
hot lily
#

even the html tbh

tame violet
#

How do I access the html?

hot lily
# 

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
tame violet
#

Document.queryselector?

hot lily
#

this is your root layout right?

#

like its similar to this right

tame violet
#

In document.tsx?

hot lily
#

nope, layout.tsx

tame violet
#

No

#

I’m using pages router btw if that’s relevant

#

And I have multiple different layouts

hot lily
#

oh, sorry im only used to app router. You will need to wait for someone else.

tame violet
#

Ah okay, thanks anyway