CODEWITHSUNDEEP
javascriptreactjsnext.jsfrontendtailwind-css
I'm Sunil3
I'm Sunil3

Reputation: 489

How to change the default screen background color of all the pages in React JS(Next JS) using tailwind CSS

I am trying to change the default screen background colour of all the pages of the web application.

Technologies I used:

  1. React JS
  2. Next JS
  3. Tailwind CSS

I want to make the screen background colour of all pages light grey as shown in the image instead of the default white colour.

enter image description here

Is there any way to do that all at once, or do we need to add background colour manually to every page?

Upvotes: 3

Views: 39040

Answers (5)

Nhan
Nhan

Reputation: 3895

Use @layer base to customise your html, this is the proper method using Tailwind.

@layer base {
    html {
        @apply bg-gray-50;
    }
}

Upvotes: 7

Sandeep Mukherjee
Sandeep Mukherjee

Reputation: 771

In app folder go to file layout.tsx

Just update the Root Layout Component no other changes in that file

export default function RootLayout({
  children
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} bg-gray-50`}>{children}</body>
    </html>
  );
}

Upvotes: 0

MagicCamera
MagicCamera

Reputation: 19

Adding bg-color to a div only adds color to a div... I think the html { background-color: {color of your choice}; is more likely to yield the desired result. Having same issue. Applied your solution but it only filled the div that fell short of page view. Of course the previous comment's coding is incorrect. should be:

html {
    background-color: #yourcolor
}

Upvotes: 1

Kamal Maharana
Kamal Maharana

Reputation: 41

You can go to styles -> globals.css and there add the following

html {
  width: 100%;
  height: 100%;
  background-color: {color of your choice};
}

By this; all your pages will have the specified background color unless you specify a separate background color for any component.

Upvotes: 4

I&#39;m Sunil3
I&#39;m Sunil3

Reputation: 489

If you are using NextJS you can make use of a custom file _app.jsx (if you are using javascript) or _app.tsx (if you are using TypeScript) to change the background colour (and many more by the way) of all your web pages.

You can create a div in the file and add background colour to the className, it will be applied to all pages being rendered in the web application.

Code example :

function MyApp({ Component, pageProps }) {
 return (
  <div className="bg-gray-500">
    <Component {...pageProps}/>
  </div>
 );
}

NextJS has a more detailed explanation about this.

Upvotes: 7

Related Questions