Skip to content
Learn Netverks

Lesson

Step 20/32 63% through track

state-variants

State variants (hover, focus, active)

Last reviewed Jun 1, 2026 Content v20260601
Track mode
iframe_html
Means
HTML preview sandbox
Reading
~1 min
Level
intermediate

This lesson

This lesson teaches State variants (hover, focus, active)—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply State variants (hover, focus, active) in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain State variants (hover, focus, active) in your own words.

Prefix utilities with interaction states: hover:bg-indigo-700, active:scale-95, disabled:opacity-50, group-hover:text-indigo-600. Tailwind generates pseudo-class rules so you avoid handwritten :hover blocks.

Group and peer patterns

  • group on parent + group-hover: on child — card lifts when anywhere on card is hovered
  • peer on input + peer-invalid: on error text — sibling styling without JS

See also Utility CSS state variants for the underlying CSS concept.

Important interview questions and answers

  1. Q: How does group-hover work?
    A: Parent gets group; children use group-hover: utilities that activate when the parent matches :hover.
  2. Q: Why not inline onmouseover?
    A: Variant utilities keep behavior in CSS, respect design tokens, and avoid mixing JS presentation hacks.

Self-check

  1. When would you use peer over group?
  2. Name two state prefixes besides hover.

Challenge

Hover and active

  1. Add hover:bg-indigo-700 active:scale-95 to a button.
  2. Tab to it and confirm focus-visible styles still show.

Done when: hover, active, and keyboard focus are all distinguishable.

Interview tip Lesson completion confidence

Can you explain this lesson in 30 seconds without reading notes?

Not saved yet.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Check yourself

Multiple choice — immediate feedback.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

  • Which pseudo-class variant was new to you?
  • Did hover styles work with keyboard focus too?

Sign up or log in to post comments and sync lesson progress across devices.

No discussion yet. Be the first to ask a question.

Jump

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32