Shadow does not apply when size is instantiated on hover about tailwindcss HOT 5 CLOSED

Yeah correct, shadow-xl sets the color so you need to add any color override explicitly with the same conditions you use to apply a different shadow size.

This is similar to how text-sm leading-9 md:text-lg doesn't preserve leading-9 because md:text-lg overrides the line-height back to the default line-height for that font size utility.

Going to close this one since this is by design 👍

from tailwindcss.

I can confirm this applies to other variants as well. sm:shadow-lg isn't applying either.

from tailwindcss.

Just opened the Play and when I hover the shadow appears:

It's not red, maybe that's what you mean? That's because the shadow size classes all reset the shadow back to their default color, by design at least at the moment because otherwise there's no way to get the default color back once you change it.

from tailwindcss.

Interesting. I'm surprised I've never run into that before. I work with shadows a bunch 😄

@adamwathan Would the best practice then be to apply both the size and color to every state you want to affect, so in this case, hover:shadow-red-500 hover:shadow-xl?

This works, I just want to make sure there's no better work around to having the shadow color pre-applied so we can trigger the size when needed.

For example, this would be my naturally expected API (before today), if I needed to cover a lot of states:

<div class="
    hover:shadow-xl
    active:shadow-xl
    focus:shadow-xl
    
    shadow-red-500
"></div>

But it looks like we would need to cover both properties for each— is that right? (https://play.tailwindcss.com/P5s42RqtPS)

<div class="
    hover:shadow-xl hover:shadow-red-500
    active:shadow-xl active:shadow-red-500
    focus:shadow-xl focus:shadow-red-500
"></div>

I can work with this. I just want to make sure that I'm getting this right before committing that to memory lol

from tailwindcss.

@adamwathan Sweet, thanks for clarifying that

from tailwindcss.