Question about new addVariant API

[MichaelAllenWarner]

(attn @RobinMalfait)

When using the new addVariant API, would there be any benefit to either [foo="bar"]& or &[foo="bar"] over the other? Would one of them fare better when combined with other variants (I'm thinking especially of pseudo-class and pseudo-element variants)?

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

Maybe we can optimize this internally, but in most cases using &[foo="bar"] is currently the best way of defining new variants. However, it also depends a bit on your use case. This is because & will be replaced by the parent selector. So for example if we define 2 variants like foo and bar:

addVariant('foo', '&[foo="bar"]')
addVariant('bar', '[foo="bar"]&')

And have the following html:

<div class="group p-12">
  <div foo="bar" class="foo:group-hover:text-green-500">Hello world</div>
  <div foo="bar" class="bar:group-hover:text-green-500">Hello world</div>
</div>

Then we would generate the following CSS:

.group:hover .foo\:group-hover\:text-green-500[foo="bar"] {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

[foo="bar"].group:hover .bar\:group-hover\:text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

So in this case, if you are combining it with a group-hover we have to combine it with .group:hover .your-stuff-here

If you look at the generated css, then you will see that in the first scenario, the div element with Hello world needs to have the foo="bar" attribute. But in case of the bar variant, the actual group itself requires a foo="bar" attribute.

Play: https://play.tailwindcss.com/Lef1CdGvCk

More info on this can be found here: https://tailwindcss.com/docs/hover-focus-and-other-states#ordering-stacked-modifiers

So in short I would recommend to put the & in front because that will be the correct expected result in 99% of your use cases.

[MichaelAllenWarner]

Thanks.

And it looks like even with the ill-advised bar variant, I can still do group-hover:bar:text-green-500 (swap the order of the variants) to get the desired behavior there.