Selecting `<i>` element and styling with `@apply` using `set:html`

[atomic river]

I am using a Git CMS that returns plain HTML in a JSON file.

{
  "text": "<i>Hello</i> World"
}

I am inserting the HTML strings with the set:html template directive.

<h1 set:html={html}></h1>

When I am trying to select the <i>tag using the @apply method with the tailwind integration the styling is not working.

<style>
  h1 i {
    @apply text-red-500;
  }
</style>

I created a demo that shows the issue:
https://stackblitz.com/edit/github-tjp1qz?file=src/pages/index.astro

[dawn current]

Scoped <style> tags can't style elements from set:html, to get around this you can try using is:global or a global styling pattern like this: #1074730174530195537 message
is:global docs: https://docs.astro.build/en/reference/directives-reference/#isglobal