Tailwind CSS - Parent style when child is hovered
So, I need to have a parent styled (background to blue) only when a child element is hovered.
I've done this with Javascript, toggling class .hovered on parent upon hovering the child.
Is there a better way to do this on tailwind css? Or another question is, with my solution, how do I implement tailwind? Right now Im using @apply to style children with .hovered on parent.
But I'm aware that using @apply is not the best practice.
Anyone help? Any tips?
20 Replies
Why not just write css you don't need to use apply xD
but you can use this ig
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
If you wanan do the TW way >.>;;
Also they are changing this in v4.... hopefully for the better.
mmm maybe this
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-descendants
one those things
Yes, as b1mind has already linked, you can use :has().
In Tailwind this can be achieved like this:
has-[:hover]:bg-green-300
If you need it only when hovering on a specific element you can define the specific selector: has-[&>p:hover]:bg-green-300I think @apply and writing plain old css is the same. I want to avoid using separate stylesheets.
Okay, I'll try :has. Thanks for the response. I'll update here on how it goes.
I'm not really sure why
group does work for me. Shouldn't this work?
group-hover is for changing a child element when the parent "group" gets the hover.
So, your code would change the text of the <p> (ie the child element) when you hover on the <section>.
If you want the parent (eg your <section>) to change when you hover on a child (your <p>) you need to use :has()
Something like this:
Thank you, but what if I want a specific class to be checked if it's hovered, does it go like this?
Right now, I really hate how I did it because I wrote things in my css stylesheet for this ;_; Thank you for the response.
yes, that should work
Thank you, I'll give it a try later. Do I have any prequisites or setups I should do, or does this work out of the box? Im using tailwind 3.4.4
In Tailwind you can basically put any "normal" CSS within the square brackets. Just remember to user an underscore "_" for spaces.
I use this square-bracket method a lot when using Tailwind to avoid repeating the same code on multiple children. I just place it once on the parent and keep the children Tailwind free 😆 I know that when using components this isn't so much of an issue but I still prefer it.
To be honest I don't know.
As the :has() selector is relatively new, I don't know when Tailwind added the "has-" syntax.
If it doesn't work in that particular version you can always use it within the square-brackets to have the same effect:
[&:has(.content:hover)]:text-primary
Bear in mind that, as I say, :has() is relatively new and some browsers may still not support it, even if Tailwind does.
a quick check in the Tailwind site and I see that it does support has- since version 3.4: https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.0Thank you.
And wow, I just realized :has is a plain css selector. I've searched it and it's amazing. I didnt have this the last timr I worked with css.
Thank you so much for the help. This is what I exactly needed.
I just dont understand right now why
group and group-hover: doesnt work in my code
As I need it tooWhat do you expect group-hover to do?
In my opinion
:has() is the single best thing to be added to CSS since custom properties. You can keep your nesting and container queries - :has() has just opened up a complete new range of possibilities.I hover on the the parent and it applies style to the selected children. Even without hovering it directly.
I completely agree. I was mind blown that we can do that now.
Right now, what Im only thinking if it has enough support and is safe to use.
(and nesting is probably my least favorite addition. In my opinion it just makes the code so much harder to follow)
:has() is now at 92%. https://caniuse.com/?search=%3Ahas()
It should do that without any issues.
Try testing it with a different property, maybe there is a style conflict - you mentioned that you also use a style sheet.
What is "text-primary"?
(ie. how/where is it defined and what styles does it define)
Oh yeah, now that you mentioned it. I tried this and it worked:
but this doesn't work
text-primary is a color I set up in my tailwind.config.js
It's already working but I'm not sure why it does not work for group-hover
This works:
I have just set up the same thing as a quick test and it worked for me 🤔
Hmmm, it's weird.
This doesn't work also
<p class="text-4xl hover:text-2xl">Dummy Content</p>
Maybe there's a problem in my tailwindyes, that could be the issue. You aren't doing anything strange here so it really should just work.
Oh... I just resetted my config.js
and it worked, ok, now I can pinpoint where that bug is coming from
It's weird.
When I put back my configuration it's now working. With no changes from earlier.
Hmmm, it's really weird. But anyway, my main question has been answered and even will help out my overall writing with :has.
Thank you so much for introducing it to me.
It's not the same @apply is bad performance or something and shouldn't be used no?.. Looks like you got it figured out.
I have never used @apply. When I started learning Tailwind last year I was advised that it was bad practice and that Tailwind was going to stop supporting it so I never even looked into it.
Yea Adam said himself that was really added to try and ease the people into tw naming while letting them use classes... And was a mistake 😂
We call that a rope a dope