Tailwind CSS 40 🎨 Arbitrary Variants and Grouped Variant Syntax ([&:nth-child(3)]:)
Tailwind’s built-in variants — hover:, md:, dark:, group-hover: — cover the common cases. But they cannot cover every case. What if you need to style the third item in a list? What if you need to target a child element that has no class of its own? What if you need to apply a utility only when the browser supports a specific CSS feature? These are the gaps that arbitrary variants fill. They let you write a CSS selector directly inside the class list, using square bracket notation, and combine it with any utility.
The syntax is [&:selector]:utility. The & represents the element the utility is applied to. Everything after the colon is the CSS selector that must match. [&:nth-child(3)]:py-0 means “apply py-0 when this element is the third child of its parent.” [&>*]:text-lg means “apply text-lg to every direct child.” [&.open>*]:rotate-180 means “apply rotate-180 to every direct child when this element has the open class.” The & is the anchor; the selector around it describes the condition.
Tailwind v4 adds a second layer on top of arbitrary variants: grouped variant syntax. In v4, multiple variants can be combined with a shorthand. group-hover: is still valid, but the grouped form group-hover: is now equivalent to group:hover:. This is not just a shortcut — it changes how nested and compound variants are written. The colon-based grouping means group-hover:focus:opacity-100 can be written as group-hover:focus:opacity-100 or even as group:hover:focus:opacity-100, and all three forms produce the same selector.
This chapter covers three areas. First, why arbitrary variants exist — the limitations of built-in variants and the escape hatch they provide. Second, how to write arbitrary variants — the [&...]: syntax, targeting children, targeting the element itself with classes and attributes, and the @supports and @media arbitrary conditions. Third, how grouped variant syntax works in v4 — the colon-based grouping, how it composes with group-* and peer-*, and the difference between stacked variants and grouped variants. The chapter ends with a complete example session, a quick reference, best practices, common pitfalls, real-world examples, and diagrams showing the selector structure of arbitrary variants.
Key point: Arbitrary variants let you write a CSS selector directly in the class list using [&...]:utility syntax. The & is the element the utility targets. Grouped variant syntax in v4 lets you write group-hover:focus: as an equivalent to group:hover:focus:, composing compound conditions without repeating the group- prefix.
Why arbitrary variants exist
The built-in-variant ceiling. Tailwind ships with a fixed set of variants: state variants (hover, focus, active, disabled), structural variants (first, last, odd, even), responsive variants (sm, md, lg), and compound variants (group-hover, peer-focus). These cover the majority of styling needs. But they cannot cover every selector. There is no nth-child(3): variant. There is no [data-state="open"]: variant. There is no :has(> img): variant. When a design requires a selector that Tailwind does not ship, the alternative is to write custom CSS or to use an arbitrary variant. The arbitrary variant is the escape hatch that keeps the styling in the class list .
The external-HTML problem. A common case is styling HTML you cannot change. A third-party component renders <ul><li>...</li></ul> with no classes on the li elements. You cannot add a first: variant because there is no class to add it to. But you can add a class to the ul and use [&>li:first-child]: to target the first li. The arbitrary variant lets you style descendants, siblings, and ancestors without modifying the elements themselves. This is especially useful for markdown content, CMS output, and library components .
The compound-condition problem. Some styling requires multiple conditions to be true at once. An element should be blue when it is both hovered and focused. Tailwind supports this with stacked variants: hover:focus:bg-blue-500. But when the condition involves a parent state, the syntax becomes verbose. group-hover:focus:bg-blue-500 means “when the group is hovered and this element is focused.” In v4, grouped variant syntax lets you write this more naturally: group-hover:focus:bg-blue-500 is interpreted as group:hover:focus:, composing the group state with the element state. The grouping removes the need to repeat the group- prefix for each state .
The @supports and @media escape hatch. Arbitrary variants are not limited to selectors. They can also contain at-rules. [@supports(backdrop-filter:blur(0))]:bg-white/50 applies the background only when the browser supports backdrop blur. [@media(any-hover:hover)]:hover:bg-gray-100 applies the hover style only on devices that support hover. These are conditions that Tailwind’s built-in variants do not expose. The arbitrary variant syntax treats the content of the brackets as the condition, and the utility as the result .
The grouped-variant shorthand. In v4, the colon-based grouping means that group-hover: is no longer the only way to express “when the group is hovered.” You can also write group:hover:. And you can compose: group-hover:focus: is equivalent to group:hover:focus:. The grouping is syntactic sugar, but it changes how compound variants are read. Instead of a chain of prefixed variants, the condition is written as a selector-like sequence. This aligns the class-list syntax more closely with CSS selector syntax, making complex conditions easier to parse .
The trade-off. Arbitrary variants are powerful but not free. They bypass Tailwind’s design system — a [&:nth-child(3)]:py-0 class is not a named utility, and its value is not part of the theme. They can produce selectors that are difficult to read, especially when nested. And they are not discoverable: a developer reading the class list must parse the selector to understand what it does. The trade-off is between the flexibility of raw CSS and the consistency of a constrained utility set. Arbitrary variants should be the exception, not the default .
a. Arbitrary variant syntax
The syntax is [&selector]:utility. The square brackets contain a CSS selector that uses & to represent the element. Everything after the closing bracket and the colon is the utility that applies when the selector matches.
The simplest form targets the element itself with a state that has no built-in variant:
<div class="[&:nth-child(3)]:bg-blue-100">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div> <!-- blue background -->
</div>The [&:nth-child(3)]: variant applies bg-blue-100 to the third child. The & is replaced by the element the class is on — in this case, each div inside the parent. Only the third one matches :nth-child(3) .
The syntax also targets descendants. [&>*]: applies the utility to every direct child:
<div class="[&>*]:text-lg">
<p>This is large</p>
<p>This is also large</p>
</div>The & is the parent div; >* selects its direct children. The utility applies to the children, not the parent. This is useful when the children have no classes of their own .
Attributes and classes can be used in the selector:
<div class="[&.open]:rotate-180">
<span>Chevron</span>
</div>The [&.open]: variant applies when the element itself has the open class. If the parent div has class="open", the rotate-180 applies. If not, it does not .
The selector can be arbitrarily complex. [&>li:first-child]: targets the first li child. [&[data-state="open"]>svg]: targets an svg child when the element has data-state="open". The & is always the anchor, and the rest of the selector describes the relationship .
b. At-rule arbitrary variants
Arbitrary variants can contain at-rules instead of selectors. This is how @supports and custom @media conditions are expressed.
<div class="bg-white [@supports(backdrop-filter:blur(0))]:bg-white/50 backdrop-blur">
Glass effect
</div>The [@supports(backdrop-filter:blur(0))]: variant applies bg-white/50 only when the browser supports backdrop-filter. The base bg-white applies everywhere; the semi-transparent background is the enhancement .
Media queries can be written the same way:
<div class="[@media(any-hover:hover)]:hover:bg-gray-100">
Hover only on devices that support it
</div>The [@media(any-hover:hover)]: variant wraps the utility in a media query that checks for hover capability. This is useful for touch devices, where :hover can stick after a tap .
The content of the brackets is passed through to the generated CSS. Tailwind does not parse it beyond extracting the selector or at-rule. This means any valid CSS selector or at-rule can be used, including pseudo-elements, attribute selectors, and nested at-rules.
c. Grouped variant syntax in v4
In v4, variants can be grouped with colons. The syntax group-hover:focus: is equivalent to group:hover:focus:. The group- prefix is a shorthand for the group class plus the state that follows.
The equivalence is not just syntactic. The grouped form composes the conditions. group-hover:focus:opacity-100 means “apply opacity-100 when the group is hovered and this element is focused.” The group class is on an ancestor; the hover state is on that ancestor; the focus state is on the element itself. The generated selector combines both conditions .
The grouping extends to peer-*:
<input type="checkbox" class="peer" />
<div class="peer-checked:peer-focus:text-blue-500">
Checked and focused
</div>peer-checked:peer-focus: is equivalent to peer:checked:peer:focus:. Both conditions must be true. The grouped form removes the repetition of the peer- prefix .
Arbitrary variants compose with grouped variants:
<div class="group-hover:[&:nth-child(2)]:bg-blue-100">
Second child, when group is hovered
</div>The group-hover: applies the group hover state. The [&:nth-child(2)]: applies the child position condition. Both must match. The grouping is left-to-right: the first condition wraps the second.
The grouped syntax also works with @variant in CSS. The @variant directive accepts comma-separated conditions and colon-stacked variants:
.my-element {
@variant hover, focus {
border: 4px solid black;
}
}This applies the border on hover or focus. The comma is the OR operator; the colon is the AND operator. The syntax mirrors the class-list grouping .
Complete Example Session
<!-- ============================================
PART 1: NTH-CHILD ARBITRARY VARIANT
============================================ -->
<!-- Style the third item in a list. -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="[&:nth-child(3)]:font-bold">Item 3</li>
<li>Item 4</li>
</ul>
<!-- The & is the li element. :nth-child(3) matches
when it is the third child. -->
<!-- ============================================
PART 2: TARGETING CHILDREN
============================================ -->
<!-- Style all direct children without adding
classes to them. -->
<div class="[&>*]:p-4 [&>*]:border-b">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>
<!-- &>* selects every direct child. -->
<!-- ============================================
PART 3: CONDITIONAL ON A CLASS
============================================ -->
<!-- Apply styles when the element has a specific
class, without writing custom CSS. -->
<div class="[&.active]:bg-green-100 [&.active]:text-green-800">
<span>Status</span>
</div>
<!-- When .active is present on the div, the
green styles apply. -->
<!-- ============================================
PART 4: DATA ATTRIBUTE SELECTOR
============================================ -->
<!-- Style based on a data attribute value. -->
<div class="[&[data-state='open']]:rotate-180">
<svg>...</svg>
</div>
<!-- When data-state="open" is on the div,
the svg rotates. -->
<!-- ============================================
PART 5: TARGETING THE FIRST CHILD OF A LIST
============================================ -->
<!-- Remove top margin from the first child only. -->
<div class="[&>li:first-child]:mt-0">
<ul>
<li>First (no margin)</li>
<li>Second (margin)</li>
</ul>
</div>
<!-- &>li:first-child selects the first li child. -->
<!-- ============================================
PART 6: @SUPPORTS ARBITRARY VARIANT
============================================ -->
<!-- Apply styles only when the browser supports
a CSS feature. -->
<div class="bg-white [@supports(backdrop-filter:blur(0))]:bg-white/60 backdrop-blur">
Glass card
</div>
<!-- The semi-transparent background only applies
when backdrop-filter is supported. -->
<!-- ============================================
PART 7: CUSTOM MEDIA QUERY ARBITRARY VARIANT
============================================ -->
<!-- Apply hover styles only on devices that
actually support hover. -->
<button class="[@media(any-hover:hover)]:hover:bg-gray-100">
Hover me
</button>
<!-- On touch devices, the hover style never applies. -->
<!-- ============================================
PART 8: GROUPED VARIANT SYNTAX
============================================ -->
<!-- group-hover:focus: is equivalent to
group:hover:focus:. -->
<div class="group">
<button class="group-hover:focus:ring-2">
Focus me while hovering the group
</button>
</div>
<!-- Both conditions must be true: the group
is hovered, and the button is focused. -->
<!-- ============================================
PART 9: GROUPED ARBITRARY VARIANT
============================================ -->
<!-- Combining grouped variants with arbitrary
variants. -->
<div class="group">
<div class="group-hover:[&:nth-child(2)]:bg-blue-100">
Second child, when group is hovered
</div>
<div>Another child</div>
</div>
<!-- The group must be hovered AND this element
must be the second child. -->
<!-- ============================================
PART 10: THE FULL PATTERN
============================================ -->
<!-- An accordion-style component using arbitrary
variants and grouped syntax. -->
<div class="group border rounded">
<button class="w-full p-4 text-left group-[&[open]]:bg-gray-50">
Toggle
</button>
<div class="hidden group-[&[open]]:block p-4">
Hidden content
</div>
</div>
<!-- group-[&[open]]: is equivalent to
group-[[open]]: — it applies when the group
has the [open] attribute. -->The ten parts show arbitrary variants targeting elements, children, classes, and attributes; at-rule variants for @supports and custom media queries; grouped variant syntax with group-hover: and group-[&...]:; and the combination of grouped and arbitrary conditions.
Quick Reference
Arbitrary Variant Syntax
| Syntax | Meaning |
|---|---|
[&:nth-child(3)]:util | Utility when element is third child |
[&>*]:util | Utility on every direct child |
[&.open]:util | Utility when element has open class |
[&[data-state="open"]]:util | Utility when data attribute matches |
[@supports(prop:val)]:util | Utility when browser supports feature |
[@media(...)]:util | Utility inside custom media query |
Grouped Variant Syntax (v4)
| Grouped form | Equivalent |
|---|---|
group-hover:focus: | group:hover:focus: |
peer-checked:peer-focus: | peer:checked:peer:focus: |
group-[&[open]]: | group-[[open]]: |
Composing Arbitrary and Grouped
| Class | Condition |
|---|---|
group-hover:[&:nth-child(2)]: | Group hovered AND second child |
peer-focus:[&.active]: | Peer focused AND element has .active |
[@supports(...)]:group-hover: | Feature supported AND group hovered |
Best Practices
✅ Do This:
<!-- Use arbitrary variants for selectors Tailwind lacks -->
<li class="[&:nth-child(3)]:font-bold"> <!-- ✅ -->
<!-- Target children without adding classes -->
<div class="[&>*]:p-4"> <!-- ✅ -->
<!-- Use @supports for feature detection -->
<div class="[@supports(backdrop-filter:blur(0))]:bg-white/60"> <!-- ✅ -->
<!-- Use grouped syntax for compound conditions -->
<div class="group-hover:focus:ring-2"> <!-- ✅ -->
<!-- Combine grouped and arbitrary -->
<div class="group-hover:[&:nth-child(2)]:bg-blue-100"> <!-- ✅ -->❌ Don’t Do This:
<!-- Don't overuse arbitrary variants for simple built-ins -->
<li class="[&:first-child]:mt-0"> <!-- ❌ (first: is built-in) -->
<!-- Don't write complex selectors that are unreadable -->
<div class="[&>div:nth-child(2)>span:not(.x)]:text-red-500"> <!-- ❌ -->
<!-- Don't use arbitrary variants instead of components -->
<div class="[&>div>div>p]:text-lg"> <!-- ❌ -->
<!-- Don't forget the & anchor -->
<div class="[:nth-child(3)]:bg-blue-100"> <!-- ❌ -->
<!-- Don't use grouped syntax without the group class -->
<div class="group-hover:ring-2"> <!-- ❌ (no .group ancestor) -->Common Pitfalls
| Pitfall | Why It Happens | Fix |
|---|---|---|
| Selector not matching | & is the element, not a parent | Verify the anchor and the relationship |
| Child selector not applying | Using [&:nth-child] instead of [&>*:nth-child] | Include the child combinator |
| Group variant has no effect | No .group class on an ancestor | Add class="group" to the parent |
| At-rule syntax rejected | Missing @ or invalid CSS | Use valid @supports or @media syntax |
| Specificity conflict | Arbitrary selector is too specific | Use :where() in the selector if needed |
| Nested arbitrary variants | Two [&...] in one class | They compose; order matters |
group-hover: not grouped in v4 | v4 version older than 4.3 | Upgrade Tailwind |
Real-World Examples
1. Nth-Child Styling
<li class="[&:nth-child(3)]:font-bold">2. Target All Children
<div class="[&>*]:p-4">3. Class-Conditional
<div class="[&.active]:bg-green-100">4. Data Attribute
<div class="[&[data-state='open']]:rotate-180">5. First Child
<div class="[&>li:first-child]:mt-0">6. @supports
<div class="[@supports(backdrop-filter:blur(0))]:bg-white/60">7. Custom Media Query
<button class="[@media(any-hover:hover)]:hover:bg-gray-100">8. Grouped Hover-Focus
<button class="group-hover:focus:ring-2">9. Group + Arbitrary
<div class="group-hover:[&:nth-child(2)]:bg-blue-100">10. Group with Attribute
<div class="group-[&[open]]:block">Visual
Arbitrary Variant Structure
┌──────────────────────────────────────────────────────────────┐
│ ARBITRARY VARIANT STRUCTURE │
│ │
│ class="[&:nth-child(3)]:bg-blue-100" │
│ │ │ │ │
│ │ │ └── utility: bg-blue-100 │
│ │ │ │
│ │ └── condition: :nth-child(3) │
│ │ │
│ └── anchor: & (the element itself) │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Generated CSS: │ │
│ │ .\[\&\:nth-child\(3\)\]\:bg-blue-100:nth-child(3) { │ │
│ │ background-color: #dbeafe; │ │
│ │ } │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ The & is replaced by the element. The selector after │
│ the colon is the condition. │
│ │
└──────────────────────────────────────────────────────────────┘Targeting Children
┌──────────────────────────────────────────────────────────────┐
│ TARGETING CHILDREN │
│ │
│ <div class="[&>*]:p-4"> │
│ │ │
│ ├── <p>Paragraph 1</p> ← p-4 applied │
│ │ │
│ ├── <p>Paragraph 2</p> ← p-4 applied │
│ │ │
│ └── <p>Paragraph 3</p> ← p-4 applied │
│ │
│ & is the parent div. >* selects every direct child. │
│ The utility applies to the children, not the parent. │
│ │
│ Compare with [&:nth-child(3)]: which applies to the │
│ element itself when it matches the condition. │
│ │
└──────────────────────────────────────────────────────────────┘Grouped Variant Composition
┌──────────────────────────────────────────────────────────────┐
│ GROUPED VARIANT COMPOSITION │
│ │
│ class="group-hover:focus:ring-2" │
│ │
│ Equivalent to: │
│ class="group:hover:focus:ring-2" │
│ │
│ Condition 1: .group:hover (ancestor) │
│ Condition 2: :focus (element) │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ <div class="group"> │ │
│ │ <button class="group-hover:focus:ring-2"> │ │
│ │ │ │ │
│ │ └── Both conditions must be true: │ │
│ │ 1. The .group div is hovered │ │
│ │ 2. The button is focused │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ The colon groups the conditions. The first condition │
│ is the outer scope; the second is the inner condition. │
│ │
└──────────────────────────────────────────────────────────────┘@supports Escape Hatch
┌──────────────────────────────────────────────────────────────┐
│ @SUPPORTS ARBITRARY VARIANT │
│ │
│ class="[@supports(backdrop-filter:blur(0))]:bg-white/60" │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Browser supports backdrop-filter: │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ @supports (backdrop-filter: blur(0)) { │ │ │
│ │ │ .\[\@supports\(\...\)\]\:bg-white\/60 { │ │ │
│ │ │ background-color: rgb(255 255 255 / 0.6)│ │ │
│ │ │ } │ │ │
│ │ │ } │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Browser does NOT support: │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ The class has no effect. Base bg-white │ │ │
│ │ │ applies. │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ This is progressive enhancement. The base style is │
│ always present; the enhancement is conditional. │
│ │
└──────────────────────────────────────────────────────────────┘Summary
| Item | Value |
|---|---|
| Arbitrary variant syntax | [&selector]:utility |
& anchor | The element the utility is applied to |
| Child targeting | [&>*]:utility applies to direct children |
| Class conditional | [&.open]:utility when element has class |
| Attribute conditional | [&[data-state="open"]]:utility |
| At-rule variants | [@supports(...)]:utility, [@media(...)]:utility |
| Grouped variant syntax | group-hover:focus: = group:hover:focus: |
| Peer grouping | peer-checked:peer-focus: = peer:checked:peer:focus: |
| Group + arbitrary | group-hover:[&:nth-child(2)]: |
| v4 requirement | Grouped syntax needs Tailwind v4.3+ |
Key takeaways:
- Arbitrary variants are the escape hatch for selectors Tailwind does not ship.
[&:nth-child(3)]:,[&.open]:,[&[data-state="open"]]:,[&>*]:— these cover selectors that have no built-in variant. They keep the styling in the class list instead of requiring custom CSS . - The
&is the element the utility targets. Everything after the colon is the selector condition.[&>*]:targets children;[&:nth-child(3)]:targets the element itself when it is the third child. The anchor is always the element with the class . - At-rules work as arbitrary variants.
[@supports(backdrop-filter:blur(0))]:applies the utility only when the feature is supported.[@media(any-hover:hover)]:applies only on devices that support hover. These are conditions that no built-in variant exposes . - Grouped variant syntax in v4 composes conditions with colons.
group-hover:focus:is equivalent togroup:hover:focus:. Thegroup-prefix is a shorthand for the group class plus the first state. Subsequent states are stacked with colons . - Grouped and arbitrary variants compose.
group-hover:[&:nth-child(2)]:bg-blue-100applies when the group is hovered and the element is the second child. The conditions are ANDed left to right. - Use arbitrary variants sparingly. They bypass the design system, are not discoverable, and can produce unreadable selectors. They should be the exception for selectors that genuinely have no built-in equivalent.
- Grouped syntax requires the
.groupclass.group-hover:has no effect without an ancestor withclass="group". The grouping is syntactic; the runtime requirement is the same as the non-grouped form. - Arbitrary variants are not a replacement for components. If you find yourself writing deeply nested arbitrary selectors like
[&>div>div>p]:, the markup structure should be refactored instead.
Remember: Arbitrary variants extend Tailwind’s reach to any CSS selector, keeping the styling in the class list and avoiding custom stylesheets. The syntax is [&selector]:utility, with & as the anchor and the selector as the condition. Grouped variant syntax in v4 composes conditions with colons, so group-hover:focus: reads as a single compound condition instead of a repeated prefix. Together, they cover the selectors Tailwind does not ship and the compound conditions that would otherwise require verbose stacked variants. The trade-off is discoverability and design-system consistency. Use them when the built-in variants genuinely cannot express the selector, and keep the selectors as simple as the requirement allows.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!