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を触れない箇所に限定するなど使いどころは考えた方が良さそうです。

Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

関連リンク


投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。