【tailwind css】**　について

tailwind cssのv4にて、子孫要素全部に設定する　**　が出たことを初めて知ったので、試してみました。

*　の復習

まず、1つ下の子要素に対する　*　こちらは元々あったかと思います。
child (子)バリアントという名前みたいです。
listに対して一括で指定したり、hoverの際の挙動を一括にしたりできるので便利です。

使用例

<div class="flex *:px-4 *:hover:text-red-400　*:hover:underline">
  <a href="#">about</a>
  <a href="#">news</a>
  <a href="#">corporate</a>
  <a href="#">contact</a>
</div>

tailwind playgroundでプレビューを開く

**　を使ってみた

こちらはDescendant(子孫)バリアントという名前みたいです。
1つ下の子だけでなく、子孫要素全てにかかるみたいです。
なので、上の* で使ったものより階層がよりある際に一括で指定できたり、下の画像のようなバンドエイドが作れます笑

使い方

<div class="**:text-sky-500 **:underline">
  <h1 class="text-3xl">タイトル</h1>
  <div>
    <p class="text-lg">コメント</p>
    <p class="text-lg">コメント2</p>
  </div>
  <nav>
    <ul>
      <li>さかな</li>
      <li>にく</li>
    </ul>
  </nav>
</div>

tailwind playgroundでプレビューを開く

おわりに

子孫バリアントが使えるようになったのを知り、揚々と記事を書き始めましたが、いざ試してみると自分ではいいケースが思いつかず変な記事になってしまいました、、🙇‍♂️

せめて、子バリアントを使っていなかった方へ届けば幸いです。