選択中の親要素のスタイルを指定するfocus-withinの使い方【React✖️Tailwindcss】

:focus-withinとは

:focus-within は CSS の擬似クラスで、その要素または子孫要素にフォーカスがある場合に一致します。言い換えれば、それ自身が :focus 擬似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。

やりたいこと

初めは背景グレーで、フォーカス中は背景を白にしたい。

実装

親要素のformタグにfocus-within:を追加

const SearchBar = () => {
  return(
+   <form className="flex box px-2 w-1/2 rounded-md mx-auto bg-slate-100 focus-within:bg-white focus-within:shadow-sm focus-within:shadow-gray-400">
      <button className="m-1 p-2 hover:bg-slate-200 rounded-full" ><AiOutlineSearch  size='1.3rem'/></button>
      <input type="text" placeholder="検索" className=" w-full mx-1 "/>
      <button className="m-1 p-2 hover:bg-slate-200 rounded-full "><GrClose size='1rem'/></button>
    </form>
  );

参考記事

https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within