How can disable inheritance in tailwind? - html

Question

i use tailwind-css for styling my components in Nuxtjs
and my components .
and this is my style classes
.ccard {
#apply bg-white px-2 py-10;
&-header {
#apply relative;
&-btn {
#apply btn btn-circle btn-sm btn-primary px-0 border-0;
}
&-img {
// width: 100%;
// height: 100%;
#apply object-cover w-full;
}
}
&-detail {
#apply text-center pt-2 px-1;
&-cat {
#apply text-sm text-gray-400 mb-2;
}
&-title {
#apply text-lg font-semibold;
}
}
}
and this is my component template
<template>
<div class="ccard">
<div class="ccard-header">
<button class="ccard-header-btn">
<magnify />
</button>
<img :src="data.src" class="ccard-header-img" alt="" />
</div>
<div class="ccard-detail">
<div class="ccard-detail-cat">{{ data.cat }}</div>
<div class="ccard-detail-title">{{ data.title }}</div>
</div>
</div>
</template>
and this is result
i expect the button to be a circle BUT it is not !
i got inspect and it inhertited a min-height from some-where i dont know where it is .
and i think in tailwind child tags inherit their parent tags classes and i think this is not good .
how can i disable heritance in tailwind-css

Answer 1

I think the inheritance in 'tailwind-css' isn't your problem. I have two answers to this question:
1)you have to check to magnify inside the btn, maybe it has a little x-margin or x-padding
2)you have to set specific width and height (w-10 h-10) classes in the icon.
look at this code:
<button class="bg-green-400 rounded-full">
<img class="w-10 h-10 p-2" src="https://img.icons8.com/ios-glyphs/30/000000/search--v1.png"/>
</button>