Peer modifier (sibling state reaction) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to change the text color of the sibling <p> when the checkbox is checked.

Tailwind

<input type="checkbox" id="toggle" class="peer" />
<p class="[1]">This text changes color when checkbox is checked.</p>

Drag options to blanks, or click blank then click option'

Ahover:text-blue-500

Bchecked:text-blue-500

Cfocus:text-blue-500

Dpeer-checked:text-blue-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using checked: instead of peer-checked:

Forgetting to add the peer class to the checkbox

The peer-checked: modifier applies styles to siblings when the peer element (checkbox) is checked.

2fill in blank

medium

Complete the code to make the sibling <div> visible only when the checkbox is checked.

Tailwind

<input type="checkbox" id="show" class="peer" />
<div class="hidden [1]">Visible when checked</div>

Drag options to blanks, or click blank then click option'

Apeer-hover:block

Bchecked:block

Cpeer-checked:block

Dfocus:block

Attempts:

3 left

💡 Hint

Common Mistakes

Using checked:block which does not affect siblings

Not setting the initial state to hidden

The peer-checked:block class makes the sibling div display as block when the checkbox is checked.

3fill in blank

hard

Fix the error in the code to change the sibling <span> text to red when the checkbox is checked.

Tailwind

<input type="checkbox" id="check" class="peer" />
<span class="[1]">Change my color</span>

Drag options to blanks, or click blank then click option'

Apeer-checked:text-red-600

Bfocus:text-red-600

Chover:text-red-600

Dchecked:text-red-600

Attempts:

3 left

💡 Hint

Common Mistakes

Using checked: which does not affect siblings

Using hover: or focus: which are unrelated here

Only peer-checked: applies styles to sibling elements based on the peer's checked state.

4fill in blank

hard

Fill both blanks to make the sibling <div> background green and text white when the checkbox is checked.

Tailwind

<input type="checkbox" id="bg-toggle" class="peer" />
<div class="[1] [2]">Styled on check</div>

Drag options to blanks, or click blank then click option'

Apeer-checked:bg-green-500

Bbg-gray-200

Cpeer-checked:text-white

Dtext-black

Attempts:

3 left

💡 Hint

Common Mistakes

Using checked: instead of peer-checked:

Forgetting to style both background and text color

peer-checked:bg-green-500 changes background and peer-checked:text-white changes text color when checkbox is checked.

5fill in blank

hard

Fill all three blanks to make the sibling <button> scale up, change background, and show shadow when the checkbox is checked.

Tailwind

<input type="checkbox" id="scale-toggle" class="peer" />
<button class="transform transition [1] [2] [3]">Hover me</button>

Drag options to blanks, or click blank then click option'

Apeer-checked:scale-110

Bpeer-checked:bg-purple-600

Cpeer-checked:shadow-lg

Dhover:scale-110

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover: instead of peer-checked:

Missing transform class which is needed for scaling

Using peer-checked: modifiers applies scale, background color, and shadow to the button when the checkbox is checked.