Arbitrary variants

[RobinMalfait]

With the new addVariant API, we have a beautiful way of creating new variants.

You can use it as:

addVariant('children', '& > *')

Now you can use the children: variant. The API uses a & as a reference for the candidate, which means that:

children:pl-4

Will result in:

.children\:pl-4 > * { .. }

Notice that the & was replaced by .children\:pl-4.

We can leverage this API to implement arbitrary variants, this means that you can write those &>* (Notice that we don't have spaces) inside a variant directly. An example of this can be:

<ul class="[&>*]:underline">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Which generates the following css:

.\[\&\>\*\]\:underline > * {
  text-decoration-line: underline;
}

Now all the children of the ul will have an underline. The selector itself is a bit crazy since it contains the candidate which is the selector itself, it is just escaped.

[RobinMalfait]

This will require some work to make it exactly right

[thecrypticace]

lol yep I was thinking about this. I'll throw this change against my new candidate refactor to see what breaks…

I had already tested support for arbitrary variant syntax (at least detection wise) in the form of [foo]:bar

[thecrypticace]

ngl I love this idea so much

[thecrypticace]

I pushed a regex tweak to fix the tests 👍👍

[simonswiss]

This is rad! 🤙

[onmax]

Wow, just requested this feature about one month ago and now is coming here. Timing couldn't be better. I have a few ideas in my head to create some plugins with this.

#8157

Keep up the hard work 🔥 🔥. Amazing!

[adamwathan]

Added a failing test for attribute selectors like:

class="[&:[data-open]]:underline"

I think this one is going to be kind of tricky — we need to reliable extract that candidate from the template but to do that we need to worry about bracket balancing. We'll need to support multiple pairs too so the implementation probably can't be as naive as I'd wish:

class="[&:[data-foo][data-bar]:has([data-baz])]:underline"

[wenerme]

Hi, may I ask when will tailwindcss release next version contain this major feature ?

[jipika]

Is it possible to specify a class name? Sometimes it is not possible to change all of them

[jipika]

If you can specify the class name, in vue will not need to write:: v-deep and so on, you can directly modify the style of the UI library, which will greatly improve the efficiency of development

[calvo-jp]

woah! how cool 🚀

[ivanchenhz]

Cool, 👍
And seems we don't support class selector?!

[&_i]:text-pink-100 👌
[&_i.some_class]:text-pink-100 ...

[RobinMalfait]

@ivanchenhz we do, but _ is used for spaces, so you essentially have this selector:

i .some class {}

You have to escape the _ if you want to keep it as an actual underscore. See: https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

[ivanchenhz]

@RobinMalfait thanks for confirming, and yes it works, 👍 😄
And I finally figure it out, the problem is we have prefix 'tw-'

• So, when I targeting class like $_i.tw-font-medium it generate i.tw-tw-font-medium
• Should we considering DON'T count prefix in arbitrary mode !

[ivanchenhz]

@RobinMalfait
Got a real case for this, we like to restyling the 'popover-body' which comes from some library
After add [&_.popover-body]:tw-pr-2, it auto prefix to generate tw-popover-body ( doesn't actually exist )
Have to manually add the class to make it work, ( which not feasible obviously 😂 ）
Please considering don't count prefix in arbitrary mode

[Emre-Zero]

Nice work!

I suppose can shorten to ch.

(FYI for others), in tailwind.config.js:

const plugin = require("tailwindcss/plugin");
plugins: [
      plugin(function({ addVariant }) {
        addVariant('ch', '& > *')
      })
]

[clintfisher]

Having issues with Arbitrary variants not showing in Intellisense:
#9449