Tailwind CSS 実務テクニック集｜親hoverで子要素を変更するgroup-hoverの使い方

こんにちは、フロントエンドエンジニアのあおきです。

Tailwind CSSには便利なユーティリティクラスが多く用意されています。
実務で使っていると、チートシートにはあまり載っていないものの、知っていると便利な指定方法に出会うこともあります。

この記事では、そんな 実務で役立つTailwindのテクニック をシリーズ形式で紹介していきます。
今回はその第1回として、親要素のhoverをトリガーに子要素のスタイルを変更する group-hoverについて解説します。

この記事でわかること

1. 親要素ホバーで子要素のスタイルを変更する方法
2. Tailwindのgroup と group-hover の仕組み
3. ボタンUIなど実務でよくある実装パターン

例えば次のようなボタンUIを作る場面があります。ボタンにホバーしたときに

・文字色を変更
・矢印アイコンを少し動かす

このようなUIは、コーポレートサイトやLPなどでよく見かけます。Tailwindでは通常、hover: を使うことで簡単にスタイルを変更できます。

hover:bg-red-500
hover:text-white

しかし hover: は その要素自身にしか適用できません。
つまり、親要素をhoverしたときに、子要素のスタイルを変更ということは、そのままではできません。どうすれば実装できるのでしょうか？

Tailwindにはこの問題を解決する仕組みがあります。それがgroupgroup-hoverです。使い方はとてもシンプルです。

親要素に group を付けます。

<a class="group">

子要素に group-hover: を付けます。

group-hover:text-red-500

これで
親要素hover
↓
子要素のスタイル変更が可能になります

2. Tailwindのgroup と group-hover の仕組み

group

class="group"

このクラスを付けることで、「この要素を基準にした hover 状態」を子要素から参照できるようになります。

group-hover

group-hover:text-red-500

これは、親要素が hover のとき、この要素の文字色を変更という意味になります。

3. ボタンUIなど実務でよくある実装パターン

実務ではこの組み合わせがよく使われます。

hover + group-hover

hover:border-red-500
group-hover:text-red-500
group-hover:scale-110

つまり親自身、子要素、両方のアニメーションを同時に制御できます。これで「気持ちいいUI」が作れます。

よくあるUIパターン

親hoverで画像ズーム

group-hover:scale-105

親hoverでアイコン回転

group-hover:rotate-45

親hoverで下線スライド

group-hover:w-full

まとめ

Tailwindで
親hover → 子要素変更
を実現するには次の指定を使います。
親要素group子要素group-hoverシンプルな仕組みですが、実務では次のような場面でよく使われます。

• CTAボタン
• カードUI
• 記事一覧
• リンクアニメーション

覚えておくと、UIのインタラクションを簡単に実装できる便利なテクニックです。