Next.js+Tailwind项目路由跳转后页面出现莫名外边距求助

1. 移除body默认的8px外边距 #

浏览器默认会给body设置margin: 8px，Create React App内置的CSS重置会清除这个样式，但Next.js默认没有做这件事。你需要手动添加全局样式重置：

在项目的app/globals.css文件中添加以下代码：

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
}

这样就能直接覆盖浏览器的默认样式，消除页面四周的白色边距。

2. 确认Main组件的bg-white样式生效 #

从你提供的代码来看，Main组件内的div已经设置了bg-white类，理论上应该生效。如果还是看不到白色背景，排查以下几点：

• 检查Tailwind CSS配置：确保tailwind.config.js中包含页面文件路径，比如"./app/**/*.{js,jsx,ts,tsx}"，否则Tailwind不会生成对应样式类。
• 排查全局样式冲突：检查globals.css中是否有优先级更高的自定义样式覆盖了bg-white。
• 临时强制优先级：如果是样式权重问题，可以临时添加!important排查：

  <div className="bg-white! py-4 px-4 shadow rounded-xl sm:px-10 mx-10">
  

额外优化建议 #

把重复的背景渐变样式提取到Tailwind自定义类中，避免重复写内联样式：
在tailwind.config.js的theme.extend里添加：

theme: {
  extend: {
    backgroundImage: {
      'gradient-bg': 'repeating-linear-gradient(135deg,#2a2c3d,#2a2c3d 10px,#242529 10px,#242529 20px)',
    },
  },
}

之后就可以用bg-gradient-bg代替内联样式，代码更简洁：

<div className="min-h-screen flex flex-col bg-gradient-bg">

内容的提问来源于stack exchange，提问作者Germán