Tailwind CSSで親・兄弟要素に反応するスタイリングを実現する

WEB制作
Tailwind CSSで親・兄弟要素に反応するスタイリングを実現する

こんにちは。小野です。
弊社のプロジェクトでも触れる機会の多いTailwind CSS。

今回は親・兄弟要素に反応したスタイリングについて備忘録を兼ねて書いていきます。
比較的新しい要素もあります。（2023年4月時点）

目次

Tailwind CSSについて

Tailwind CSSはユーティリティファーストのCSSフレームワークで、簡単かつ迅速にデザインを実現します。
当スタッフブログでも何度か紹介されています。
よかったら見てみてください。

サイト内検索

groupを使った親要素に反応するスタイリング

groupを使うことで、親要素に反応して子要素のスタイルを変更することができます。

<div class="group">
  <!-- 親要素がホバーされたとき -->
  <p class="text-gray-900 group-hover:text-blue-500">
      Hello, World!
    </p>

  <!-- 親要素がフォーカスされたとき -->
  <input class="border-gray-300 group-focus:border-blue-500" type="text">
</div>

peerを使った兄弟要素に反応するスタイリング

兄弟要素の場合はpeerを使用します。

<label class="flex items-center">
  <input class="peer" type="checkbox">

  <span class="ml-2 text-gray-700 peer-checked:text-blue-500">
    同意しました
  </span>
</label>

複数のgroupとpeerも設定可（v3.2以降）

groupをネストさせたいときは/の後にgroup名やpeer名を記述することで、共存させることができます。

<div class="group/sidebar bg-pink-300">
  <p>sidebar</p>
  <div class="group/navitem bg-green-300">
    <p>navitem</p>
    <p class="opacity-50 bg-purple-300 group-hover/sidebar:opacity-100 group-hover/navitem:text-green-300">
      hoge
    </a>
  </div>
</div>

See the Pen TailwindCSS group DEMO by Hirofumi Ono (@onow) on CodePen.

動的なバリアントにも対応（v3.2以降）

親要素に動的にクラスが付与されたときなんかはこんな感じで。

<div class="group is-active">
  <div class="hidden group-[.is-active]:block">
    Active!!
  </div>
</div>

最後に

最近まで書き方を知らなかったので個別にクラスを作ったりしていました。
公式のドキュメントを改めてみるとかなり充実してきているみたいですね。