Position among siblings.

Example#

html
<ul class="divide-y">
  <li class="first:pt-0 last:pb-0 odd:bg-slate-50">Row</li>
</ul>

Stacking#

Prefix order is screens → variants → utility. These variants combine with every screen (xxs: xs: sm: md:…) and with each other.

Best practices#

  • odd:/even: replace zebra-striping CSS
  • first:/last: fix edge padding in divided lists

variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities