bug: join-item impacts the radius of its children

[Suniron]

What version of daisyUI are you using?

latest (tested in documentation and in Tailwind Play)

Describe your issue

Hey there,

In the latest version of DaisyUI, the join-item class override the radius of children.

For example, if you have a badge or a btn nested in a collapse that has a join-item class, badge, and btn do have not the original rounded aspect.

Do you have a workaround for that? 🙏

What browsers are you seeing the problem on?

Chrome

Reproduction URL (optional)

https://play.tailwindcss.com/bI4RPexOut

[andre-gra]

Hi @Suniron,

maybe not the smarter solution, but you can apply directly on the btn element a rounded tailwind class in this way :

<button class="btn rounded-[--rounded-btn]">I want to be rounded 😥</button>

[Suniron]

It's not easy in a real app where we have deeply nested components 🤯

[andre-gra]

Of course, you are right! Maybe you can use a customization of your btn component on your CSS file, using Tailwind's @apply directive, following daisyUI docs (point 3 of daisyui.com/docs/customize)
Using rounded-[--rounded-btn] you don't alterate any other default btn styles, because you only reapply its own rounded-btn style.

It' s only a workaround, but it could works...even if I don't know all the details of your real app.

[saadeghi]

Fixed in 3.1.0