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

Question

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.

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

Answer 1

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.

Answer 2

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.

Answer 3

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
}