Next.js Discord

Discord Forum

Fixing Tailwind div height

Answered
Lionhead posted this in #help-forum
Open in Discord
LionheadOP
not sure what's going on here - both the body and the outermost div is supposed to take up the full screen height, but that's not happening

root layout:

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


main page:

export default function Page() {
    return (<div>
        <CodeWindow/>
    </div>);


component:
 <div className="h-full items-center justify-center border-gray-300 rounded-xl bg-purple-400">
            <textarea value={code} onChange={changeCode}
                className="flex-1 max-h-50vh resize-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block 
                            w-3/4 h-10vh p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </textarea>
            <button onClick={runCode}>run code</button>
            <p>output: {output}</p>
            <p>error: {error}</p>
            asd
        </div>);
Answered by Lionhead
i had to delete my .next folder and rebuild it - i think i built wrong the first time
View full answer

2 Replies

LionheadOP
on that note, padding and margin's aren't working either (no change with or without padding in className)
LionheadOP
i had to delete my .next folder and rebuild it - i think i built wrong the first time
Answer