如何在 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

答案在您分享的文檔last的鏈接中。

只需將last:border-b-0添加到所有列表項，如果它是last-child ，它將刪除border-bottom 。

<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>

Answer 2

您可以使用Tailwind 任意變體：

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

這從Tailwind v3開始可用。

Answer 3

經過測試

我們也可以通過選擇我們要編輯的索引號來做到這一點

示例：我將更改第一個，並且以下所有內容都應具有樣式

                  <div
                    v-for="(item, i) in items"
                    :key="i"
                    :class="{ 'mx-0': i === 0, 'mx-4': i > 0 }"
                  >
                  </div>

所以 FIRST 元素的索引從 0 開始，因此我們將有一個邊距 x 0，

並且以下所有內容的邊距 x 4。