Pseudo-Class Variants

Style elements based on structural and state pseudo-classes via variant prefixes, no extra classes on the children needed.

4 min read Level 2/5 #tailwind#variants#pseudo

What you'll learn

Use first, last, odd, and even variants
Reach further with nth-* and arbitrary variants
Combine structural variants with responsive and state ones

Structural pseudo-classes let you style an element based on its position among siblings. Tailwind exposes them as variant prefixes, so a single class on the parent’s children styles the right ones.

Position Variants

Apply different styling to the edges and alternating rows of a list without tracking indexes yourself:

<ul>
  <li class="border-b py-3 first:pt-0 last:border-b-0
             odd:bg-gray-50 even:bg-white">
    Row content
  </li>
</ul>

first:pt-0 removes the top padding from the first item, last:border-b-0 drops the trailing divider, and odd: / even: produce zebra striping. only: targets an element that is the sole child.

nth-* and Arbitrary Selectors

For positions the named variants do not cover, use nth-* or drop into a fully arbitrary selector with [&...]:

<div class="nth-3:text-red-500 [&:nth-child(4n)]:font-bold">
  Item
</div>

The [&:nth-child(3)] form puts the current element where & is, so you can express any selector CSS supports. empty:hidden collapses elements with no content, and target:ring-2 highlights the element matching the URL fragment.

Stacking Order Matters

Structural variants combine with responsive and state variants, and they read left to right:

<li class="md:odd:bg-gray-100 hover:bg-blue-50
           first:hover:text-blue-600">
  Stacked variants
</li>

first:hover:text-blue-600 means “the first child, while hovered” — the order of prefixes does not change the final selector, but keeping a consistent reading order keeps long class lists scannable.

Pseudo-Element Variants →