如何使用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對此有更詳細的解釋。