Tailwind CSS·Tailwind from utilities to design system

States and variants

Style hover, focus, active, disabled and group states without extra CSS.

Intermediate 12 min read Lesson 7 of 300 Challenge included

What you will be able to do

Use hover: for pointer feedback.
Use focus-visible: for keyboard focus.
Use active: for press feedback.
Use group and peer for parent or sibling state.

In plain English

Variants encode state: hover:, focus-visible:, active:, disabled: and group-hover:. They keep interaction styling next to the component, which makes states harder to forget and easier to audit.

states.htmlHTML

<button class="rounded-md bg-cyan-600 px-4 py-2 font-medium text-white transition hover:bg-cyan-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50" type="button">Save</button>

Your turn

Add a group hover

Medium

Make a card darken its heading when the card is hovered.

HTML · starter

<article class=""><h2 class="">Title</h2></article>

Check your understanding before moving on.

Knowledge checkQuestion 1

Which variant targets keyboard focus without a ring on mouse clicks?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Extract components

Lesson 7 of 300 · 0% of course