How to override @apply directives in tailwindcss

user_47633 0
Viewed 2890

Is it possible to override @apply directives?

I have this example: https://play.tailwindcss.com/kyu6CxnBzB

.item {
  @apply text-black font-light text-opacity-80 py-4 bg-gray-100;
}

<ul>
  <li class="item">About Us</li>
  <li class="item">Success stories</li>
  <li class="item text-red-50 bg-red-800">Contact</li>
  <li class="item">Blog</li>
</ul>

with this result:

enter image description here

when I expected

enter image description here

it seems like the value in the first class define with apply (item) takes precedence over any other class specified afterwards

how would you solve a scenerio like that? creating a component (I'm working with svelte) seems like an overwkill for this, and I´d like some way to avoid duplicating stuff like "font-sans text-black text-black text-opacity-80 my-4 hover:text-gray-800 hover:text-underline etc..."

tailwind-css css html
1 Answers

This is a property of CSS, not tailwind. The specificity of your selector is greater than that of tailwinds utility classes. You can use the @layer directive to fix this by defining your class like so:

@layer components {
  .item {
    @apply text-black font-light text-opacity-80 py-4 bg-gray-100;
  }
}

This declares your class before tailwind's utility classes and so should have lower specificity.

Reference: https://tailwindcss.com/docs/functions-and-directives#layer

user_72115480
Related