Tailwind CSS 3.1.6版本中first:、last:、even:、odd:变体异常问题求助

嘿，我来帮你搞定这个Tailwind变体的问题！你的核心问题是把结构伪类变体的类加错了位置——这些变体是要应用到**列表项（<li>）**上的，而不是父容器<ol>。

为什么你的代码会出错？ #

当你把first:bg-green-500加到<ol>上时，Tailwind生成的CSS是这样的：

.first\:bg-green-500:first-child {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}

这意味着如果这个<ol>是它父元素的第一个子元素，整个列表容器都会变成绿色，而不是列表里的第一个<li>。这就是你看到所有元素都变绿的原因。同理，last:、even:、odd:这些变体加在父容器上时，也不会作用到子列表项上。

修正后的代码 #

把变体类直接加到每个<li>元素上，就能实现你想要的效果：

<ol>
  <li class="first:bg-green-500 last:bg-black even:bg-gray-100 odd:bg-gray-200">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black even:bg-gray-100 odd:bg-gray-200">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black even:bg-gray-100 odd:bg-gray-200">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black even:bg-gray-100 odd:bg-gray-200">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black even:bg-gray-100 odd:bg-gray-200">Lorem ipsum dolor sit amet.</li>
  <li class="first:bg-green-500 last:bg-black even:bg-gray-100 odd:bg-gray-200">Lorem ipsum dolor sit amet.</li>
</ol>

额外优化小技巧 #

如果觉得每个<li>都写重复类太麻烦，你可以用Tailwind的@apply指令提取公共类：

@layer utilities {
  .list-item-styles {
    @apply first:bg-green-500 last:bg-black even:bg-gray-100 odd:bg-gray-200;
  }
}

之后在<li>上直接用<li class="list-item-styles">就能复用样式啦。

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