bug: outline class not working

[michaelcozzolino]

What version of FlyonUI are you using?

1.1.0

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://github.com/michaelcozzolino/flyonui-outline-bug

Describe your issue

if i use the outline class of a button <button class="btn btn-outline btn-primary">primary</button> the class does not work i get the following buttons:

if i add the class border-solid it works. for other elements that have the outline class it works without adding any further class. the bug happens because the elements have no "border-style: solid" in the css and the fix would just to add "border-solid" to the @apply of .btn in src/components/styled/button.css, but also to the other elements as, according to the docs https://developer.mozilla.org/en-US/docs/Web/CSS/border

The border will be invisible if its style is not defined. This is because the style defaults to none.

you can check the repo that i have given. just run yarn install yarn docs:dev

and go to http://localhost:5173/markdown-examples.html

i think in the flyonui docs it works because probably the border-style: solid css is inherited from some parent elements. if the bug is confirmed would it be ok for me to fix it?

[github-actions[bot]]

Hi @michaelcozzolino

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[yagnikvamja]

Hello @michaelcozzolino ,

i think in the flyonui docs it works because probably the border-style: solid css is inherited from some parent elements. if the bug is confirmed would it be ok for me to fix it?

• As border-style: solid is applied by default in Tailwind CSS, so we did not include it explicitly in the FlyonUI button styles, as there is no need to override an already applied style.

However, VitePress applies border: 0 to buttons, which removes the border’s style, color, and width entirely. While FlyonUI successfully applies the border color and width, we didn't explicitly set border-style because it is applied by default in Tailwind CSS. This lack of an explicit border-style allows VitePress’s border: 0 to take precedence, resulting in this issue. This behavior appears to be specific to VitePress, as the button displays correctly in other frameworks.

For now, please continue using the same approach, we'll make updates in a future release.

Best regards,

[michaelcozzolino]

understood! thanks!