如何使用TailwindCSS为网格交替行设置差异化背景颜色

有两种仅依靠TailwindCSS的实现方式，无需引入JavaScript：

方案1：不调整原有DOM结构（推荐快速适配） #

直接给外层grid容器添加Tailwind任意值选择器，匹配对应行的所有子元素添加背景色即可：

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-6 gap-4 [&>*:nth-child(2),&>*:nth-child(3),&>*:nth-child(5),&>*:nth-child(6),&>*:nth-child(7)]:bg-gray-100">
  <div class="col-span-6">Row 1</div>
  <div class="col-span-3">Row 2 A</div>
  <div class="col-span-3">Row 2 B</div>
  <div class="col-span-6">Row 3</div>
  <div class="col-span-2">Row 4 A</div>
  <div class="col-span-2">Row 4 B</div>
  <div class="col-span-2">Row 4 C</div>
</div>

如果需要通用适配任意行数的交替行，也可以自定义选择器规则批量匹配偶数行的所有子元素。

方案2：微调结构提升可维护性（推荐长期迭代场景） #

把每一行的元素用统一的行容器包裹，直接用Tailwind内置的even伪类给偶数行容器加背景，后续调整列数也不需要修改选择器规则：

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-6 gap-4">
  <div class="col-span-6">Row 1</div>
  <!-- 行2 行容器 -->
  <div class="col-span-6 grid grid-cols-6 gap-4 even:bg-gray-100 p-0">
    <div class="col-span-3">Row 2 A</div>
    <div class="col-span-3">Row 2 B</div>
  </div>
  <div class="col-span-6">Row 3</div>
  <!-- 行4 行容器 -->
  <div class="col-span-6 grid grid-cols-6 gap-4 even:bg-gray-100 p-0">
    <div class="col-span-2">Row 4 A</div>
    <div class="col-span-2">Row 4 B</div>
    <div class="col-span-2">Row 4 C</div>
  </div>
</div>

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