-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Group:hover with @apply #2848
Comments
You could always write it like this and get rid of the .sidemenu {
@apply group rounded-md px-3 py-2 flex items-center font-medium;
}
.sidemenu:hover {
@apply text-gray-900 bg-gray-50;
}
.sidemenu:hover .sidemenu-icon {
@apply text-gray-500;
}
.sidemenu--settings {
@apply text-sm text-gray-900 ;
}
.sidemenu-icon {
@apply flex-shrink-0 -ml-1 mr-3 h-6 w-6 text-gray-400;
} |
Hey! I would suggest you don't use
When you you abstract away the .sidemenu:hover .group-hover\:text-gray-900 {
--tw-text-opacity: 1;
color: rgba(17, 24, 39, var(--tw-text-opacity));
} Basically, it says:
If the In your case, you're trying to abstract that classname inside of a That means the If you really want to abstract away the group-hover, I would most definitely use the In this example, I have just removed the https://play.tailwindcss.com/jiY9Zd7JZo Hope it helps! 👍 |
Thanks for your detailed answer, I really appreciate it. I have not yet considered all permutations that are created this way 😅 So I will go the safe way now and abstract only the basic stuff and put the fancy group and group-hover classes in html directly. Thx again! 👍 |
So... basically using classic CSS I have no problem with this, however does this still suffer some kind of TW performance hit? I do use |
Unfortunately group:hover stops working when I put it in my application.css with @apply. (no .group-hover:text-gray-500 pseudo class is set in the browser) When I put "group-hover" back into html everything works as it should. (even if the parent "group" element stays in my application.css)
Working & non working example:
https://play.tailwindcss.com/UbhcO0YBp2?file=css
Do I misunderstand or oversee here something? Thx in advance!
The text was updated successfully, but these errors were encountered: