Tailwind CSS interview question · Most asked
How do variants like hover:, focus-visible:, group- and peer- work?
Summary
Variants apply a utility only in a state: hover:bg-sky-600. group marks a parent so children react to its state (group-hover:); peer marks an element so later siblings react to it (peer-checked:, peer-invalid:). has-* styles a parent based on its children. Variants stack: md:hover:bg-sky-600.
Longer Answer
Use focus-visible: for keyboard focus rings; aria-* and data-* variants style from ARIA and data attributes.
Key Points
- State variants.
- group for parents.
- peer for siblings.
- has for children; variants stack.
Deep dive: Tailwind CSS Tutorial: Group, Peer and Has
Explanation
What interviewers look for
group vs peer explained correctly.
More most-asked Tailwind CSS questions
- How do you customize Tailwind's design tokens in v4?
- Why doesn't className={`bg-${color}-500`} work, and what should you do instead?
- Explain Tailwind's responsive design approach.
- How does Tailwind decide which CSS to generate?
- What is Tailwind CSS and what does 'utility-first' mean?
- What changed in Tailwind CSS v4 compared with v3?
- How do you make Tailwind interfaces accessible?
- What's the difference between flex and grid in Tailwind, and when do you use each?