【Tailwind CSS】他要素の状態によってスタイリングを制御する方法

解決前状態

緑の四角がホバーされた時、鉛筆マークの色を青色にしたい場合

<div className="relative flex items-center w-80 h-80 bg-green1 rounded-3xl ml-10 mb-10">
      <p className=" text-white text-xs mx-5 break-words line-clamp-4">
        testTask
      </p>
      <Edit2
        onClick={() => editTaskModalState()
        }
       // 親要素がホバーされた時、文字色を青色にしたい
        className="w-13 h-13 absolute bottom-5 right-5 text-white hover:text-blue1"
      />
    </div>

鉛筆マークにホバーした時のみ、スタイルが適用されてしまっています。

親要素がホバーされた時、鉛筆マークを青色にする必要がありますね。

その場合、どのようにホバーの監視対象を親要素に追加すれば良いのでしょうか？

group を使った解決方法

group クラスを指定することで、親要素をホバーの監視対象に入れることができます。

// classNameにgroupを指定することで監視対象を親にも設定する
<div className="relative group flex items-center w-80 h-80 bg-green1 rounded-3xl ml-10 mb-10">
      <p className=" text-white text-xs mx-5 break-words line-clamp-4">
        testTask
      </p>
      <Edit2
        onClick={() =>　editTaskModalState()
        }
        // group-hoverとすることで、groupで監視されている要素がホバーされた際に発火
        className="w-13 h-13 absolute bottom-5 right-5 text-white invisible group-hover:visible"
      />
    </div>

親要素に group クラスを指定することで、親要素のホバー状態を鉛筆要素にも適用することができました。

ネストした group など、詳しくはTailwind CSS 公式ドキュメントにて。