State Variants: Hover, Focus, Active, Disabled & Group-Hover0%
Class-Based Dark Mode Setup with System Preference Support

State Variants: Hover, Focus, Active, Disabled & Group-Hover

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

State Variants: Hover, Focus, Active, Disabled & Group-Hover

Dynamic web applications require rich visual feedback when users interact with elements. Tailwind CSS handles pseudo-classes—such as :hover, :focus, :active, :disabled, and :focus-visible—using prefix modifiers. Furthermore, features like group-hover and peer-focus enable complex parent-child and sibling interaction patterns.

1. Core State Modifiers

HTML
<!-- Interactive Button with Hover, Focus & Active States -->
<button class="
px-5 py-2.5 rounded-xl font-bold text-white
bg-blue-600 hover:bg-blue-700
focus:outline-none focus:ring-4 focus:ring-blue-300
active:scale-95 transition-all
disabled:opacity-50 disabled:cursor-not-allowed
">
Submit Application
</button>
  • hover:: Triggered when mouse cursor hovers over the element.
  • focus: / focus-visible:: Triggered when element receives keyboard or click focus.
  • active:: Triggered when mouse is clicked down on the element.
  • disabled:: Triggered when button/input has disabled attribute.

2. Parent-Triggered Interactions with group-hover

Often, you want hovering over an entire card to animate an internal icon or change title colors. Mark the parent with group and the child with group-hover::

HTML
<!-- Course Card with group-hover -->
<div class="group p-6 bg-white rounded-2xl border border-slate-200 hover:border-blue-500 hover:shadow-xl transition-all cursor-pointer">
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-blue-600 bg-blue-50 px-2.5 py-1 rounded-md">New</span>
<!-- Arrow slides to the right when parent CARD is hovered! -->
<svg class="w-5 h-5 text-slate-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
</svg>
</div>
<h3 class="mt-4 text-lg font-bold text-slate-900 group-hover:text-blue-600 transition-colors">
Full-Stack MERN Mastery
</h3>
</div>

3. Sibling-Triggered Interactions with peer

To style an element based on the state of a sibling element (e.g., floating form labels), mark the input with peer and sibling with peer-focus::

HTML
<div class="relative">
<input type="email" id="email" placeholder=" "
class="peer w-full px-4 py-3 border rounded-xl focus:border-blue-600 focus:outline-none" />
<label for="email"
class="absolute left-4 top-3 text-slate-400 pointer-events-none transition-all
peer-placeholder-shown:top-3 peer-placeholder-shown:text-base
peer-focus:-top-2.5 peer-focus:text-xs peer-focus:text-blue-600 peer-focus:bg-white peer-focus:px-1">
Email Address
</label>
</div>
Interactive Quiz

Multiple Choice Questions

Question 1
In Tailwind CSS, how do you style a child icon to rotate 45 degrees whenever its parent card container is hovered?
Question 2
Which modifier ensures focus outline rings only appear when navigating via keyboard (avoiding ugly rings on mouse clicks)?
Question 3
How do you disable mouse events and reduce opacity on a disabled button in Tailwind?
Question 4
What does the peer modifier allow developers to accomplish?
Question 5
What is the effect of active:scale-95 on a button?
Next Lesson

Class-Based Dark Mode Setup with System Preference Support

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Positioning, Z-Index, Floats, Overflows & Aspect Ratio UtilitiesClass-Based Dark Mode Setup with System Preference Support

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext