Arbitrary variants for custom selectors in Tailwind - Browser Rendering Trace

Render Flow - Arbitrary variants for custom selectors

[Parse Tailwind config] -> [Identify arbitrary variant syntax] -> [Generate CSS selector with custom variant] -> [Apply styles to matched elements] -> [Render updated styles in browser]

Tailwind reads the custom variant syntax inside square brackets, converts it into a CSS selector, then applies the styles to elements matching that selector, updating the page visually.

Render Steps - 3 Steps

Code Added:<button class="p-4">Click me <svg></svg></button>

Before

[ ] (empty page)

→

After

[button]
|_ 'Click me '
|_ [svg]

The button with padding appears with text and an SVG inside, but no background color yet.

🔧 Browser Action:Creates DOM nodes and applies default styles

Code Sample

A button with padding that changes background color to light green only if it contains an SVG element.

Tailwind

<button class="[&:has(svg)]:bg-green-200 p-4">Click me <svg></svg></button>

Tailwind

[&:has(svg)]:bg-green-200 { background-color: #bbf7d0; }

Render Quiz - 3 Questions

After applying step 2, what visual change do you see on the button?

A Button padding increases

B Button text color changes to green

C Button background changes to light green because it contains an SVG

D No visual change

Common Confusions - 2 Topics

Why doesn't the background color apply if the button has no SVG?

The custom variant uses :has(svg) which only matches buttons containing an SVG child. Buttons without SVG do not match, so no background color is applied.

💡 Custom variants with :has() only style elements that contain the specified child.

Can I use arbitrary variants with any CSS selector?

Yes, but the selector must be valid CSS and supported by browsers. Tailwind wraps it in square brackets to generate the correct CSS selector.

💡 Use square brackets to write any valid CSS selector as a variant.

Property Reference

Property	Value Applied	Selector Type	Visual Effect	Common Use
Arbitrary variant	[&:has(svg)]	Custom CSS pseudo-class	Applies styles only if element has SVG child	Conditional styling based on child elements
Background color	bg-green-200	CSS background-color	Changes background to light green	Highlight elements meeting condition
Padding	p-4	CSS padding	Adds space inside element	Spacing for clickable areas

Concept Snapshot

Arbitrary variants in Tailwind use square brackets to write custom CSS selectors. Example: [&:has(svg)]:bg-green-200 applies styles only if element contains an SVG. This allows conditional styling based on child elements. Use valid CSS selectors inside brackets. Common for advanced UI states and interactions.