Unable to change video size using prose-video:{utility}

[tiger-githubb]

What version of @tailwindcss/typography are you using?

v0.5.10

What version of Node.js are you using?

v18.17.1

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://github.com/tiger-githubb/Arisitide_KARBOU

Describe your issue

I'm in the process of testing your plugin, which I think will be great for my next projects.
Basically, I'm using it to render articles written in markdown from prismic's text editor.
I get correct rendering of all elements except the video, of course using prose-video:{utility} to customize it.

<div className="prose prose-lg prose-invert mt-6 w-full max-w-none md:mt-10 prose-video:w-full prose-video:h-96">
          <SliceZone slices={page.data.slices} components={components} />
        </div>

but unfortunately, no matter what modifications I've made, the video always remains in the same 200 x 200 px format.

The article is available in prod here : Testing all currently supported by @tailwindcss/typography

the complete code is available below, on line 42

https://github.com/tiger-githubb/Arisitide_KARBOU/blob/f472cba982e39ccafc49111a847ed3eebe21eca2/src/components/ContentBody.tsx#L42C12-L42C12

Why isn't it purged?

Thank you for developing an excellent plugin. Apart from the above problem, it works like a charm...

[adamwathan]

Hey! The issue is that prose-video:... target the HTML video element, and you are using a YouTube embed which is a div with an iframe inside of it:

You'll probably want to use an arbitrary variant to handle this situation:

https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

[tiger-githubb]

Thank you for your prompt reply. I'm going to try your solution and if it's good I'll close the issue.

[adamwathan]

Going to close this since everything is working as designed here either way and we try to be strict about using issues for genuine bugs 👍 Hope that suggestion helps though!