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.