如何使用Tailwind CSS实现背景图片完全铺满div容器？

当前在Next.js + Tailwind CSS技术栈下实现全宽背景图时，将div高度设置超过图片原始高度300px后，背景图宽度能铺满容器，但顶部出现空白，无法完全覆盖div，高度设为450px时效果如下：

原始实现代码：

<div className="bg-[url('/image.jpg')] w-full h-[250px] bg-center-bottom bg-no-repeat bg-cover mb-8 md:bg-cover md:h-[350px]">
</div>

出现该问题的核心原因：

• 你使用了Tailwind CSS不存在的内置类bg-center-bottom，该类名不会被编译为有效的CSS规则，背景定位会回退到浏览器默认值，和预期对齐逻辑不符
• 若项目存在全局样式覆盖，冗余书写的md:bg-cover可能导致部分断点下background-size: cover规则失效，此时背景图不会被等比放大到覆盖整个容器，当容器高度超过图片原始高度时，就会在非对齐侧出现空白

bg-cover的原生逻辑就是让背景图等比缩放至完全覆盖容器，不会残留任何空白，只需要修正无效类、清理冗余代码即可：

• 删除无效类bg-center-bottom，根据自身对齐需求选择Tailwind官方提供的背景定位类：
  • 需背景图底部对齐容器、水平居中时使用bg-bottom
  • 需背景图顶部对齐容器、避免顶部内容被裁切时使用bg-top
  • 需背景图中心对齐时使用bg-center
• 删除重复的md:bg-cover声明，基础断点书写的bg-cover会自动继承到所有更大尺寸断点，无需重复书写

修正后的可直接使用的代码：

<div className="mb-8 h-[250px] w-full bg-[url('/image.jpg')] bg-bottom bg-no-repeat bg-cover md:h-[350px]">
</div>

如果修改后仍存在空白，说明项目中有全局CSS强制覆盖了background-size属性，可以将bg-cover修改为!bg-cover，通过!important优先级强制规则生效。
排查时可以直接打开浏览器开发者工具，选中对应div后在「计算后样式」面板检查background-size是否为cover、background-position是否符合预期，即可快速确认是否有样式被覆盖。

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