Description
What version of Tailwind CSS are you using?
v3.3.3
What build tool (or framework if it abstracts the build tool) are you using?
Nuxt v3.7.4
What version of Node.js are you using?
v18.18.0
What browser are you using?
Arc (Chrome)
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/pnRPGYgQu1
Describe your issue
When I make a plugin creating variants with the same names as built-in ones (my intention is to replace the built-in ones with me own—I'll explain why in a moment) the custom variant doesn't always seem to always hide the built-in one in the IDE suggestions. This can be seen even in the playground.
My use case is to replace all built-in hover-related variants. To avoid hover styles from being applied when tapping on touch-enabled devices, I run a tiny custom utility script which watches mouse and touch events and adds a .hover class to the root <html> element only when the user seems to be using a mouse.
So then, when using the hover: variant, what I need is html.hover &:hover instead of the default &:hover.
As you can see at the playground link above, I add this plugin to my config:
plugin(({ addVariant }) => {
addVariant("hover", "html.hover &:hover");
addVariant("peer-hover", "html.hover .peer:hover ~ &");
addVariant("group-hover", "html.hover .group:hover &");
})But when I actually go to use the variant, I see this strange duplication:
What's odd is that the hover: built-in variant has been properly "replaced" with my custom one, but for the other two the built-in variants have not been removed from the list, although it seems my custom one is still be properly applied in the final CSS regardless of which option I choose from the list. Still, it'd be nice if this were a little more tidy.