Nested media query breaks hover-state detection/transformation #31410
Description
Tailwind v4 creates hover selectors, that look like this:
<p class="hover:text-red-500">Test</p>will generate this css:
@layer utilities {
.hover\:text-red-500 {
&:hover {
@media (hover: hover) {
color: var(--color-red-500);
}
}
}
}I would expect this to be transformed to
@layer utilities {
.hover\:text-red-500 {
&:hover, &.pseudo-hover, .pseudo-hover-all & {
@media (hover: hover) {
color: var(--color-red-500);
}
}
}
}but that does not seem to be happening. I’ve tracked it down to the nested media query, that seems to throw storybook-addon-pseudo-states off. Removing it works:
@layer utilities {
.hover\:text-red-500 {
&:hover {
color: var(--color-red-500);
}
}
}will be transformed to
@layer utilities {
.hover\:text-red-500 {
&:hover, &.pseudo-hover, .pseudo-hover-all & {
color: var(--color-red-500);
}
}
}