hey i need help
Unanswered
Netherland Dwarf posted this in #help-forum
Netherland DwarfOP
i have recently learned next js and i just wanted to make a simple layout like this
but when i am making same thing in next js everything is collapsing and i dont know the reason
can anybody look ?
this is my layout code
return (
<html lang="en">
<body
className={
>
<div className="min-h-screen flex flex-col">
<ClerkProvider>
<header className="border border-black p-4">
<h1 className="text-xl font-bold">Header</h1>
</header>
{/* Body /}
<div className="flex flex-1">
{/ Sidebar /}
<aside className="w-64 border border-black p-4">
<p>Sidebar</p>
</aside>
{/ Main Content */}
<main className="flex-1 border border-black p-4">
{children}
</main>
</div>
</ClerkProvider>
</div>
</body>
</html>
);
}
....and it looks like the second picture
but when i am making same thing in next js everything is collapsing and i dont know the reason
can anybody look ?
this is my layout code
return (
<html lang="en">
<body
className={
${geistSans.variable} ${geistMono.variable} antialiased bg-white text-gray-900 h-full}>
<div className="min-h-screen flex flex-col">
<ClerkProvider>
<header className="border border-black p-4">
<h1 className="text-xl font-bold">Header</h1>
</header>
{/* Body /}
<div className="flex flex-1">
{/ Sidebar /}
<aside className="w-64 border border-black p-4">
<p>Sidebar</p>
</aside>
{/ Main Content */}
<main className="flex-1 border border-black p-4">
{children}
</main>
</div>
</ClerkProvider>
</div>
</body>
</html>
);
}
....and it looks like the second picture
7 Replies
@Anay-208 have you installed tailwind
Netherland DwarfOP
yes
it is configured properly
@Anay-208 have you installed tailwind
Netherland DwarfOP
if u have time can you come to vc and look ?
@Netherland Dwarf if u have time can you come to vc and look ?
not now, I'm available in <t:1774891800:R>
@Anay-208 not now, I'm available in <t:1774891800:R>
Netherland DwarfOP
ok i will ping you after 6 hours