使用 TailwindCSS 更改 Next.js 背景颜色答案

【问题标题】：Change Next.js background color with TailwindCSS使用 TailwindCSS 更改 Next.js 背景颜色
【发布时间】：2022-02-13 23:04:14
【问题描述】：

我最近开始使用 Next.js 和 TailwindCSS，我想更改页面的背景。这可能是一件非常简单的事情，但我不知道该怎么做。您不能将类添加到 Next.js 中的 body 标记，对吗？我尝试用div 将Component 包裹在_app.tsx 中，但这也包裹在不同的div 中，因此背景颜色不是全高。

我应该如何为我的应用程序设置背景颜色，是否也可以为单个页面否决它？

【问题讨论】：

标签： reactjs next.js tailwind-css

【解决方案1】：

使用您的样式表添加它（styles/globals.css，如果是 official example）：

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

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

您也可以创建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

如果您想按页面执行此操作，请参考：vercel/next.js#12325 (comment)

【讨论】：

最好的解决方案是什么？自定义 Document 还是 Tailwind 层？我想如果它纯粹用于样式化图层会是最好的，但如果你还需要其他东西，文档会更好。你有什么看法？
@BartBergmans 是的，我也这么认为。除非您出于其他原因已经拥有它，否则无需引入自定义文档。顺风解决方案不需要创建任何额外的东西。已经有了带有@tailwind 指令的全局文件。在我看来，两者都很好。是的，使用自定义文档，您还可以根据要呈现的页面有选择地添加一些类。所以这可能是自定义文档的一个加分点。但这完全取决于您的用例。
如何根据页面添加类？关于自定义 Document 的文档是针对整个应用程序的，而不取决于您在哪个页面上？
@BartBergmans 检查指向评论的链接。