Tailwind CSSで親要素や兄弟要素の状態変化を簡単にスタイリングする
こんにちは、 Gaji-Labo 横田です。Tailwind CSS には親要素や兄弟要素の状態をスタイリングしたり制御できるクラスが用意されています。今回はこのクラスを簡単に紹介します。
親要素を制御できる group クラス
親要素に group クラスのマークを付け、子要素に group-* 接頭辞クラスを使用することで親の状態に基づいたスタイリングが可能になります。
以下は公式ドキュメントから引用したコード例です。
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
<div class="flex items-center space-x-3">
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
</div>
<p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>このコード例では、親の a 要素をホバーさせた時に子要素のテキストの色が変化します。
この group-* クラスはすべての擬似要素で使えます。
兄弟要素を制御できる peer クラス
兄要素に peer クラスのマークを付け、弟要素に peer-* 接頭辞クラスを使用することで、兄弟要素のスタイリングを簡単に制御することができます。
以下は公式ドキュメントから引用したコード例です。
<form>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Email</span>
<input type="email" class="peer ..."/>
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
Please provide a valid email address.
</p>
</label>
</form>このコード例では、メールアドレスが invalid だった時に p 要素のアラートテキストを表示します。
この peer-* クラスも peer-required や peer-disabled など、すべての擬似要素で使えます。
チェックボックスやインプットの見た目を変えたい時など peer-* クラスで状態にあわせたスタイリングを簡単に指定できるし、クラス名だけで何をしているか直感的に分かりやすいですね。
入力時にフォームのラベルを上に浮かせるようなインタラクションも、JS なしで peer-placeholder-shown を使って簡単に実装できそうです。
以上、Tailwind CSS で親要素や兄弟要素を制御したい時の参考になれば幸いです。
