Custom Variant group-toggle Not Working with group-toggle/item – How to Configure Correctly?

[mustafa-soylemez]

Hey everyone,

I'm trying to create custom variants for a toggle-based structure in my Tailwind config. Here's what I have so far:

addVariant('toggle', '&.toggle')
addVariant('group-toggle', ':merge(.group).toggle &')
addVariant('peer-toggle', ':merge(.peer).toggle ~ &')

However, when I try to use something like group-toggle/item or group-toggle/menu-item, it doesn't apply the styles as expected.

Is there something I'm missing in the configuration, or do I need to structure the selector differently for this to work? Any guidance would be appreciated!

Thanks in advance 🙌

Note: I'm using tailwind v3 btw.

[wongjn]

Taking inspiration from core:

tailwindcss/src/corePlugins.js

Lines 156 to 159 in 4f9f603

	group: (_, { modifier }) =>
	modifier
	? [`:merge(${prefix('.group')}\\/${escapeClassName(modifier)})`, ' &']
	: [`:merge(${prefix('.group')})`, ' &'],

You need to use matchVariant() so that you get access to the modifier (the string after the slash):

matchVariant(
  'group-toggle',
  (_, { modifier }) =>
    modifier
      ? `:merge(.group\\/${modifier}).toggle &`
      : ':merge(.group).toggle &',
  {
    values: { DEFAULT: '' }
  }
);

The empty DEFAULT is so that the "root" name, group-toggle can be used on its own. The value doesn't really matter, but the existance of the DEFAULT key is what wills our group-toggle base variant into existance.

Using matchVariant(), we automatically get modifier syntax enriched onto the variant. With the second parameter function, we get a second parameter passed to it, an options object. Within this object, there may be a modifier key that coincides with the modifier portion of the name. Then, we detect existance of the modifier and adjust the selector as needed.

https://play.tailwindcss.com/8jtEzkFqmP?file=config

[mustafa-soylemez]

Thanks a lot, that worked perfectly! Really appreciate your help 🙌