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

2021年06月13日2022年10月12日

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も追記がいるのです。

tailwind.config.js

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

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

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

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

2021年06月13日2022年10月12日