Arbitrary variants for custom selectors in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a red background when a parent has the class dark-mode using an arbitrary variant.

Tailwind

<div class="[1]:bg-red-500 p-4">Hello World</div>

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

Afocus

Bdark

Chover

D[.dark-mode_&]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dark' instead of the full arbitrary variant selector.

Forgetting the ampersand (&) at the end of the selector.

Using the arbitrary variant [.dark-mode_&] applies styles when the parent has the dark-mode class.

2fill in blank

medium

Complete the code to apply a blue text color when a sibling element with class active is present using an arbitrary variant.

Tailwind

<button class="[1]:text-blue-600">Click me</button>

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

A[.active+&]

Bhover

C[&+.active]

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong order of selectors inside the brackets.

Confusing sibling selectors with child selectors.

The arbitrary variant [.active+&] targets the element when it is immediately after a sibling with class active.

3fill in blank

hard

Fix the error in the code to apply a green border when the element is inside a container with class group and hovered, using an arbitrary variant.

Tailwind

<div class="group">
  <button class="[1]:border-green-500 border-2">Submit</button>
</div>

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

A[&:hover.group]

Bgroup-hover

C[.group:hover_&]

D[.group&:hover]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'group-hover' which is a built-in variant but not an arbitrary variant.

Placing the ampersand (&) in the wrong position.

The arbitrary variant [.group:hover_&] correctly targets the element when its parent with class group is hovered.

4fill in blank

hard

Fill both blanks to apply a yellow background when the element is focused and its parent has class form-group.

Tailwind

<input class="[1]:[2]:bg-yellow-300 bg-white p-2" type="text" />

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

A[.form-group_&]

Bfocus

Cbg-yellow-300

Dhover

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of variants.

Using 'hover' instead of 'focus' for the state.

The arbitrary variant [.form-group_&] targets the element inside a parent with class form-group, and focus applies styles on focus.

5fill in blank

hard

Fill all three blanks to apply a purple text color when the element is hovered, and its grandparent has class card, using arbitrary variants.

Tailwind

<p class="[1]:[2]:[3] text-gray-800">Hover me</p>

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

A[.card&]

Bhover

Ctext-purple-600

D[.card_&]

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong selector order inside the arbitrary variant.

Placing the hover state inside the arbitrary variant.

The arbitrary variant [.card_&] targets the element when its grandparent has class card, combined with the hover state and purple text color.