How to style first/last/odd/even children?

Child selection modifiers in Tailwind.

What You'll Learn

Child selection modifiers
Practical examples
Empty state handling

Basic Modifiers

index.htmlHTML

<ul>
  {items.map(item => (
    <li class="py-2 first:pt-0 last:pb-0 border-b last:border-0">
      {item}
    </li>
  ))}
</ul>

Odd/Even Rows

index.htmlHTML

<table>
  <tbody>
    {rows.map(row => (
      <tr class="odd:bg-gray-50 even:bg-white">
        <td>{row.name}</td>
      </tr>
    ))}
  </tbody>
</table>

Available Modifiers

Modifier	Selects
first:	First child
last:	Last child
odd:	Odd children (1, 3, 5...)
even:	Even children (2, 4, 6...)
only:	Only child
first-of-type:	First of its type
last-of-type:	Last of its type

Empty State

index.htmlHTML

<div class="empty:hidden">
  {content || ''}
</div>

<input class="empty:border-gray-300 not-empty:border-blue-500" />

What is Class Variance Authority (CVA)?

How to use ::before and ::after in Tailwind?