Using custom variants in utilities with important feature

[jarosan]

What version of Tailwind CSS are you using?

3.0.24

What build tool (or framework if it abstracts the build tool) are you using?

postcss-cli 9.1.0

What version of Node.js are you using?

16

Reproduction URL

https://play.tailwindcss.com/WxwCNZmQFX

Describe your issue

I want to setup custom variant for the webpage if it is loaded inside the iframe.

When using this custom variant together with important: '#csc-app' feature it produces different selectors if the classes are defined in the html or in the utilities.

If the variant is used in the html then .usage-variant_iframe selector comes after the important selector:

#csc-app .usage-variant_iframe .iframe\:text-sm

If the variant is used in the utility then .usage-variant_iframe selector comes before the important selector:

.usage-variant_iframe #csc-app .custom-utility

As a work around i'm adding the .usage-variant_iframe twice right now. Once before the #csc-app div and second time after, but it would be great if this can be consistent.

[adamwathan]

Hey! What do you mean by “if the variant is used in the HTML” and “if the variant is used in the utility”? Can you give examples of each so I understand for sure?

[jarosan]

I should've been more clear 😄

By html i mean using variant like so <p class="text-2xl iframe:text-sm">. I define standard text size, and then override it for the iframe variant.

By utility i mean first defining your custom utility so:

@layer utilities {
  .custom-utility {
    @apply text-red-900 iframe:text-blue-900;
  }
}

And then using it like this <p class="custom-utility">

It is also in the playground https://play.tailwindcss.com/WxwCNZmQFX

If you take a look at the generated css for the example above then we get:

.usage-variant_iframe #csc-app .custom-utility {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity));
}

#csc-app .usage-variant_iframe .iframe\:text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

[thecrypticace]

Hey! Thanks for clarifying. This issue also applies when using things like group-hover: since they modify the selector in a similar-ish way. I've addressed this in #8313. If you want to try the fix out now it's in our insiders build which you can install by doing: npm install tailwindcss@insiders

Thanks again! 🎉

[jarosan]

Hello. I've confirmed that this is resolved when using the latest insiders build 🥳

Thanks a lot for your help!