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 は Next.js 開発の実績と知見があります

フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。

「既存のサイトを Next.js に移行したい」
「人手が足りず信頼できるエンジニアを探している」
「自分たちで手を付けてみたがいまいち上手くいかない」

フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!

関連リンク


投稿者 Morita Sou

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