Change Next.js background color with TailwindCSS-CodePudding

I recently started with Next.js and TailwindCSS and I wanted to change the background of my page. It is probably a really simple thing to do but I can't figure it out how to do. You can't add classes to the body tag in Next.js right? I tried to wrap the Component in the _app.tsx with a div but that is also wrapped inside a different div, so the background color isn't the full height.

How should I set the background color for my application and is it also possible to overrule it for a single page?

CodePudding user response：

Add it using your stylesheet (styles/globals.css in case of the official example):

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-slate-900;
  }
}

You can also create a custom document:

// pages/_document.js

import { Html, Head, Main, NextScript } from 'next/document'

const Document = () => (
  <Html>
    <Head />
    <body className="bg-slate-900">
      <Main />
      <NextScript />
    </body>
  </Html>
)

export default Document

If you want to do it on per-page basis, refer this: vercel/next.js#12325 (comment)