Using hover and focus variants when not disabled

[amiranagram]

I want to apply classes on hover and focus only if the button is not disabled.

What approach should I take?

Should I customize variants so it would only apply styles when :not([disabled]), and how would I do that?
Or is there any way I could have a not variant? I could use it like not:disabled:hover:bg-blue-700 or enabled:hover:bg-blue-700.

[simonswiss]

Hey!

In short: you can do the opposite of what you want: Add disabled styles if the button is disabled. These will "cancel" any hover/focus styles you have applied on the same element.

---

Detailed answer

You can enable the disabled variant for what you need (like backgroundColor, textColor) in your config file's variants.

If a disabled: style is set for a button, it will never allow hover/focus styles to show. Here's an example in Tailwind Play:

https://play.tailwindcss.com/LOaudRbGXs

Notice how I enabled the disabled variant for both the background and text colors, and then applied disabled styles to both buttons (one of them having the disabled attribute).

Hope it helps 👍

[amiranagram]

This is great! Appreciate it.

[rafahuaman]

@simonswiss Thanks for all your work as a maintainer!

I found some strange behavior that differs from the detailed answer above. I was wondering if it was a bug or expected behavior.

If a disabled: style is set for a button, it will never allow hover/focus styles to show

The hover styles are still applied even when the following classes are the only disabled styles applied disabled:opacity-50 disabled:cursor-not-allowed. If I add another class like bg-red-100, the disabled component works as expected (hover does not trigger hover styles).

https://play.tailwindcss.com/ACFyBZ5QUV

[adamwathan]

If you only want the hover styles to show when the button is enabled, add enabled::

hover:enabled:bg-indigo-400

https://play.tailwindcss.com/Af6OyarFsl

[prince272]

Thanks. I never thought about that.

[bauhaas]

Nice little tips

[selemondev]

This solution doesn't seem to work for dynamically generated classnames. How can I go about this?

[ctoma]

hover:enabled:bg-indigo-400 works but beware if you have say active:bg-indigo-300 then the hover will always override it, I guess due to specificity.
To fix this you need to then declare your active class with enabled also, i.e. active:enabled:bg-indigo-300

[sesa736123]

@selemondev From my knowledge dynamically generated classes doesn't work at all in Tailwind

[simoami]

I used the enabled:hover:* before but It has no effect on anchor elements. You end up losing the hover. Fyi, an anchor is sometimes used in place of a button to render links with href. If you're using radix-ui through shadcn/ui, this would be the equivalent of <Button asChild><Link href="...">A link</Link></Button> which renders a link tag <a href="">...</a>.
One solution is to stick with a plain hover:* directive combined with disabled:hover:<revert hover styles>, where if the disabled attribute is not applicable, the hover remains in effect. Alternatively, you can also just add disabled:pointer-events-none next to a simple hover rule if you don't need any pointer or keyboard detection.

[Nases]

Exactly our problem, we use same class for both button & a, but enabled breaks hover effects for anchor tags.