csscss-selectorstailwind-css

How to use :not() in tailwind.css

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 don't know 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()

Solution

  • You can use Tailwind arbitrary variants:

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

    This is available since Tailwind v3.