Tailwind CSS で子孫セレクタなどを指定できる arbitrary variants

こんにちは森田です。
今回は Tailwind CSS v3.1 で実装されたセレクタを指定できる新機能 「arbitrary variants」 の紹介します。

arbitrary variants

arbitrary variants はセレクター修飾子を class に直接記述し親セレクタからセレクタを指定する機能です。

Handling Hover, Focus, and Other States – Using arbitrary variants

Tailwind CSS v3 より下記のコードのような任意の値を指定できる arbitrary value という機能はありました。

<div class="top-[117px]">
  <!-- ... -->
</div>

arbitrary variants はそれをセレクタに使えるようになりました。

子要素指定

子要素の指定は &> を使い指定します。

<ul role="list" class="[&>li]:p-4">
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

このような each や map で取得するリストなどが一番使えそうな気がします。

上記サンプルコードでは &>li と li要素を指定していますが、 &>* など全称セレクタなども使えます。

子孫要素指定

子孫要素の指定は &_ を使い指定します。

<div class="[&_a]:mt-4">
  <p>Lorem ipsum...</p>
  <ul>
    <li>
      <a href="#">Lorem ipsum...</a>
    </li>
    <!-- ... -->
  </ul>
</div>

疑似クラス指定

擬似クラス指定も可能になりました。
下記コードのように指定すると3番目のli要素のみスタイルを適用します。

<ul role="list">
  {#each items as item}
    <li class="[&:nth-child(3)]:underline">{item}</li>
  {/each}
</ul>

At-rules指定

@supports などAt-rulesも指定することができます。

<div class="flex [@supports(display:grid)]:grid">
  <!-- ... -->
</div>

まとめ

Tailwind CSS v3.1 から追加さえれた arbitrary variants。
便利そうですが、スタイルを指定した場所が分かりづらかったり、意図しない要素にスタイルが当たったりとデメリットが容易に想像つくので、動的でHTMLを触れない箇所に限定するなど使いどころは考えた方が良さそうです。

関連リンク

• Tailwind CSS v3.1: You wanna get nuts? Come on, let’s get nuts!
• Handling Hover, Focus, and Other States