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

我最近开始使用 Next.js 和 TailwindCSS,我想更改页面的背景。这可能是一件非常简单的事情,但我不知道该怎么做。您不能将类添加到 Next.js 中的 body 标记,对吗?我尝试用divComponent 包裹在_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 检查指向评论的链接。
    猜你喜欢
    • 2021-12-19
    • 2023-02-16
    • 1970-01-01
    • 1970-01-01
    • 2012-07-10
    • 2013-08-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多