Next.js Discord

Discord Forum

is this a good way to use tailwindcss/css with nextjs(layouting)?

Answered
Holland Lop posted this in #help-forum
Open in Discord
Holland LopOP
so i find it hard to css without flex and very hard to set content on the page so i always used to make everything flex and fit to the screen like shown in the images, but i do not know if its a good practice or not since people here have a lot of experience i wanted to confirm is this good? or should i switch to a different standard? the code looks like this

attached a folder structure and code too

header.js
export default function Header() {
  return (
    <header className="p-4 border-b">
      <nav className="flex justify-between">
        <div className="font-bold">Logo</div>
        <div className="space-x-4">
          <a href="#" className="text-sm">Link 1</a>
          <a href="#" className="text-sm">Link 2</a>
        </div>
      </nav>
    </header>
  );
}

Footer.js

export default function Footer() {
  return (
    <footer className="p-4 border-t text-sm text-center">
      Footer content
    </footer>
  );
}


export default function Main({ children }) {
  return (
    <main className="flex-1 overflow-y-auto p-4 flex flex-col">
      <div className="flex flex-1 flex-col items-center justify-center w-full">
        {children}
      </div>
    </main>
  );
}


import "./globals.css";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Main from "./components/Main";

export const metadata = {
  title: "Full Height Layout",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="flex flex-col min-h-screen">
        <Header />
        <Main>{children}</Main>
        <Footer />
      </body>
    </html>
  );
}


export default function HomePage() {
  return (
    <div className="p-6 border rounded bg-gray-50">
      This content is centered and fills the remaining space.
    </div>
  );
}


thanks a lot for your help
Answered by LuisLl
What I would change is this:

If you have a standard padding for every wrapper, go ahead and create your own css class that applies the padding for consistency, alternatively create a <ContainerWrapper> component that’s internally a div with padding and wrap any component(s) you need in it.

I also like to set up a max-width and mx-auto on that <ContainerWrapper> component, and if the max-width and padding changes I only change one place.

I do this for consistency
View full answer

5 Replies

Holland LopOP
any improvements and advices are welcome
LuisLl
This is the way I do it personally when I want the screen to always be 100vh no matter what.

It’s a good solution if you want the footer to always be visible even though Main has too much content that it creates a scroll on y axis. Here the main container will be the scrollable one, while Header and Footer are static and always there.
LuisLl
What I would change is this:

If you have a standard padding for every wrapper, go ahead and create your own css class that applies the padding for consistency, alternatively create a <ContainerWrapper> component that’s internally a div with padding and wrap any component(s) you need in it.

I also like to set up a max-width and mx-auto on that <ContainerWrapper> component, and if the max-width and padding changes I only change one place.

I do this for consistency
Answer
LuisLl
Look, and it’s entendible in case you wanna override the default classNames depending on where you use it, or add a background color etc.

interface ContainerWrapperProps extends ComponentProps<"div"> {}

function ContainerWrapper({
  children,
  className,
  ...props
}: ContainerWrapperProps) {
  return (
    <div
      className={cn(
        "relative mx-auto w-full max-w-[96rem] px-4 lg:px-6",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}