Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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;
  <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>
with this result:
when I expected
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..."
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
                Thanks a lot for your reply, so if I understand correctly, the layer fecines the order in which they are defined in the resulting css, and hacing no layer means it goes to the end. right?
– opensas
                Apr 24, 2021 at 16:35
                The directive simply tells tailwind to move the contents to wherever you are loading tailwind (@tailwind components; in this case). It will end up looking the same if you declared your class after @tailwind components; but before @tailwind utilities;
– Andrew Gillis
                Apr 24, 2021 at 16:39
                This works perfectly if only one class is used as selector. But if using chained selectors this doesn't work anymore. Don't know exactly how to work around this. play.tailwindcss.com/2nmGe5yad3
– Fabius
                Oct 26, 2021 at 13:13
                @NicholasBetsworth not exactly a solution, but a workaround. If you're using JIT mode, you can prefix inline classes with ! to mark them as important. There are other more intrusive ways of doing this, like setting all utilities as important in the tailwind config, but i dont like that very much and you can encounter unexpected behaviors if you didnt write your classes with that option in mind from the beginning. Check this question i asked and also the comments to the answer: stackoverflow.com/questions/69825111
– Fabius
                Dec 8, 2021 at 12:05
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.