Arbitrary variants for custom selectors in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an arbitrary variant in Tailwind CSS?

An arbitrary variant lets you create custom CSS selectors inside square brackets to apply styles conditionally, beyond the built-in variants like hover or focus.

intermediate

How do you write an arbitrary variant for a custom selector in Tailwind?

You write it inside square brackets before a colon, like [&:has(input:checked)]:bg-green-500, which applies the style when the custom selector matches.

intermediate

Why use arbitrary variants instead of regular classes?

They let you target complex or dynamic states in CSS that Tailwind's default variants don't cover, like parent selectors or custom pseudo-classes.

intermediate

Example: What does [&:has(input:checked)]:bg-blue-200 do?

It applies a blue background to the element only if it contains an input element that is checked, using the CSS :has() selector inside an arbitrary variant.

advanced

Can arbitrary variants be combined with responsive prefixes in Tailwind?

Yes! You can combine them like md:[&:hover]:text-red-500 to apply styles on hover but only on medium screens and up.

How do you start writing an arbitrary variant in Tailwind CSS?

A With curly braces {} inside a class

B With parentheses () after a class

C With square brackets [] before a colon

D With angle brackets <> around a selector

Arbitrary variants use square brackets before a colon, like [&:hover]:bg-red-500.

Which CSS selector can you use inside an arbitrary variant to style a parent based on a child state?

A :has()

B :hover

C :focus

D :active

The :has() selector lets you select a parent based on child elements, useful inside arbitrary variants.

What does sm:[&:focus-visible]:outline-none do?

A Removes outline on hover for all screens

B Adds outline on focus-visible for small screens only

C Adds outline on focus for all screens

D Removes outline on focus-visible for small screens and up

The sm: prefix applies styles on small screens and larger, combined with the arbitrary variant [&:focus-visible].

Can arbitrary variants target pseudo-elements like ::before or ::after?

A No, Tailwind does not support pseudo-elements

B Yes, by writing them inside square brackets

C Only with JavaScript

D Only with inline styles

You can target pseudo-elements inside arbitrary variants, for example [&::before]:content-['Hello'].

Which of these is a valid arbitrary variant syntax?

A [&:hover]:text-green-600

B (hover):text-green-600

C {hover}:text-green-600

D <hover>:text-green-600

Only square brackets are valid for arbitrary variants in Tailwind.

Explain how arbitrary variants in Tailwind CSS help you style elements with custom selectors.

Think about how you can write selectors that Tailwind does not provide by default.

Describe a real-life scenario where you would use an arbitrary variant with a custom selector in Tailwind.

Consider a form with checkboxes that change the container style.

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