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

borisdiakur · Accepted Answer · 2022-11-15 12:50:45Z

149

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

This is available since Tailwind v3.

answered Nov 15, 2022 at 12:50

12.2k9 gold badges74 silver badges103 bronze badges

1
That saves having to write a plugin
– Jono
CommentedJun 3, 2024 at 9:02
1
had to add > after the & other than that works great thanks for the hint so full example [&>:not(:last-child)]:border
– Can Rau
CommentedAug 24, 2024 at 13:53
This might help someone in the future thus I am adding it as a comment here. I wanted to add the pseudo class :after as separator (with content ·). All I had to do was [&:not(:last-child)]:after:content-['·']
– konkasidiaris
CommentedNov 13, 2024 at 19:35

Estevan Maito · Accepted Answer · 2020-04-28 22:29:45Z

96

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>

answered Apr 28, 2020 at 22:29

1,8482 gold badges21 silver badges23 bronze badges

1
isn't it a problem with efficiency? because we need to write 2 tailwind classes but in simple CSS we have so much more selector powers.
– Reza Majidi
CommentedApr 29, 2020 at 6:49
3
1) Give it a try, inspect the list and you will notice that it is only applied to the last item. So no problem with efficiency. 2) That's the whole point with Tailwind: insted of writing CSS, you write classes in HTML.
– Estevan Maito
CommentedApr 29, 2020 at 17:24
1
also, you need to fix config variants: { extend: { margin: ['first', 'last'] }, },
– Dmytro Lishtvan
CommentedMay 6, 2021 at 14:07
11
This doesn't work for me.
– JohnAllen
CommentedOct 31, 2021 at 6:40

Ryan Circelli · Accepted Answer · 2024-05-13 21:18:37Z

Another cool thing you can do is also select pseudo-classes!

The intuitive solution will not work:

[:not(:group-hover)]:your-style

You need to apply it like this:

group-[:not(:hover)]:your-style

exmaxx · Accepted Answer · 2025-03-21 09:48:41Z

Use Tailwind 4

The new Tailwind 4 introduces the not-* variant.

We can now use not-last, not-first, etc. In your case, using not-last:border-b would solve the problem:

<ul> <li v-for="item in items" class="not-last:border-b" > ... </li> </ul>

Please, view the example here.

TylerH · Accepted Answer · 2023-05-26 15:49:19Z

We could also do this by selecting the index number we want to edit

EXAMPLE: I will change the first one, and all the following should have a style

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

so the FIRST element has an index from 0, and therefore we will have a margin x 0,

and all of the following would have margin x 4.

ahmnouira · Accepted Answer · 2024-04-26 08:28:26Z

You can change the display layout to use a grid instead of the flex and add some row gap space.

 <div className="grid grid-cols-1 gap-y-4"> ... </div>