missing group-focus types

module.exports = {
  ...
  variants: {
    visibility: ["responsive", "hover", "focus", "group-hover", "group-focus"],
  }
};

The generated types contain the group-hover types, but not the group-focus ones:

export type TPseudoClasses =
  ...
  | 'group-hover:visible'
  | 'group-hover:invisible'

As per the documentation, group-focus works just like group-hover, so should their types 😃

[AdrienLemaire]

@muhammadsammy really sorry ^^ The fix in dbf7f20 doesn’t seem correct.

Given conf

    visibility: ["responsive", "hover", "focus", "group-focus"],

I get

$ cat src/utilities/tailwind.ts|grep group
  | 'group'
  | 'group-focus:invisible'

the group-focus:visible utility is missing.

Given conf

    visibility: ["responsive", "hover", "focus", "group-hover", "group-focus"],

I get

cat src/utilities/tailwind.ts|grep group
  | 'group'
  | 'group-focus:visible'
  | 'group-hover:invisible'
  | 'group-focus:invisible'

the group-hover:visible utility is missing.

It looks like the group utility replaces the first generated rule instead of being added.

[AdrienLemaire]

@muhammadsammy actually I still have an issue. When enabling the group-hover or group-focus variants, we need to add the .group class as well, but it is not added to the types.

https://tailwindcss.com/docs/pseudo-class-variants#group-hover

If you need to style a child element when hovering over a specific parent element, add the .group class to the parent element and add the group-hover: prefix to the utility on the child element.

$ cat src/utilities/tailwind.ts|grep group
  | 'group-hover:visible'
  | 'group-focus:visible'
  | 'group-hover:invisible'
  | 'group-focus:invisible'