Tailwind CSSで擬似クラス「:focus-within」をスタイリングする方法

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

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

qiita.com

今回は、Tailwind CSSでCSSの擬似クラス:focus-withinをスタイリングする方法をご紹介します。

「:focus-within」とは

冒頭、CSSの擬似クラス:focus-withinについて整理します。

:focus-withinは、子要素や孫要素にフォーカスが当たっている場合に一致する擬似クラスです。

:focus-withinを使用すると以下のような体験を実現できます。Codepenに触れて、実感してみてください。

See the Pen Untitled by AyumuSaito (@ayumusaito-excite) on CodePen.

<!-- inputタグがフォーカスされている場合にdivタグの背景色が赤くなる -->
<div>
  <label for="...">氏名</label>
  <input type="text" id="..." name="..." />
</div>

div {
  background: #FFFFFF;
  
  /* 子要素のinputタグがフォーカスされている場合に一致して適用される */
  &:focus-within {
    background: #FEE2E2;
  }
}

Tailwind CSSでスタイリングするには

Tailwind CSSでは擬似クラスは、class名に接頭辞をつけることでスタイリングします。

:focus-withinの場合は、接頭辞focus-within:を使用します。

先の例の場合は以下のようになります。

<div class="bg-white focus-within:bg-red-100">
  ...
</div>

さいごに

今回は、Tailwind CSSでCSSの擬似クラス:focus-withinをスタイリングする方法をご紹介しました。

Tailwind CSSを使用される方の一助となれば幸いです。

ご精読ありがとうございました。