Adding custom variants using addVariant without the important selector being prefixed?

[owaiswiz]

We use tailwind with important: 'html body .tw' (because we are migrating away from a different framework).

One use case we have is styling things based on a class set on the html/body.

Variants are a perfect solution for this but there's no way to create a variant without the important selector getting prefixed.

1. Our example use-case adds an .inside-iframe to the html element when the current page is inside an iframe.
2. We have a custom variant called iframe that'd ideally generate classes like .inside-iframe .iframe:py-2 {.......} and we'd use it like <div class='py-8 iframe:py-2'>.

However, currently this seems impossible, as tailwind always generates classes with the important selector prefix (i.e html body .tw .inside-iframe iframe:py-2 {........}

Not sure if I am missing something here, but I've glanced at the tailwind documentation & source code and I don't seem to find a way.

[owaiswiz]

And this might also have consequences for dark mode.

I see tailwind's dark mode also uses the addVariant API.

I expect people would be unable to use dark mode if they are using a selector in important and want to target dark mode using a class on the html/body element.

[owaiswiz]

Here's a quick hack I am using for now to make variants respect options like respectImportant: owaiswiz@297a002

Not sure if it's okay/good enough to open a PR though. But happy too.

[wongjn]

You could use :is() or :where() in the selector to work-around the prefixing:

addVariant('iframe', '&:is(.inside-iframe *)');

Would result in:

html body .tw .iframe\:py-2:is(.inside-iframe *) {

[owaiswiz]

Probably, but those don't have the browser support I'd like yet.

[owaiswiz]

I guess it's acceptable if I also support the :webkit-any prefix. I think that's definitely better than patching things on my own. Thanks!