如何在父元素table上使用Tailwind的nth-child选择器实现隔行样式

想要实现表格隔行不同背景色效果，目前是给每个<tr>标签添加odd:bg-white even:bg-slate-100类，但希望仅在<table>父元素上添加一次Tailwind类完成。尝试过一些写法未生效，当前用自定义CSS结合@apply实现，求纯Tailwind方案。

当前做法 #

<table>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
</table>

尝试的无效写法 #

<table class="--odd:bg-white even:bg-slate-100 [&:nth-child(odd)]:bg-gray-400">
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
</table>

当前自定义CSS实现方式 #

<style lang="postcss">
    div.plan-details :nth-child(odd) {
        @apply text-zinc-500;
    }
    div.plan-details :nth-child(even) {
        @apply text-zinc-900;
    }
</style>

纯Tailwind解决方案 #

直接在<table>标签上使用Tailwind的自定义选择器类，指定子元素<tr>的奇偶行样式：

<table class="[&_tr:nth-child(odd)]:bg-white [&_tr:nth-child(even)]:bg-slate-100">
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
</table>

原理说明 #

• [&_tr:nth-child(odd)]:bg-white：选择当前<table>下的所有奇数位置<tr>，设置背景色为白色
• [&_tr:nth-child(even)]:bg-slate-100：选择当前<table>下的所有偶数位置<tr>，设置背景色为slate-100

该方案无需修改Tailwind配置，完全通过inline类实现需求，符合纯Tailwind的实现要求。

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