Is group-disabled:no-hover possible?

[kctdfh]

I have a <fieldset> element (with .group) with two buttons and an input element in it. The input has group-hover (background color) applied but the buttons don't (they have individually applied hover: classes). I also have group-disabled applied to change the background color of all elements.

Now when the <fieldset> is disabled, I have the group-disabled background color applied to everything but group-hover background color change is also being triggered when I hover the group.

I need no-hover and group-disabled applied at the same time, it seems. I would be good to have a group-disabled-no-hover class added to the plugin. I tried adding it but can't get it working right.

[benface]

@kctdfh The group-hover and group-disabled variants should result in utilities with the exact same specificity, so the one that "wins" is the last one defined in the variants array. For instance, if you have:

  variants: {
    backgroundColor: ['group-disabled', 'group-hover'],
  },

...then group-hover:bg-blue-200 will take precedence over group-disabled:bg-gray-800. The trick is to invert them:

  variants: {
    backgroundColor: ['group-hover', 'group-disabled'],
  },

If that still doesn't work, could you please provide me an example project?

[kctdfh]

@benface Thanks for taking the time! That makes a lot of sense! I thought the trick was to put the ones that take precedence first in the variants array. However, it still doesn't seem to work. Have a look here:

https://play.tailwindcss.com/kZ4sSKFiEQ

'group-disabled' is always placed last but the group-disabled input's group-hover background color is still triggered when the '.group' is disabled! The only way I can make it work is by adding "!important' to the background color of the input (it's commented out by default and I've placed it at the end of the CSS page).

Sorry the config is a little large. I tried to make it a bit smaller. Also the icons won't load in Tailwind Play but that shouldn't matter.

[benface]

@kctdfh Oh you're using @apply! Not that it changes anything since Tailwind added support for complex classes, other than the fact that you can control the generated CSS order by splitting @apply into multiple lines. For instance, you could fix it by moving group-disabled:bg-gray-50 into its own @apply: https://play.tailwindcss.com/UwNNARrYvt

But that's just a workaround, and the source of the problem is variants.extend. Here's the same Play with just variants, you can see that it works as expected: https://play.tailwindcss.com/ZoODbKGriW

The reason it's not working is that unlike variants that lets you define the variant order per plugin, variants.extend sorts variants using Tailwind's recommended order, and third-party variants (such as group-disabled) are added at the beginning by default (search for "Working with third-party variant plugins" in that page). You can change that by specifying a variantOrder that includes the custom variant: https://play.tailwindcss.com/hETeIqbyCE

Closing this issue since it's not actually a problem with the plugin, but feel free to continue the discussion if you want. :)

[kctdfh]

Sorry @benface for not catching this earlier! But thanks a lot! It clarifies a lot of things for me!