如何使用tailwind CSS更改React JS(Next JS)中所有页面的默认屏幕背景颜色

Question

我正在尝试更改 Web 应用程序所有页面的默认屏幕背景颜色。

我使用的技术：

1. 反应JS
2. 下一个JS
3. 顺风 CSS

我想将所有页面的屏幕背景颜色设置为如图所示的浅灰色，而不是默认的白色。

有没有办法一次性完成所有这些，或者我们需要手动为每个页面添加背景颜色？

Answer 1

如果您使用 NextJS，您可以使用自定义文件_app.jsx（如果您使用 javascript）或_app.tsx（如果您使用 TypeScript）来更改所有网页的背景颜色（以及更多其他颜色）。

div您可以在文件中创建并将背景颜色添加到 中className，它将应用于 Web 应用程序中呈现的所有页面。

代码示例：

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

NextJS对此有更详细的解释。

Answer 2

用于@layer base自定义您的 html，这是使用 Tailwind 的正确方法。

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