can we change style of HTML video <track> tag?

[MonaAghili]

Is there any way to apply color and font classes to the <track> tag using Tailwind to style the captions of a video? The only way to change the style via CSS is by using the ::cue pseudo-element. But I don't know if Tailwind provides a solution for this.

::cue {
  color: #ccc;
}

[wongjn]

You can use an arbitrary variant like:

<video class="[&::cue]:text-neutral-200">

Or add it as a variant in a custom Tailwind plugin.

[MonaAghili]

Thanks.
The text size class <video class="[&::cue]:text-xl"> works fine, but the classes [&::cue]:bg-white and [&::cue]:text-[#1E1E1E] aren't applying to the subtitle as expected.

[wongjn]

Using this as a test:

• In Firefox, seems to work fine:
  
• In Chrome, indeed seems broken:
  

After some experimenting, it seems to be the CSS variable usage tripping up Chrome. As a work-around, you could consider:

• Using arbitrary property classes: https://play.tailwindcss.com/Lcid5bU9dM
• Disabling backgroundOpacity and textOpacity core plugins to remove the CSS variable usage: https://play.tailwindcss.com/znOz48QoUw?file=config

[MonaAghili]

Oh thank you.

This approach seems to change the background, though it's not perfect, but it works.
https://play.tailwindcss.com/TdkHVY6O69