如何在tailwind.css中使用:not()？

Question

我最近开始在我的 Nuxt 项目中尝试使用 tailwind.css。所以我需要使用:not(:last-child)伪元素，但我没有找到方法。

  <ul>
    <li
      v-for="(item, index) in items"
      :key="`item-${index}`"
      class="border-solid border-b border-black"
    >
      Item
    </li>
  </ul>

我想为<li>除最后一个之外的所有内容添加一个边框底部。

我知道 Tailwind 有第一个和最后一个伪类变体，但我不能将它们与:not()

Answer 1

您可以使用Tailwind 任意变体：

<li class="[&:not(:last-child)]:border border-sky-500">Item</li>

自Tailwind v3起可用。

Answer 2

答案在您共享last的文档中的链接中。

只需添加last:border-b-0到所有列表项，border-bottom如果它是last-child.

<ul>
  <li
    v-for="(item, index) in items"
    :key="`item-${index}`"
    class="border-solid border-b border-black last:border-b-0"
  >
    Item
  </li>
</ul>