Hi
I was recently working with tailwind and hit some problems when building components.
So for example let’s take a contact card from the documentation:
<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden px-6 py-4">
<div class="sm:flex sm:items-center ">
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl leading-tight">Bostjan</p>
<p class="text-sm leading-tight text-grey-dark">Developer</p>
</div>
<div>
<button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
</div>
</div>
</div>
</div>
If we have a lot of contact cards it would make sense to make a component and export the repeating classes:
SCSS:
.card {
@apply .bg-white .mx-auto .max-w-sm .shadow-lg .rounded-lg .overflow-hidden .px-6 .py-4;
button {
@apply .text-xs .font-semibold .rounded-full .px-4 .py-1 .leading-normal .bg-white .border .border-purple .text-purple;
&:hover {
@apply .bg-purple .text-white;
}
}
}HTML:
<div class="card">
<div class="sm:flex sm:items-center"></div>
<div class="text-center sm:text-left sm:flex-grow">
<div class="mb-4">
<p class="text-xl leading-tight">Bostjan</p>
<p class="text-sm leading-tight text-grey-dark">Developer</p>
</div>
<div>
<button>Message</button>
</div>
</div>
</div>
</div>
Now .... let assume we want to make another card but we want the button to be blue. So we add .bg-blue to the button as the utility class. But this won’t work because the CSS selector from the component is more important than the utility class.
I was hoping that setting important to true would fix this problem, but that option applies to all the utilities used with @apply too.
Would it be better to make !important in @apply optional and make it so it should be specified together with @apply.
For example:
@apply .border .mx-2 !important;
or use custom:
@apply .border;
@apply-important mx-2;
Regards,
Bostjan
Hi
I was recently working with tailwind and hit some problems when building components.
So for example let’s take a contact card from the documentation:
If we have a lot of contact cards it would make sense to make a component and export the repeating classes:
SCSS:
HTML:
Now .... let assume we want to make another card but we want the button to be blue. So we add
.bg-blueto the button as the utility class. But this won’t work because the CSS selector from the component is more important than the utility class.I was hoping that setting important to true would fix this problem, but that option applies to all the utilities used with
@applytoo.Would it be better to make !important in
@applyoptional and make it so it should be specified together with@apply.For example:
or use custom:
Regards,
Bostjan