使用h-screen时Tailwind背景渐变断裂的解决方法咨询

问题出在你给<body>同时设置了h-screen和min-h-screen属性：

• h-screen会强制将body高度固定为当前浏览器视口的高度
• 当页面内容超出视口高度时，body不会随内容被撑开，背景渐变只会渲染到初始视口底部，滚动后就会出现生硬的断裂效果

修复步骤 #

去掉h-screen，仅保留min-h-screen，这样body的高度会自适应页面内容的实际高度，背景渐变就能完整覆盖整个页面：

<body className="font-inter min-h-screen dark:bg-dark-background dark:text-dark-text-primary bg-gradient-to-br from-gray-800 to-gray-900">
  <Main />
  <NextScript />
</body>

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