What you are seeing is the usage of Tailwind's arbitrary variants feature.
Inside the square brackets is a CSS selector (or media query, I won't be talking about that here), with the ampersand (&) a substitute for the element that the class is being applied to. The nested brackets are attribute selectors, like with standard CSS selectors, as you correctly inferred in your Stacked Overflow question. Underscore is used instead of spaces in a CSS selector.
To give a few examples:
<div class="foo">
<div class="[.foo_&]:text-white"></div>
</div>
is conceptually like:
<div class="foo">
<div class="bar"></div>
</div>
<style>
/**
* .foo .bar
* ↓
* .foo &
* ↓
* .foo_&
*/
.foo .bar {
color: white;
}
</style>
With .bar now &, since .bar is the element we are applying the class/style to.
Another example:
<div class="foo"></div><div class="[.foo+&]:text-white"></div>
is conceptually like:
<div class="foo"></div><div class="bar"></div>
<style>
/**
* .foo + .bar
* ↓
* .foo + &
* ↓
* .foo+&
*/
.foo + .bar {
color: white;
}
</style>
The + grammar in CSS selectors does not strictly need spaces around it, so we can remove them for a more concise arbitrary variant syntax.
<div data-foo class="[&[data-foo]]:text-white"></div>
is conceptually like:
<div data-foo class="bar"></div>
<style>
/**
* .bar[data-foo]
* ↓
* &[data-foo]
*/
.bar[data-foo] {
color: white;
}
</style>
Hopefully this example makes the nested brackets clear.
