Add ui-group-focus-visible utility to Tailwind Plugin

[agusterodin]

I am a huge fan of the focus visible variants added in #2347 that prevents focus styles from showing when using mouse.

Unfortunately there is no group-focus-visible utility. Would love to see this feature in future.

[PutziSan]

You can also add the variant yourself as a plugin:

// extends the "@headlessui/tailwindcss" plugin so that it is possible to use group-ui-focus-visible: and peer-ui-focus-visible:
const addMissingGroupUiFocusVisiblePlugin = plugin(
  ({ addVariant }) => {
    addVariant("group-ui-focus-visible", ":where([data-headlessui-focus-visible]) :merge(.group) &");
    addVariant("peer-ui-focus-visible", ":where([data-headlessui-focus-visible]) :merge(.peer) ~ &");
  }
)

[courdek]

This needs a slight modification to work:

// extends the "@headlessui/tailwindcss" plugin so that it is possible to use group-ui-focus-visible: and peer-ui-focus-visible:
const addMissingGroupUiFocusVisiblePlugin = plugin(({ addVariant }) => {
  addVariant('group-ui-focus-visible', ':where([data-headlessui-focus-visible]) :merge(.group):focus-visible &');
  addVariant('peer-ui-focus-visible', ':where([data-headlessui-focus-visible]) :merge(.peer):focus-visible ~ &');
});```