Arbitrary variants for custom selectors in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Using an arbitrary variant to style a child element

Given the following HTML, which Tailwind class will correctly apply a red text color to the only when its parent

is hovered?

Tailwind

<div class="group">
  <span>Hover me</span>
</div>

A hover:[&>span]:text-red-500

B [&>span]:group-hover:text-red-500

C group-hover:[&>span]:text-red-500

D group-hover:text-red-500 [&>span]

💡 Hint

Think about how to combine group-hover with an arbitrary variant targeting the direct child span.

Option C uses group-hover as the variant and applies the arbitrary selector [&>span] to target the direct child span. This means when the parent div with class group is hovered, the span inside gets the red text color.

Other options either misuse the order or the selector syntax.

❓ layout

intermediate

Applying styles to sibling elements using arbitrary variants

Which Tailwind class applies a blue background to a

element only when the preceding

sibling is focused?

Tailwind

<h2 tabindex="0">Title</h2>
<p>Paragraph</p>

A focus:[&+p]:bg-blue-500

B [&:focus+p]:bg-blue-500

C [&+p:focus]:bg-blue-500

D [&:focus~p]:bg-blue-500

💡 Hint

Use the adjacent sibling combinator (+) with focus on the

.

Option B correctly uses the arbitrary variant [&:focus+p] to target the

that is immediately after the focused element (the

).

Option B incorrectly places focus: before the arbitrary variant, which does not work as intended. Option B targets the wrong element and option B uses the general sibling combinator (~) which is not the immediate sibling.

🧠 Conceptual

advanced

Understanding arbitrary variant specificity

What is the effect of the Tailwind class [&:not(:last-child)]:mb-4 on a list of

elements?

A Adds a bottom margin of 1rem to all <li> elements including the last one.

B Adds a bottom margin of 1rem only to the last <li> element.

C Removes bottom margin from all <li> elements.

D Adds a bottom margin of 1rem to all <li> elements except the last one.

💡 Hint

The :not(:last-child) selector excludes the last child from styling.

The arbitrary variant [&:not(:last-child)] applies styles to all elements except the last child. So mb-4 (margin-bottom 1rem) is added to every

except the last one, creating spacing between items but no extra space after the last.

❓ accessibility

advanced

Using arbitrary variants for focus-visible styling

Which Tailwind class correctly applies a visible outline only when a button receives keyboard focus (focus-visible)?

Tailwind

<button>Click me</button>

A focus-visible:outline-2 focus-visible:outline-blue-500

B [&:focus-visible]:outline-2 [&:focus-visible]:outline-blue-500

C [&:focus]:outline-2 [&:focus]:outline-blue-500

D focus:outline-2 focus:outline-blue-500

💡 Hint

Tailwind supports focus-visible as a variant without needing arbitrary selectors.

Option A uses the built-in focus-visible variant correctly to apply an outline only when the button is focused via keyboard (not mouse). This improves accessibility by showing focus only when needed.

Option A tries to use arbitrary variants unnecessarily. Option A and D use focus which triggers on mouse focus too, not just keyboard.

📝 Syntax

expert

Identifying the correct syntax for nested arbitrary variants

Which Tailwind class correctly applies a green text color to all

elements inside a

only when the
is hovered?

Tailwind

<ul class="hover:[&>li]:text-green-500">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

A [&:hover>li]:text-green-500

B hover:[&>li]:text-green-500

C [&>li:hover]:text-green-500

D hover:[&:hover>li]:text-green-500

💡 Hint

The arbitrary variant should wrap the hover state on the parent and target the children.

Option A uses the arbitrary variant [&:hover>li] which means when the element itself is hovered, target its direct li children. This correctly applies the green text color to all li inside the hovered ul.

Option A tries to combine hover variant with arbitrary variant incorrectly. Option A applies hover on li instead of ul. Option A nests hover twice incorrectly.

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