Tailwind CSSで兄弟要素の状態を評価する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

エキサイトホールディングス Advent Calendar 2024 シリーズ2の5日目を担当します。

qiita.com

今回は、Tailwind CSSで兄弟要素の状態を評価してスタイリングする方法をご紹介します。

兄弟要素の状態を評価したい場面
Tailwind CSSで兄弟要素の状態を評価する方法
- 完成形
さいごに

兄弟要素の状態を評価したい場面

冒頭、兄弟要素の状態を評価したい場面の例をお示しします。

よくある例として、ホバーすると出現するTooltip（ツールチップ）が挙げられます。

以下はマークアップの一例です。

<div>
  <!-- Tooltipを表示させるトリガー -->
  <button type="button" aria-describedby="tooltip">...</button>

  <!-- Tooltip本体 -->
  <div id="tooltip" role="tooltip">...</div>
</div>

スタイリングのアプローチとして、Tooltip本体の要素を opacity: 0;にしておいて、button要素がホバーされたらopacity: 100;にすることが考えられます。

この際、兄弟要素の状態を評価する必要が生じます。

Tailwind CSSで兄弟要素の状態を評価する方法

Tailwind CSSでは(peer-{modifier}):で兄弟要素の状態を評価できます。

評価対象の要素にpeerというclassを付与し、評価結果を使用したい要素にpeer-{modifier}):を接頭辞にclassを追加します。

例えば、先の例の場合、評価対象はbutton要素ですのでpeerをclassに追加します。

<button class="peer" type="button" aria-describedby="tooltip">...</button>

評価結果を使用したいTooltip本体には通常時のopacityに加え、「評価対象であるbutton要素がホバーされた時」の条件を表す peer-hover:*を追加します。

<!-- 通常時の不透明度は0、button要素がホバーされたら100に -->
<div class="opacity-0 peer-hover:opacity-100" id="tooltip" role="tooltip">...</div>

完成形

Codepenでこの仕組みを使い、簡易的なTooltipを作成してみましたので触れてみてください。

See the Pen Tailwind CSSのpeerでTooltip by AyumuSaito (@ayumusaito-excite) on CodePen.

<div class="relative">
  <button class="peer ..." type="button" aria-describedby="tooltip">...</button>
  
  <div class="absolute opacity-0 peer-hover:opacity-100 ..." id="tooltip" role="tooltip">...</div>
</div>