如何在Tailwind CSS中按屏幕尺寸移除父div保留子内容？

核心需求是让带lg:col-span-2的容器在大屏维持网格布局，小屏时“移除”容器但保留内容，推荐两种实现方式：

方法一：使用Tailwind的contents响应式类（推荐） #

Tailwind的contents类可以让元素本身从布局树中消失，其子元素直接成为父元素的子节点，完美匹配你的需求。只需给目标容器添加响应式的contents类，仅在小于lg的屏幕生效：

修改后的Blade代码示例 #

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
  <!-- 目标容器：大屏占2列，小屏自动“消失”，内容直接继承父网格布局 -->
  <div class="lg:col-span-2 max-lg:contents">
    <p>需要保留的内容1</p>
    <div>需要保留的内容2</div>
  </div>
  <div>
    其他网格内容
  </div>
</div>

原理说明 #

• lg:col-span-2：在lg及以上屏幕，容器正常占据2列网格，维持原有布局。
• max-lg:contents：在小于lg的屏幕，容器不再生成布局盒子，内部内容直接成为父网格的子元素，相当于“移除”了容器但保留内容。

方法二：结合Blade与Tailwind的条件显示（无兼容性顾虑） #

如果担心contents类的浏览器兼容性（主流浏览器均已支持），可以通过重复内容片段+响应式隐藏类实现，缺点是代码略有冗余：

代码示例 #

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
  <!-- 大屏显示的容器 -->
  <div class="lg:col-span-2 hidden lg:block">
    <p>需要保留的内容1</p>
    <div>需要保留的内容2</div>
  </div>
  <!-- 小屏直接显示内容 -->
  <div class="lg:hidden">
    <p>需要保留的内容1</p>
    <div>需要保留的内容2</div>
  </div>
  <div>
    其他网格内容
  </div>
</div>

原理说明 #

• 大屏时，显示带lg:col-span-2的容器，隐藏直接显示的内容片段。
• 小屏时，隐藏容器，直接显示内容片段，达到移除容器的效果。

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