使用Tailwind CSS时，部分Div缺失如何让网格行自动填充？

方法一：Vue动态类绑定 #

直接根据showSecondDiv状态为第三个Div切换列宽类：

<div class="grid grid-cols-12 gap-4">
  <div class="col-span-4 bg-blue-200 p-4">第一个Div</div>
  <div v-if="showSecondDiv" class="col-span-4 bg-green-200 p-4">第二个Div</div>
  <div :class="['col-span-4', !showSecondDiv && 'col-span-8']" class="bg-red-200 p-4">第三个Div</div>
</div>

当showSecondDiv为false时，自动给第三个Div追加col-span-8类——Tailwind中后写的类优先级更高，会覆盖默认的col-span-4，实现填满整行的效果。

方法二：Tailwind自定义工具类（无需修改Vue逻辑） #

如果不想在模板里写条件判断，用CSS选择器实现自动适配：

1. 在项目的Tailwind入口CSS中添加自定义工具类：

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

@layer utilities {
  .adjust-third-col:has(> div:first-child:not(:has(+ .second-div))) > div:last-child {
    @apply col-span-8;
  }
}

2. 给外层容器和第二个Div加标识类：

<div class="grid grid-cols-12 gap-4 adjust-third-col">
  <div class="col-span-4 bg-blue-200 p-4">第一个Div</div>
  <div v-if="showSecondDiv" class="second-div col-span-4 bg-green-200 p-4">第二个Div</div>
  <div class="col-span-4 bg-red-200 p-4">第三个Div</div>
</div>

原理是利用CSS :has()选择器检测第一个Div后面没有.second-div时，给第三个Div自动应用col-span-8类，全程不用修改Vue的逻辑状态。

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