React+Tailwind CSS背景图片无法全屏显示，存在空白边距如何解决？

问题原因 #

浏览器默认会给html和body元素添加margin（通常是8px），导致你的容器即使设置了w-full h-screen，也会被全局边距限制，出现四周空白；另外你代码里的object-fill是针对<img>标签的属性，对背景图片无效，属于冗余类。

解决方案 #

1. 重置全局默认样式 #

在你的全局样式文件（比如index.css）中添加以下代码，清除浏览器默认的边距：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

如果不想用Tailwind的@layer，也可以直接写全局样式：

html, body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

2. 优化容器代码 #

移除无效的object-fill类，同时确保背景图片居中显示（可选，根据需求调整）：

<div 
  className="w-full h-screen flex flex-wrap justify-center items-center bg-cover bg-center bg-no-repeat"
  style={{ backgroundImage: `url('bg-image.png')` }}
>
</div>

备选方案（快速临时修复） #

如果不想修改全局样式，可以直接在项目根组件的外层（比如public/index.html的<body>标签）添加Tailwind类：

<body class="m-0 p-0">
  <!-- 你的React根容器 -->
</body>

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