こんにちは、Morimotoです。

弊社ではコーディングのスタイリングでTailwindCSSを使っています。

それぞれのタグでクラス名を考える必要が無かったり、クラス名の付け方が人によって違うこともなく、統一された方法でスタイリングされるので保守性高くコーディングすることが出来ます。

そんな便利なTailwindCSSですが、まだまだ知らないことが多く、「奥が深いなあ」と感じることもあります。

今回は、その中でも特に便利だと感じた「親要素のホバー時に子要素のスタイルを変更する方法」について紹介したいと思います。

通常のCSSであれば、親要素にクラス名を付けて:hover疑似クラスと子要素セレクタを組み合わせて書く必要がありますが、TailwindCSSのgroupクラスを使うことで、より直感的で分かりやすい方法で実装することができます。

実際にコードを見ながら、その使い方を詳しく解説していきます。

親要素のホバー時に子要素のスタイルを変更する方法

ホバー時の挙動をCodePenにて作成したので確認してみましょう。

このように、親要素のdivをホバーすると子要素のpの色が変化します。

具体的な方法は下記の通りです。

1. 親要素（divタグ）にgroupクラスを付与
2. 子要素（pタグ）にgroup-hover:クラスを付与

CodePenのようにpタグの色を変える場合、group-hover:text-blue-500のようなクラスを付ければOKです。

とても簡単ですね！

CSSファイルに追記しなくていいのも助かります。

トランジションを設定したいときはdurationクラスを付けてください。

よくあるボタンのサンプルも作ってみました。

シンプルなボタンであればTailwindCSSのみで十分コーディング出来そうですね。

ボタン以外にも、ここでご紹介した方法を使えばTailwindCSSのみでホバー時のスタイリングが出来ます。

ぜひ日々のコーディングに取り入れてみてください。

それでは。