Custom group modifier support?

[VladyslavKochetkov]

I tried to find docs on this but it seems to be quite limited. Is there a way to add custom modifiers into group statements? Such as if we add a hocus variant, could we do something like group-hocus/{name}:bg-red-400?

Thanks!

[GaneshVarma1]

Hi @VladyslavKochetkov
Yes, but you have to register it yourself.
group-hover, group-focus, etc. are just ordinary Tailwind variants that have already been added for you.
To make group-hocus work you need to declare two variants in a plugin:

1. hocus – so you can write hocus:bg-red-400 on an element.
2. group-hocus – so you can write group-hocus:bg-red-400 on a child of .group.

---

tailwind.config.js

const plugin = require('tailwindcss/plugin');

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  plugins: [
    plugin(function ({ addVariant, e }) {
      // plain `hocus:` (element itself)
      addVariant('hocus', ['&:hover', '&:focus']);

      // `group-hocus:` (inside a parent that has the `.group` class)
      addVariant('group-hocus', ({ modifySelectors, separator }) => {
        modifySelectors(({ selector }) => {
          const escaped = e(`group-hocus${separator}${selector.slice(1)}`);
          return `.group:hover .${escaped}, .group:focus .${escaped}`;
        });
      });
    }),
  ],
};

Now you can write:

<div class="group">
  <button class="group-hocus:bg-red-400 hocus:text-white">
    Hover or focus me (or the group)
  </button>
</div>

---

Alternative: arbitrary group variant (Tailwind 3.3 +)

If you do not want to create a plugin you can use the “arbitrary variant” syntax which lets you inline any selector:

<div class="group">
  <button class="group-[&:hover,&:focus]:bg-red-400">
    Hover or focus the group
  </button>
</div>

But if you plan to reuse hocus everywhere the plugin approach keeps your class names clean and consistent.

[VladyslavKochetkov]

Hey thanks, in your snippet you do const escaped = e(group-hocus${separator}${selector.slice(1)});, where is e imported from? I haven't written a tailwind plugin previously to this extend.

Oh... I'm dumb I didn't see it in the destructure.

[VladyslavKochetkov]

@GaneshVarma1 Yeah while this does solve the basic group I was more interested in how we could solve named grouped, such as group/row

[VladyslavKochetkov]

Ok leaving this to another who needs help with this in the future. @GaneshVarma1 really helped out and sent me in the right direction. The achieve a hocus variant that supports regular hocus:bg-red-400, group styling via group-hocus:bg-red-400 as well as group styling with variants such as group-hocus/row:bg-red-400 you can use the following snippets.

plugins: [
  function ({ addVariant, matchVariant, e }) {
      addVariant("hocus", ["&:hover", "&:focus-visible"]);
      matchVariant("group-hocus", (value, { modifier }) => {
        return modifier
          ? [`:merge(.group\\/${modifier}):hover &`, `:merge(.group\\/${modifier}):focus-visible &`]
          : [`:merge(.group):hover &`, `:merge(.group):focus-visible &`];
      }, {
        values: { DEFAULT: '' }
      });
    },
]