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.

Practice

1. What does an arbitrary variant in Tailwind CSS allow you to do?

easy

A. Use custom CSS selectors inside Tailwind classes

B. Write JavaScript code inside Tailwind classes

C. Change Tailwind's default color palette

D. Disable Tailwind's responsive features

Solution

1. Step 1: Understand Tailwind's arbitrary variants

   Arbitrary variants let you write custom CSS selectors inside Tailwind by wrapping them in square brackets.

2. Step 2: Compare options

   Only Use custom CSS selectors inside Tailwind classes correctly describes this feature; others describe unrelated Tailwind features.

3. Final Answer:

   Use custom CSS selectors inside Tailwind classes -> Option A

4. Quick Check:

   Arbitrary variants = custom selectors [OK]

Hint: Look for custom selector usage in square brackets [OK]

Common Mistakes:

• Thinking arbitrary variants change colors
• Confusing with JavaScript or responsive features
• Assuming it disables Tailwind features

2. Which of the following is the correct syntax to apply a hover style using an arbitrary variant in Tailwind?

easy

A. hover:[&:hover]:text-blue-500

B. [&:hover]:text-blue-500

C. hover:text-blue-500

D. [hover]:text-blue-500

Solution

1. Step 1: Understand arbitrary variant syntax

   Arbitrary variants use square brackets with a selector inside, e.g., [&:hover].

2. Step 2: Identify correct usage for hover

   [&:hover]:text-blue-500 uses the correct syntax: [selector]:utility, here [&:hover]:text-blue-500.

3. Final Answer:

   [&:hover]:text-blue-500 -> Option B

4. Quick Check:

   Arbitrary variant syntax = [&:hover]:utility [OK]

Hint: Look for square brackets with & and pseudo-class inside [OK]

Common Mistakes:

• Adding 'hover:' before arbitrary variant
• Using brackets without &
• Misplacing brackets around 'hover'

3. What will be the effect of this Tailwind class on a button element?

<button class="[&:focus-visible]:ring-2 [&:focus-visible]:ring-blue-600">Click me</button>

medium

A. The button never shows a ring

B. The button always has a blue ring

C. The button gets a blue ring when it is focused and visible

D. The button gets a blue ring only on hover

Solution

1. Step 1: Analyze the arbitrary variant selectors

   The class uses [&:focus-visible] which applies styles only when the button is focused and visible.

2. Step 2: Understand the applied styles

   ring-2 and ring-blue-600 add a blue outline ring of thickness 2 on focus-visible state.

3. Final Answer:

   The button gets a blue ring when it is focused and visible -> Option C

4. Quick Check:

   Arbitrary variant with :focus-visible = ring on focus [OK]

Hint: Focus-visible means ring appears only on keyboard focus [OK]

Common Mistakes:

• Thinking ring is always visible
• Confusing focus-visible with hover
• Ignoring the arbitrary variant selector

4. Identify the error in this Tailwind class usage:

<div class="[&hover]:bg-red-500">Alert</div>

medium

A. Incorrect pseudo-class syntax, should be [&:hover]

B. Square brackets should not be used here

C. Missing ampersand (&) before hover

D. bg-red-500 is not a valid Tailwind color

Solution

1. Step 1: Check the arbitrary variant syntax

   The pseudo-class hover must be preceded by a colon and ampersand inside brackets: [&:hover].

2. Step 2: Identify the mistake

   The class uses [&hover] missing the colon, so it is invalid syntax.

3. Final Answer:

   Incorrect pseudo-class syntax, should be [&:hover] -> Option A

4. Quick Check:

   Pseudo-class needs colon after & [OK]

Hint: Pseudo-classes need &: e.g., [&:hover] not [&hover] [OK]

Common Mistakes:

• Omitting colon before pseudo-class
• Using brackets incorrectly
• Assuming bg-red-500 is invalid

5. You want to style a child span inside a div only when the div is hovered, using Tailwind arbitrary variants. Which class should you add to the div?

hard

A. [&>span:hover]:text-green-600

B. [&>span]:hover:text-green-600

C. hover:[&>span]:text-green-600

D. [&:hover>span]:text-green-600

Solution

1. Step 1: Understand the selector goal

   You want to style the span child only when the div is hovered, so the hover is on the parent.

2. Step 2: Choose correct arbitrary variant syntax

   The selector [&:hover>span] means when the div is hovered, style its direct child span.

3. Step 3: Check other options

   [&>span:hover]:text-green-600 styles span on its own hover, not div's hover. hover:[&>span]:text-green-600 and D have incorrect syntax or order.

4. Final Answer:

   [&:hover>span]:text-green-600 -> Option D

5. Quick Check:

   Parent hover affecting child = [&:hover>span] [OK]

Hint: Parent hover affecting child uses [&:hover>child] [OK]

Common Mistakes:

• Applying hover on child instead of parent
• Misplacing brackets or colons
• Using hover: outside arbitrary variant incorrectly