search

adoxography / tailwind-scrollbar

Scrollbar plugin for Tailwind CSS
MIT License
951 stars 39 forks source link

Handle active variant properly #31

Closed Hexalyse closed 2 years ago

Hexalyse commented 2 years ago

I added tailwind-scrollbar today to a React project. Everything works fine with the plugin, but I've noticed that as soon as I add it to the plugins in my tailwind CSS config, I cannot have both hover: and active: rules working as they should, for example on a button.

When adding tailwing-scrollbar, if you hover the button, you see the :hover rules in action, but if you then click, you don't see the active: rules. Only the hover: rules are visible. If you hold the click but move the cursor out of the button (effectively having the active flag set but not the hover flag), you finally see the active: effect.

So I guess it's a problem of precedence of hover overriding active, while active should override hover.

I hope I'm being clear !?

adoxography commented 2 years ago

Yeah, so this plugin has to operate a little strangely when it comes to pseudo classes because scrollbars in Chrome are pseudo elements. I had to override how the hover: variant works when it gets applied to scrollbar classes, and I completely overlooked the active: variant. Shouldn't be too hard to add, though. Thanks for the report!

adoxography commented 2 years ago

Support for the active: variant is included in v2!