Tailwind CSSで連続する要素で交互に適用されるスタイリングをする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、Tailwind CSSで連続する要素で交互に適用されるスタイリングをする方法として、odd:＆even: Modifierをご紹介します。

交互に適用されるスタイリングの例

冒頭、連続する要素で交互に適用されるスタイリングをしたい場面を整理します。

よくある例の一つに、以下のような行の背景色が交互に変わるテーブルがあります。

従来のCSSでは、疑似要素である:nth-child()を使用することで実現できました。

引数に奇数番目の場合はodd、偶数番目の場合はevenを指定すると、連続する要素で交互に適用されるスタイルを作成できます。

tr: {
  &:nth-child(even) {
    background: #EEEEEE; // 偶数番目の兄弟要素の背景色が#EEEEEEとなる
  }
}

Tailwind CSSで:nth-child(odd)または:nth-child(even)を表現するには、Modifierであるodd:とeven: を使用します。

先の例をTailwind CSSでスタイリングすると以下のようになります。

<tr class="even:bg-[#EEEEEE]">...</tr>

Tailwind CSSでは、他にも:first-childや:nth-last-child()といった疑似要素を表現するためのModifierが用意されています。（詳しくは公式ドキュメントをご覧ください）

今回は、Tailwind CSSで連続する要素で交互に適用されるスタイリングをする方法として、odd:＆even: Modifierをご紹介しました。

Tailwind CSSを使用している方の一助となれば幸いです。

ご精読ありがとうございました。