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

Question

I recently started to give tailwind.css a try in my Nuxt project. so I needed to use :not(:last-child) pseudo-elements but I didn't find how.

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

I want to add a border-bottom to all of the <li> except the last one.

I know Tailwind has first & last pseudo-class variant but I can't use them with :not()

Answer 1

The answer is in the link to last in the docs, that you shared.

Just add last:border-b-0 to all list items, and it will remove the border-bottom if it is the 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>