Core Concepts
Group and Peer
Sometimes you need to style a child when a parent is hovered, or a label when a sibling input is focused. That is what group and peer are for.
group — react to a parent
Add the class "group" to a parent. Children can then use group-hover:, group-focus: etc. to respond when the parent is in that state.
Example
<a href="#" class="group block max-w-xs p-5 bg-white rounded-xl border border-gray-200 hover:border-sky-400 transition">
<h3 class="font-bold text-gray-900 group-hover:text-sky-600">Data Analytics Intern</h3>
<span class="text-sky-500 group-hover:translate-x-1 inline-block transition">Read more →</span>
</a>peer — react to a sibling
Add the class "peer" to an element; a later sibling can use peer-focus:, peer-checked: etc. Great for floating labels and custom checkboxes.
Example
<div>
<input class="peer border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Email">
<p class="mt-1 text-sm text-sky-600 invisible peer-focus:visible">We will never share your email.</p>
</div>⚠️
peer only works on LATER siblings (the peer must come before the elements that react to it in the HTML).