FwbButton is missing the pointer cursor style on tailwind 4

[mrckzgl]

I followed the steps here: https://flowbite-vue.com/pages/getting-started to install flowbite-vue on my vite + vue project.

The problem is that any (non href) button is missing the pointer cursor.
If I look at the examples here: https://flowbite-vue.com/components/button I do see that there is a button:enabled style in the compiled css:

This is missing in my setup somehow:

The minimal example code is in the codesandbox here: https://codesandbox.io/p/devbox/practical-butterfly-cqjrdk?workspaceId=ws_FMSRq1TAYhAMJjbf5uLiwe

I did not experience the issue when using tailwind 3. Is there something missing in my setup or is this a bug?

best

[Sqrcz]

Hey @mrckzgl,

this is a weird one... looking at the source (https://flowbite.com/docs/components/buttons/) we can see that there is no cursor-pointer when hovering buttons.

It looks more like some style leak from VuePress styles.... example you provided works as it should... (docs are using TailwindCSS in v4 as well)

If you think that buttons should have hover:cursor-pointer I would suggest mentioning that here: https://github.com/themesberg/flowbite/issues (as we're are just following styles defined in Flowbite).

[mrckzgl]

Thanks for the fast reply :-) If it is the standard behaviour of flowbite I guess that is fine (I can easily add the button:enabled style globally). I was just surprised as the flowbite-vue example had the pointer.

But if one adds a href attribute to the FwbButton it has the pointer even without VitePress in my example sandbox. Isn't this somehow an inconsistency compared to flowbite which never has pointers on their buttons? Also the layout spacings (margins / paddings etc.) change a bit between a href button and a regular button.

regular button:

href button:

[Sqrcz]

I've forked your example and tested it - the button behavior is actually working as expected. The button:enabled style you're seeing in the Flowbite Vue documentation is leaking from VuePress (the documentation framework), not from the component itself.
Here's what's happening:

• Buttons without href: Normal button behavior (no cursor change)
• Buttons with href: Adds hover:cursor-pointer, which is the expected behavior for link-styled buttons

About inconsistency... Flowbite docs don't have buttons with href so being consistent with general design... if it's a link it should have cursor-pointer on hover we've added it only to the Buttons with links.

Here's your forked example showing it works correctly: https://codesandbox.io/p/devbox/infallible-cori-2hyy4l?workspaceId=ws_PVMsw5PxLHw3A942PPEucU there is also no differences in paddings or any other styles.

Pleas let me know if I can help you more in any way.

[mrckzgl]

Here's your forked example showing it works correctly: https://codesandbox.io/p/devbox/infallible-cori-2hyy4l?workspaceId=ws_PVMsw5PxLHw3A942PPEucU there is also no differences in paddings or any other styles.

But that is only the case if you have them inside a flex container. Remove that and you get:

[Sqrcz]

It took ma a while... but I found the issue... ;)

This PR #416 should resolve it.