tailwindで親要素にhoverしたとき、子要素でactionさせたい

2021年06月13日2021年06月13日

HTML&CSSでよくある、ホバーしたときにアイコン(子要素)だけアクションさせたいとき問題。
CSSならこんな感じでできるけど、tailwindならどうするのだろうか。

.parent:hover .child {
  transform: translate(-50%, 30%);
}


group-hoverを使う

親要素のclassにgroup、子要素のclassにgroup-hoverを追加することで実現できます。
ドキュメントを読まずに実装しようとして、これに2時間費やしました。
はい、ポンコツです。

<div class="group">
  <p class="">ここは動かない</p>
  <p class="group-hover:translate-x-1 transform">ここは動く</p>
</div>


ただ、これ1つだけ注意事項があってtailwind.config.jsも追記がいるのです。

module.exports = {
  variants: {
    extend: {
      translate: ['group-hover']
    }
  }
}


できる人は公式ドキュメントに目を通しているよね?
(私は通していなかった。。。)

https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover

同じようにfocusgroup-focusで実装できるよ。

まとめ

hoverして子要素だけ動作をつけたい場合は、group-hover