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

Question

我最近开始 tailwind.css 在我的 Nuxt 项目中尝试一下。所以我需要使用 :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 有 first & last 伪 class 变体，但我不能将它们与 :not()

一起使用

Answer 1

答案在您分享的 link 到 last in the docs 中。

只需将 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

已测试

我们也可以通过选择要编辑的索引编号来完成此操作

例子：我改第一个，后面的都要有样式

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

因此第一个元素的索引从 0 开始，因此我们将有一个边距 x 0，

并且以下所有项的边距都是 4 倍。

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

How to use :not() in tailwind.css?

css

css-selectors

tailwind-css