Loading TAILWIND::COSMOS...
“Tailwind variants prefix utility classes with conditions (hover:, focus:, active:, disabled:). The "group" and "peer" classes allow styles to react to parent or sibling state changes purely in CSS without JavaScript event listeners.”
Coordinate child styling based on parent hover (group-*) or sibling input status (peer-*).
<div class="group relative p-6 rounded-2xl bg-slate-900 border border-slate-800 hover:border-cyan-500/50 transition-all cursor-pointer">
<div class="flex items-center justify-between">
<span class="text-sm font-bold text-white group-hover:text-cyan-400 transition-colors">
Interactive Card Title
</span>
<span class="text-slate-500 group-hover:translate-x-1 group-hover:text-cyan-400 transition-transform">
→
</span>
</div>
</div>.group:hover .group-hover\:text-cyan-400 { color: #22d3ee; }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }Mark parent container with "group" class
Target child elements with "group-hover:translate-x-1" or "group-hover:text-cyan-400"
For form inputs: mark input with "peer" class
Style subsequent sibling label with "peer-focus:text-cyan-500" or "peer-invalid:text-rose-500"
Named groups ("group/card" + "group-hover/card:*") allow deeply nested components to trigger independent micro-animations with 0 JS listeners.