How to Use :not() in Tailwind CSS

Tailwind CSS doesn’t provide a built-in :not() variant, but you can still achieve the same effect using arbitrary variants and new features in Tailwind 4.

1. Using Arbitrary Variants (Tailwind v3+)

With Tailwind v3, you can apply :not() using arbitrary variants:

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

This applies border-b to all <li> elements except the last one.

**2. Using Tailwind 4’s `not-*` Variant**

Tailwind v4 introduces native not-* variants, making it even easier to exclude specific elements:

<ul>
  <li class="not-last:border-b border-gray-500">Item</li>
</ul>

This will add a border to all <li> elements except the last one.

3. Using `last:border-0` as an Alternative

If you want to remove the border from the last element instead:

<ul>
  <li class="border-b border-gray-500 last:border-0">Item</li>
</ul>

This approach is simple and doesn’t require :not().

4. Using `group` for More Complex Selectors

For interactive elements, you can use group and :not() within arbitrary variants:

<div class="group">
  <button class="group-[:not(:hover)]:bg-gray-300">Hover Me</button>
</div>

This applies a background color unless the button is hovered.

FAQs

Why doesn’t Tailwind support `:not()` directly?

Tailwind focuses on utility-based classes, and :not() is often replaced with alternative solutions like last:* or first:*.

Does `:not()` work in all Tailwind versions?

No, arbitrary variants were introduced in Tailwind v3, and not-* variants were added in Tailwind v4.

What’s the best method to exclude elements in Tailwind?

Use not-* in Tailwind v4 or arbitrary variants ([&:not(:last-child)]) in Tailwind v3.