Hover, Focus & State Modifiers
Style element states effortlessly using variant prefixes for hover, focus, active, disabled, group-hover, and sibling peer states.
1. Standard State Modifiers
| Modifier Prefix | Trigger Event | Example Utility |
|---|---|---|
hover: | Mouse cursor enters element | hover:bg-blue-600 |
focus: | Element receives keyboard/click focus | focus:ring-2 focus:ring-indigo-500 |
active: | Element is being pressed/clicked down | active:scale-95 |
disabled: | Form control has disabled attribute | disabled:opacity-50 disabled:cursor-not-allowed |
2. Group Hover (`group` & `group-hover:*`)
Style a child element when hovering anywhere over its parent element by marking the parent with group and the child with group-hover:{utility}:
Live Interactive Demo (Hover over card below):
Interactive Group Card
When you hover over this card parent, both text color and arrow icon react simultaneously!
Read More→
HTML Code:
<div className="group bg-white hover:bg-indigo-600 p-6 rounded-xl border"> <h5 className="text-gray-800 group-hover:text-white">Group Card Title</h5> <p className="text-gray-500 group-hover:text-indigo-100">Body text...</p> <span className="transform group-hover:translate-x-2 transition-transform">→</span> </div>
3. Peer State Modifiers (`peer` & `peer-checked:*`)
Style a sibling element based on the state of a sibling control (e.g. checkbox or radio button):
Next Up
Learn styling text inputs, textareas, checkboxes, select dropdowns, and custom form controls.
Next Lesson: Form Controls & Inputs →
