Tailwind CSSで even や odd を子に一律で適用したい

時々使いたいので備忘録に。

結論

例えば「子要素のうち奇数番目の子要素にだけfont-boldとmt-4を適用したい」ならこう

<dl class="[&>*:nth-child(odd)]:font-bold [&>*:nth-child(odd)]:mt-4">
  <dt>ID</dt>
  <dd>1234</dd>
  <dt>Name</dt>
  <dd>Shigeru</dd>
  <dt>createdAt</dt>
  <dd>2025-01-01 00:00</dd>
  <dt>updatedAt</dt>
  <dd>2025-01-01 23:59</dd>
</dl>

この書き方ってなに？

任意のvariantsを定義する機能（arbitrary variants）を使って、「子要素たちのうち奇数番目のもの」を指定している。この任意のvariantsを定義する機能（arbitrary variants）の中では & が自身を示すPlaceholderになっており、以降は普通にCSSセレクタを書いている。

この arbitrary variants については公式ドキュメントではここに使い方が載ってる。

もちろん私は普段からドキュメントの隅々まで見ているので当然最初から知っていた...なんてわけがなく、下記で知った。