[Card] Classes passthrough
ISOR3X opened this issue · 4 comments
Description
Hi, short request here.
I noticed that when passing classes to a UCard component, they are not inherited by any of the child elements. Other components such as UButton do have this so this might actually be a bug, not sure.
So for example I have this; <UCard class="p-3 space-y-3"> and it results in this; <div> class="p-4 sm:p-6" </div> which are the default classes. Instead, I would like it to return the following; <UCard class="p-3 space-y-3 sm:p-6">4
Hopefully that makes sense. For my own components I usually bind the attributes $attrs to the component, but I am sure it is more complicated in this case. 😄
Anyway, thanks for the great library!
Additional context
No response
This is related to the structure of the component and how tailwind-merge works.
When you pass class to the Card component, it will merge with the classes of the root element. If you want to change the padding of the header / body / footer, you have to target them using the ui prop: <UCard :ui="{ body: 'p-3 sm:p-5' }" />
Note that the p-3 class will only override the p-4 class, if you want to override sm:p-6 you have to do sm:p-5 for example.
This is related to the structure of the component and how
tailwind-mergeworks.When you pass
classto theCardcomponent, it will merge with the classes of the root element. If you want to change the padding of theheader/body/footer, you have to target them using theuiprop:<UCard :ui="{ body: 'p-3 sm:p-5' }" />Note that the
p-3class will only override thep-4class, if you want to overridesm:p-6you have to dosm:p-5for example.
So classes from the theme have higher priority than the ones passed through? That does however not explain why 'space-y-3' is not added to the root element of the component.
It should be, but if this is a bug report please use the correct issue template. I can't help without knowing which version you're using and without a reproduction.
It turned out to be a project specific issue, I apologize for the false report.