twin.macro を使用して親要素ホバー時に子要素を変化させたい

はじめに

初めてtailwindcssをベースのtwin.macroを使用する案件にて、親要素ホバー時に子要素を変化させる方法がわからなかったので調べて実装した備忘録です。

私が探した時点（2022.08）では、日本語で解説してくれている記事を見つけることができなかったので、参考になれば嬉しいです。

最初に

twin.macroとは？
twin.macroの使用方法は？
等の記事はたくさんありますので、敢えて記述しません。

：参考

注意：tailwindcssにgroupというのがあり、twin.macroのtwの記述ではなく、classNameにgroupを追記すれば、子要素を操作することも可能です。

今回は、classにはCSS関係の記述はしない方針の案件でしたので、別の方法を探した経緯があります。

結論

twin.macroには便利なcssプロパティというものがあります。
そちらを使用すると、SCSS的な記述ができるようでした！

index.ts

export default function SignoutButton() {
  return (
    <button
      onClick={() => { 何かの処理 }}
      tw="text-gray-500 hover:(text-green-800)"
      css={[
        css`
          &:hover {
            > span {
              font-weight: bold;
            }
          }
        `,
      ]}
    >
      <span
        tw="font-normal text-center mt-1.5"
      >
        サインアウト
      </span>
    </button>
  )
}

cssプロパティーは

css={[
        css`
          cssを書ける          
        `,
      ]}

のような形で、tailwindcssでは足りない細かな設定をする際にcssを記述することができます。
そこは、SCSS記法での記述できるということが分かりました！

css={[
        css`
          &:hover {
           ホバーした際の処理を記述
          }
        `,
      ]}

上記でホバー時の記述が書けます。
そこで、SCSSを使用し、子要素を指定し、子要素に対するCSSを書く感じです。

 css={[
        css`
          &:hover {
            > span {
              font-weight: bold;
            }
          }
        `,
      ]}

上記の意味はbutton要素がホバー時にbutton要素直下にある子要素spanに対してフォントをボールドにさせる

という意味になります！

ちなみに、cssプロパティーには擬似要素の記述のできます。

   <div
    tw="relative"
    css={[
      css`
        &::after {
          content: '';
          display: inline-block;
          background-color: #fff;
          width: 28px;
          height: 5px;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
        }
      `,
    ]}
  >

以上です。