如何修复Tailwind CSS中背景图片在响应式场景下消失的问题

• 类名使用错误：Tailwind CSS 默认无w-100/h-100内置类，100%宽高对应的正确类为w-full/h-full，错误类名无法生效。
• 移动端垂直布局高度塌陷：你给section设置了flex flex-col lg:flex-row，移动端为垂直排列的flex容器，此时flex子元素的flex-1在父容器无显式高度的情况下无法自动撑开高度，背景图容器高度直接变为0，导致图片消失。
• 冗余类冲突：你给背景图div添加了container类，Tailwind的container类用于设置固定最大宽度、水平居中，用在自适应背景图容器上会限制宽度，反而会引发显示异常。

1. 修正错误类名、移除冗余类
   删除背景图div的w-100、h-100、container、重复的text-center类。
2. 增加最小高度限制
   给背景图容器添加移动端最小高度，桌面端恢复自动适配高度，示例代码如下：

<!-- 鸡蛋背景图容器调整示例 -->
<div
  style="background-image: url(./images/desktop/image-transform.jpg)"
  class="bg-cover bg-center flex-1 min-h-[300px] lg:min-h-full"
></div>

其中min-h-[300px]为Tailwind JIT模式下的任意值写法，若你的版本不支持该写法，直接给div加内联样式style="min-height: 300px"即可，数值可以根据你的设计稿需求调整。
3. 补全外层section布局类
第一个外层section缺失布局类，补全为和第二个section一致的flex flex-col lg:flex-row，保证全端布局逻辑统一：

<section class="flex flex-col lg:flex-row">
  <!-- 原有文字容器代码 -->
  <div class="flex flex-1 flex-col items-center lg:items-start p-4">
    <div class="px-28 pt-16">
      <h2 class="text-3xl md:text-4xl lg:text-5xl mb-6 font-bold">
        Transform your brand
      </h2>
      <p class="mb-6">
        We are a full-service creative agency specializing in helping brands
        grow fast. Engage your clients through compeling visuals that do the
        most marketing for you
      </p>
      <span><a href="#">Learn more</a></span>
    </div>
  </div>
  <!-- 调整后的背景图容器代码 -->
  <div
    style="background-image: url(./images/desktop/image-transform.jpg)"
    class="bg-cover bg-center flex-1 min-h-[300px] lg:min-h-full"
  ></div>
</section>

玻璃杯的背景图容器按照同样逻辑调整即可。

调整完成后，移动端有最小高度撑开容器，背景图不会消失，桌面端可以适配原有行布局的高度，显示效果和之前一致。

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