Next.js+TailwindCSS渲染异常：背景色无法全屏显示求助

核心原因及修复步骤 #

1. 修正根元素的全屏与边距设置 #

浏览器默认会给html、body添加margin/padding，且默认高度不会占满视口，导致背景色仅显示在内容容器内。直接修改layout.tsx：

// layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className="h-full">
      <body className={`${inter.className} h-full m-0 p-0 bg-slate-700`}>
        <main className="min-h-full">
          {children}
        </main>
      </body>
    </html>
  );
}

关键改动：

• 给html加h-full，让根元素高度铺满视口
• 给body加m-0 p-0清除默认边距，同时设置h-full和背景色
• 外层容器main加min-h-full，确保内容不足时也能撑满高度

2. 检查全局样式冲突 #

打开app/globals.css，确保没有覆盖全屏设置，基础样式如下：

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 若仍有问题，手动强制全局样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

3. 确认Tailwind配置有效性 #

检查tailwind.config.js，确保没有错误排除页面路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 清理页面级多余边距 #

如果page.tsx中的容器有额外边距，一并清除：

// page.tsx
export default function Home() {
  return (
    <div className="m-0 p-0">
      <h1>Hello World</h1>
    </div>
  );
}

修改完成后重启开发服务器，刷新页面即可看到全屏背景效果。

内容的提问来源于stack exchange，提问作者GN Vageesh