Tailwind CSSのgroup-hover完全解説｜ネスト（入れ子）する方法も紹介

Tailwind CSSの group-hover は、親要素にマウスを乗せたときに子要素のスタイルを変えられる便利な機能です。ですが、いざ使おうとすると「group-hoverが効かない」「group が複数あるときにうまく出し分けられない」とつまずくことはありませんか？

この記事では、group / group-hover の基本的な使い方から、groupを入れ子（ネスト）にして複数のgroupを名前付きで管理する方法（group/card）まで、実際に動くコードと一緒に解説します。

例として、最終的に以下のようなUIを作ります。

Tailwind CSSとは

Tailwind CSSは、CSSフレームワークの1つです。定義済みのクラスをHTML要素に追加するだけで、統一感のあるデザインを実装できます。もちろんレスポンシブデザインにも対応しています。

文字色・背景色・文字サイズ・マージン・パディングなど、基本的なスタイルを表すクラスが豊富に用意されています。さらに、バリアント修飾子を使うことで、状態に応じたスタイルも設定できます。今回扱う group-hover も、このバリアント修飾子の1つです。

公式サイト: https://tailwindcss.com/

Tailwind CSSのgroupとは？group-hoverとは？

まず基本からおさえましょう。

通常の hover: は「その要素自身にマウスを乗せたとき」のスタイルを指定します。たとえば hover:text-blue-500 は、その要素にホバーしたときに文字が青くなります。

一方 group と group-hover は、「親要素にマウスを乗せたときに、子要素のスタイルを変える」ための仕組みです。使い方は2ステップです。

• スタイルの起点にしたい親要素に group クラスを付ける
• 変化させたい子要素に group-hover:〇〇 を付ける

group-hoverの基本的な使い方

もっともシンプルな例がこちらです。

<div class="group p-6 bg-white rounded-sm border">
  <p class="font-bold">カードのタイトル</p>
  <p class="text-slate-400 group-hover:text-blue-500">
    カードにマウスを乗せると、この文字の色が変わります
  </p>
</div>

親の div に group を付け、子の p に group-hover:text-blue-500 を付けています。これで「カード全体にホバーすると、中の文字色が変わる」という動きになります。子要素自身にホバーしなくてもよいのがポイントです。

groupを入れ子（ネスト）にしたい場合

基本が分かったところで本題です。group が1つだけなら上記で十分ですが、group の中にさらに group があるケースでは困ったことが起きます。

ただ group-hover: と書くと、Tailwindは「一番近い親のgroup」を見てしまい、「外側のカードにホバーしたとき」と「内側の要素にホバーしたとき」を区別できません。そこで使うのが名前付きgroupです。

名前付きgroupは、group/card のように group に名前を付け、group-hover/card:〇〇 のように名前を指定して参照します。実際のコードがこちらです。

<div class="space-y-2 p-8">
  <div class="bg-white shadow-sm rounded-sm border border-slate-200 p-4 group/card">
    <div class="flex gap-2">
      <div>タスク1</div>
      <div class="group/actions">
        <a
          href="#"
          class="opacity-0 text-slate-500 group-hover/card:opacity-75 group-hover/actions:text-indigo-700 group-hover/actions:underline">
          編集する
        </a>
      </div>
    </div>
  </div>
  <div class="bg-white shadow-sm rounded-sm border border-slate-200 p-4 group/card">
    <div class="flex gap-2">
      <div>タスク2</div>
      <div class="group/actions">
        <a
          href="#"
          class="opacity-0 text-slate-500 group-hover/card:opacity-75 group-hover/actions:text-indigo-700 group-hover/actions:underline">
          編集する
        </a>
      </div>
    </div>
  </div>
</div>

ポイントは次のクラスです。

• group/card … カード全体を「card」という名前のgroupにする
• group/actions … 編集リンク周りを「actions」という名前のgroupにする
• group-hover/card:opacity-75 … 「card」にホバーしたとき不透明度を変える
• group-hover/actions:text-indigo-700 … 「actions」にホバーしたとき色を変える
• group-hover/actions:underline … 「actions」にホバーしたとき下線を付ける

このコードでは、次の2つの動きを名前で区別して実現しています。

• cardがhoverされている時 … 編集するが表示される（薄く浮かび上がる）
• actionsがhoverされている時 … 編集するに下線が付いて色が変わる

名前付きgroupは、いくつでも自由に名前を付けられ、設定ファイルへの登録も不要です。マークアップ上で名前を書くだけでTailwindが自動でCSSを生成してくれます。

補足：対応バージョンと公式サンプル

名前付きgroup（group/card のような書き方）は Tailwind CSS v3.2 で追加された機能で、最新のv4でも引き続き利用できます。以下は公式ドキュメントの「Differentiating nested groups」で紹介されているサンプルコードです。

<ul role="list">
  <li class="group/item ...">
    <!-- ... -->
    <a class="group/edit invisible group-hover/item:visible ..." href="tel:...">
      <span class="group-hover/edit:text-gray-700 ...">Call</span>
      <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500 ...">
        <!-- ... -->
      </svg>
    </a>
  </li>
</ul>

この例では、外側のリスト項目を group/item、内側の編集リンクを group/edit と名付けています。group-hover/item:visible で「項目にホバーすると編集リンクが現れる」、group-hover/edit:〇〇 で「編集リンク自体にホバーしたときの見た目」を、名前で区別して指定しています。

公式ドキュメント: Differentiating nested groups – Tailwind CSS

よくある質問（FAQ）

group-hoverが効かない

多くの場合、親要素に group クラスを付け忘れているのが原因です。group-hover: は「group が付いた親」とセットで初めて動きます。子要素にだけ group-hover: を付けても効きません。まずは親に group（または group/名前）が付いているか確認しましょう。

group-hoverとpeerの違いは？

どちらも「他の要素の状態でスタイルを変える」仕組みですが、対象の関係が違います。

• group … 親要素の状態を見て、子要素のスタイルを変える
• peer … 兄弟要素の状態を見て、別の兄弟要素のスタイルを変える（例: チェックボックスとラベル）

「親→子」なら group、「隣同士」なら peer、と覚えておくと迷いません。

groupを複数使いたい

この記事で解説した名前付きgroup（group/card と group-hover/card:〇〇）を使えば、1つの画面でいくつでもgroupを使い分けられます。入れ子になっていても、名前で参照先を指定できるので混ざりません。

group-hoverでhidden（非表示）を表示したい

「普段は隠しておいて、親にホバーしたときだけ表示する」もよく使うパターンです。hidden で隠し、group-hover:block で表示に切り替えます。

<div class="group">
  <div class="hidden group-hover:block">
    表示
  </div>
</div>

逆に「普段は表示、ホバーで隠す」なら block group-hover:hidden のように組み合わせます。

まとめ

Tailwind CSSの group-hover について、基本から入れ子（ネスト）まで解説しました。

• group を親に、group-hover: を子に付けると、親のホバーで子のスタイルを変えられる
• group が入れ子になるときは 名前付きgroup（group/名前）で参照先を区別する
• 名前付きgroupは Tailwind v3.2 以降（v4でも有効）で、設定不要で使える

用意されたクラスやバリアント修飾子を組み合わせるだけで、自分でCSSを書かなくても多くのデザインに対応できます。一度どんなものか触ってみたい場合は、ブラウザ上で動作する Tailwind Play で気軽に試せます。

Tailwind CSS をこれから導入する方は、RailsにTailwind CSS v4を導入する方法もあわせてご覧ください。

スポンサーリンク