Tailwind CSSでnth-childを使用する

Tailwind CSSを使って、X番目の要素や偶数奇数の要素に対してスタイルを設定する方法を試してみます。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17になります。

サンプルコード

まずは最初や最後の要素の場合を試してみます。
:first-childはfirst:、:last-childはlast:をclassの前に付与します。

<ul>
  <li
    class="
      first:text-blue-700
      last:text-red-700
    "
  >リスト</li>
  <li
    class="
      first:text-blue-700
      last:text-red-700
    "
  >リスト</li>
  <li
    class="
      first:text-blue-700
      last:text-red-700
    "
  >リスト</li>
  <li
    class="
      first:text-blue-700
      last:text-red-700
    "
  >リスト</li>
  <li
    class="
      first:text-blue-700
      last:text-red-700
    "
  >リスト</li>
</ul>

:first-childと:last-childのデモページ

次に偶数や奇数の場合で、:nth-child(odd)はodd:、:nth-child(even)はeven:になります。

<ul>
  <li
    class="
      odd:text-blue-700
      even:text-red-700
    "
  >リスト</li>
  <li
    class="
      odd:text-blue-700
      even:text-red-700
    "
  >リスト</li>
  <li
    class="
      odd:text-blue-700
      even:text-red-700
    "
  >リスト</li>
  <li
    class="
      odd:text-blue-700
      even:text-red-700
    "
  >リスト</li>
  <li
    class="
      odd:text-blue-700
      even:text-red-700
    "
  >リスト</li>
</ul>

偶数や奇数のデモページ

:nth-child(X)はnth-X:、:nth-last-child(X)はnth-last-X:になります。

<ul>
  <li
    class="
      nth-2:text-blue-700
      nth-last-2:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-2:text-blue-700
      nth-last-2:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-2:text-blue-700
      nth-last-2:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-2:text-blue-700
      nth-last-2:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-2:text-blue-700
      nth-last-2:text-red-700
    "
  >リスト</li>
</ul>

:nth-child()と:nth-last-child()のデモページ

:nth-child(3n+1)のような指定をしたい場合はnth-[3n+1]:になります。

<ul>
  <li
    class="
      nth-[3n+1]:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-[3n+1]:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-[3n+1]:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-[3n+1]:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-[3n+1]:text-red-700
    "
  >リスト</li>
</ul>

:nth-child(3n+1)のデモページ

:nth-of-type(X)はnth-of-type-X:、:nth-last-of-type(X)はnth-last-of-type-X:になります。

<ul>
  <li
    class="
      nth-of-type-2:text-blue-700
      nth-last-of-type-3:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-of-type-2:text-blue-700
      nth-last-of-type-3:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-of-type-2:text-blue-700
      nth-last-of-type-3:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-of-type-2:text-blue-700
      nth-last-of-type-3:text-red-700
    "
  >リスト</li>
  <li
    class="
      nth-of-type-2:text-blue-700
      nth-last-of-type-3:text-red-700
    "
  >リスト</li>
</ul>

:nth-of-type()と:nth-last-of-type()のデモページ