feat(site): tailwind demo variants for media element and use-media references

Bring the tailwind style support up to date with demos added on main since this branch was written: - html/tailwind and react/tailwind BasicUsage variants for the new media element references (background-video, cast-button, dash-video, hlsjs-video, mux-audio, mux-video, native-hls-video, simple-hls-video, simple-hls-audio-only) and the use-media reference, mirroring their css variants 1:1 - wire the new variants into the reference pages behind <StyleCase styles={["tailwind"]}> (react demos on the media element pages stay source-only, matching the css variants until #1343 lands) - sync the tooltip react tailwind demos with the Tooltip.Label change the css variants picked up in the meantime Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WD9APXrFDbbMEUZrR1imz3
2026-08-16 02:45:09 +00:00 · 2026-07-03 00:01:10 +00:00
parent 8e2ecba4c4
commit 876493f0f4
49 changed files with 570 additions and 4 deletions
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,5 @@
+<div class="grid aspect-video w-full">
+    <background-video
+        src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4"
+    ></background-video>
+</div>
@@ -0,0 +1 @@
+import '@videojs/html/media/background-video';
@@ -0,0 +1,9 @@
+import { BackgroundVideo } from '@videojs/react/media/background-video';
+
+export default function BasicUsage() {
+  return (
+    <div className="relative aspect-video w-full">
+      <BackgroundVideo src="https://stream.mux.com/601n4w1fq88NJiVpzvrQQeQfNnnjjfKMIN7dCGAEarTs/highest.mp4" />
+    </div>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,18 @@
+<video-player class="relative block">
+    <media-container>
+        <hlsjs-video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></hlsjs-video>
+        <media-cast-button
+            class="absolute right-2.5 bottom-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px] data-[availability=unsupported]:hidden"
+        >
+            <span class="hidden in-data-[cast-state=connected]:inline">Stop casting</span>
+            <span class="hidden not-in-data-[cast-state=connected]:inline">Start casting</span>
+        </media-cast-button>
+    </media-container>
+</video-player>
@@ -0,0 +1,3 @@
+import '@videojs/html/video/player';
+import '@videojs/html/media/hlsjs-video';
+import '@videojs/html/ui/cast-button';
@@ -0,0 +1,28 @@
+import { CastButton, createPlayer } from '@videojs/react';
+import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+import { videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <HlsJsVideo
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <CastButton
+          className="absolute right-2.5 bottom-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px] data-[availability=unsupported]:hidden"
+          render={(props, state) => (
+            <button {...props}>{state.castState === 'connected' ? 'Stop casting' : 'Start casting'}</button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,9 @@
+<media-container class="relative block aspect-video w-full">
+    <dash-video
+        src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd"
+        autoplay
+        muted
+        playsinline
+        loop
+    ></dash-video>
+</media-container>
@@ -0,0 +1,2 @@
+import '@videojs/html/media/container';
+import '@videojs/html/media/dash-video';
@@ -0,0 +1,14 @@
+import { DashVideo } from '@videojs/react/media/dash-video';
+
+export default function BasicUsage() {
+  return (
+    <DashVideo
+      className="aspect-video w-full"
+      src="https://dash.akamaized.net/akamai/streamroot/050714/Spring_4Ktest.mpd"
+      autoPlay
+      muted
+      playsInline
+      loop
+    />
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,9 @@
+<media-container class="relative block aspect-video w-full">
+    <hlsjs-video
+        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+        autoplay
+        muted
+        playsinline
+        loop
+    ></hlsjs-video>
+</media-container>
@@ -0,0 +1,2 @@
+import '@videojs/html/media/container';
+import '@videojs/html/media/hlsjs-video';
@@ -0,0 +1,14 @@
+import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
+
+export default function BasicUsage() {
+  return (
+    <HlsJsVideo
+      className="aspect-video w-full"
+      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+      autoPlay
+      muted
+      playsInline
+      loop
+    />
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,6 @@
+<mux-audio
+    class="h-13.5 w-full"
+    src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+    crossorigin="anonymous"
+    controls
+></mux-audio>
@@ -0,0 +1 @@
+import '@videojs/html/media/mux-audio';
@@ -0,0 +1,12 @@
+import { MuxAudio } from '@videojs/react/media/mux-audio';
+
+export default function BasicUsage() {
+  return (
+    <MuxAudio
+      className="h-13.5 w-full"
+      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+      crossOrigin="anonymous"
+      controls
+    />
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,10 @@
+<media-container class="relative block aspect-video w-full">
+    <mux-video
+        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+        autoplay
+        muted
+        playsinline
+        loop
+        crossorigin="anonymous"
+    ></mux-video>
+</media-container>
@@ -0,0 +1,2 @@
+import '@videojs/html/media/container';
+import '@videojs/html/media/mux-video';
@@ -0,0 +1,15 @@
+import { MuxVideo } from '@videojs/react/media/mux-video';
+
+export default function BasicUsage() {
+  return (
+    <MuxVideo
+      className="aspect-video w-full"
+      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+      autoPlay
+      muted
+      playsInline
+      loop
+      crossOrigin="anonymous"
+    />
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,9 @@
+<media-container class="relative block aspect-video w-full">
+    <native-hls-video
+        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+        autoplay
+        muted
+        playsinline
+        loop
+    ></native-hls-video>
+</media-container>
@@ -0,0 +1,2 @@
+import '@videojs/html/media/container';
+import '@videojs/html/media/native-hls-video';
@@ -0,0 +1,14 @@
+import { NativeHlsVideo } from '@videojs/react/media/native-hls-video';
+
+export default function BasicUsage() {
+  return (
+    <NativeHlsVideo
+      className="aspect-video w-full"
+      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+      autoPlay
+      muted
+      playsInline
+      loop
+    />
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,5 @@
+<simple-hls-audio-only
+    class="h-13.5 w-full"
+    src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+    controls
+></simple-hls-audio-only>
@@ -0,0 +1 @@
+import '@videojs/html/media/simple-hls-audio-only';
@@ -0,0 +1,11 @@
+import { SimpleHlsAudioOnly } from '@videojs/react/media/simple-hls-audio-only';
+
+export default function BasicUsage() {
+  return (
+    <SimpleHlsAudioOnly
+      className="h-13.5 w-full"
+      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+      controls
+    />
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,9 @@
+<media-container class="relative block aspect-video w-full">
+    <simple-hls-video
+        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+        autoplay
+        muted
+        playsinline
+        loop
+    ></simple-hls-video>
+</media-container>
@@ -0,0 +1,2 @@
+import '@videojs/html/media/container';
+import '@videojs/html/media/simple-hls-video';
@@ -0,0 +1,14 @@
+import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video';
+
+export default function BasicUsage() {
+  return (
+    <SimpleHlsVideo
+      className="aspect-video w-full"
+      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
+      autoPlay
+      muted
+      playsInline
+      loop
+    />
+  );
+}
@@ -9,7 +9,7 @@ export default function BasicUsage() {
        </Tooltip.Trigger>
        <Tooltip.Popup className="pointer-events-none m-0 rounded-md border-0 bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]">
          <Tooltip.Arrow className="fill-black/85" />
-          Tooltip content
+          <Tooltip.Label>Tooltip content</Tooltip.Label>
        </Tooltip.Popup>
      </Tooltip.Root>
    </div>
@@ -10,7 +10,7 @@ export default function Grouping() {
          </Tooltip.Trigger>
          <Tooltip.Popup className="pointer-events-none m-0 rounded-md border-0 bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]">
            <Tooltip.Arrow className="fill-black/85" />
-            Play video
+            <Tooltip.Label>Play video</Tooltip.Label>
          </Tooltip.Popup>
        </Tooltip.Root>
        <Tooltip.Root>
@@ -19,7 +19,7 @@ export default function Grouping() {
          </Tooltip.Trigger>
          <Tooltip.Popup className="pointer-events-none m-0 rounded-md border-0 bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]">
            <Tooltip.Arrow className="fill-black/85" />
-            Mute audio
+            <Tooltip.Label>Mute audio</Tooltip.Label>
          </Tooltip.Popup>
        </Tooltip.Root>
        <Tooltip.Root>
@@ -28,7 +28,7 @@ export default function Grouping() {
          </Tooltip.Trigger>
          <Tooltip.Popup className="pointer-events-none m-0 rounded-md border-0 bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]">
            <Tooltip.Arrow className="fill-black/85" />
-            Enter fullscreen
+            <Tooltip.Label>Enter fullscreen</Tooltip.Label>
          </Tooltip.Popup>
        </Tooltip.Root>
      </Tooltip.Provider>
@@ -0,0 +1,53 @@
+import { createPlayer, isMediaSourceCapable, isMediaVideoDimensionsCapable } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({
+  features: videoFeatures,
+});
+
+function MediaInfo() {
+  const media = Player.useMedia();
+
+  if (!media) return null;
+
+  return (
+    <dl className="m-0 flex flex-col gap-1 border-t border-black/10 bg-black/5 p-3 text-[13px]">
+      {isMediaSourceCapable(media) && (
+        <div className="flex gap-2">
+          <dt className="min-w-20 text-gray-500">src</dt>
+          <dd className="m-0 truncate tabular-nums">{media.currentSrc || '—'}</dd>
+        </div>
+      )}
+      {isMediaVideoDimensionsCapable(media) && (
+        <>
+          <div className="flex gap-2">
+            <dt className="min-w-20 text-gray-500">videoWidth</dt>
+            <dd className="m-0 truncate tabular-nums">{media.videoWidth}px</dd>
+          </div>
+          <div className="flex gap-2">
+            <dt className="min-w-20 text-gray-500">videoHeight</dt>
+            <dd className="m-0 truncate tabular-nums">{media.videoHeight}px</dd>
+          </div>
+        </>
+      )}
+    </dl>
+  );
+}
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MediaInfo />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -20,12 +20,17 @@ import Tr from "@/components/typography/Tr.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/background-video/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/background-video/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/background-video/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/background-video/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/background-video/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/background-video/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/background-video/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/background-video/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.ts?raw";

 Decorative background video. By default it's muted, looped, and autoplaying — use the opt-out attributes below to change that. Renders a `<video>` inside a shadow DOM, positioned to fill its container.

@@ -42,6 +47,13 @@ Decorative background video. By default it's muted, looped, and autoplaying —
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <BasicUsageDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -54,6 +66,14 @@ Decorative background video. By default it's muted, looped, and autoplaying —
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 ## API Reference
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/cast-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/cast-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/cast-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/cast-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/cast-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/cast-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/cast-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/cast-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/cast-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/cast-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts?raw";

 ## Anatomy

@@ -100,6 +105,13 @@ Override with the `label` prop. Keyboard activation: <kbd>Enter</kbd> / <kbd>Spa
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <BasicUsageDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -112,6 +124,14 @@ Override with the `label` prop. Keyboard activation: <kbd>Enter</kbd> / <kbd>Spa
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="CastButton" />
@@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs";
 import ServerCode from "@/components/Code/ServerCode.astro";
 import basicUsageReactTsx from "@/components/docs/demos/dash-video/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/dash-video/react/css/BasicUsage.css?raw";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/dash-video/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/dash-video/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/dash-video/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/dash-video/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/dash-video/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/dash-video/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts?raw";

 DASH video element powered by [dash.js](https://github.com/Dash-Industry-Forum/dash.js/) for MPEG-DASH adaptive bitrate streaming.

@@ -44,6 +48,16 @@ DASH video element powered by [dash.js](https://github.com/Dash-Industry-Forum/d
      </TabsPanel>
    </TabsRoot>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <TabsRoot client:idle>
+      <TabsList client:idle label="Basic usage source code">
+        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
+      </TabsList>
+      <TabsPanel client:idle value="App.tsx" initial>
+        <ServerCode code={basicUsageReactTailwindTsx} lang="tsx" />
+      </TabsPanel>
+    </TabsRoot>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -56,6 +70,14 @@ DASH video element powered by [dash.js](https://github.com/Dash-Industry-Forum/d
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <MediaReference media="DashVideo" />
@@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs";
 import ServerCode from "@/components/Code/ServerCode.astro";
 import basicUsageReactTsx from "@/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/hlsjs-video/react/css/BasicUsage.css?raw";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts?raw";

 HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming. It's the recommended choice for HLS playback: full feature support across every browser. For alternatives, see [NativeHlsVideo](/docs/framework/html/reference/native-hls-video/) (browser-native HLS) or [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/) (lightweight HLS).

@@ -44,6 +48,16 @@ HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for
      </TabsPanel>
    </TabsRoot>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <TabsRoot client:idle>
+      <TabsList client:idle label="Basic usage source code">
+        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
+      </TabsList>
+      <TabsPanel client:idle value="App.tsx" initial>
+        <ServerCode code={basicUsageReactTailwindTsx} lang="tsx" />
+      </TabsPanel>
+    </TabsRoot>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -56,6 +70,14 @@ HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <MediaReference media="HlsJsVideo" />
@@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs";
 import ServerCode from "@/components/Code/ServerCode.astro";
 import basicUsageReactTsx from "@/components/docs/demos/mux-audio/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/mux-audio/react/css/BasicUsage.css?raw";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/mux-audio/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/mux-audio/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/mux-audio/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/mux-audio/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/mux-audio/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/mux-audio/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts?raw";

 Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.

@@ -44,6 +48,16 @@ Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci
      </TabsPanel>
    </TabsRoot>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <TabsRoot client:idle>
+      <TabsList client:idle label="Basic usage source code">
+        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
+      </TabsList>
+      <TabsPanel client:idle value="App.tsx" initial>
+        <ServerCode code={basicUsageReactTailwindTsx} lang="tsx" />
+      </TabsPanel>
+    </TabsRoot>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -56,6 +70,14 @@ Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <MediaReference media="MuxAudio" />
@@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs";
 import ServerCode from "@/components/Code/ServerCode.astro";
 import basicUsageReactTsx from "@/components/docs/demos/mux-video/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/mux-video/react/css/BasicUsage.css?raw";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/mux-video/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/mux-video/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/mux-video/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/mux-video/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/mux-video/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/mux-video/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts?raw";

 Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.

@@ -44,6 +48,16 @@ Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci
      </TabsPanel>
    </TabsRoot>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <TabsRoot client:idle>
+      <TabsList client:idle label="Basic usage source code">
+        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
+      </TabsList>
+      <TabsPanel client:idle value="App.tsx" initial>
+        <ServerCode code={basicUsageReactTailwindTsx} lang="tsx" />
+      </TabsPanel>
+    </TabsRoot>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -56,6 +70,14 @@ Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <MediaReference media="MuxVideo" />
@@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs";
 import ServerCode from "@/components/Code/ServerCode.astro";
 import basicUsageReactTsx from "@/components/docs/demos/native-hls-video/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/native-hls-video/react/css/BasicUsage.css?raw";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts?raw";

 HLS video element that relies on the browser's native HLS support. Works on Safari and other browsers with built-in HLS playback. For cross-browser HLS support, use [HlsJsVideo](/docs/framework/html/reference/hlsjs-video/) instead.

@@ -44,6 +48,16 @@ HLS video element that relies on the browser's native HLS support. Works on Safa
      </TabsPanel>
    </TabsRoot>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <TabsRoot client:idle>
+      <TabsList client:idle label="Basic usage source code">
+        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
+      </TabsList>
+      <TabsPanel client:idle value="App.tsx" initial>
+        <ServerCode code={basicUsageReactTailwindTsx} lang="tsx" />
+      </TabsPanel>
+    </TabsRoot>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -56,6 +70,14 @@ HLS video element that relies on the browser's native HLS support. Works on Safa
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <MediaReference media="NativeHlsVideo" />
@@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs";
 import ServerCode from "@/components/Code/ServerCode.astro";
 import basicUsageReactTsx from "@/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.css?raw";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts?raw";

 Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/).

@@ -44,6 +48,16 @@ Audio-only HLS element that plays just the audio rendition of an HLS stream —
      </TabsPanel>
    </TabsRoot>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <TabsRoot client:idle>
+      <TabsList client:idle label="Basic usage source code">
+        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
+      </TabsList>
+      <TabsPanel client:idle value="App.tsx" initial>
+        <ServerCode code={basicUsageReactTailwindTsx} lang="tsx" />
+      </TabsPanel>
+    </TabsRoot>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -56,6 +70,14 @@ Audio-only HLS element that plays just the audio rendition of an HLS stream —
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <MediaReference media="SimpleHlsAudioOnly" />
@@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs";
 import ServerCode from "@/components/Code/ServerCode.astro";
 import basicUsageReactTsx from "@/components/docs/demos/simple-hls-video/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/simple-hls-video/react/css/BasicUsage.css?raw";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx?raw";

 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts?raw";

 Lightweight HLS video element optimized for minimal bundle size. For full hls.js feature support, use [HlsJsVideo](/docs/framework/html/reference/hlsjs-video/) instead.

@@ -44,6 +48,16 @@ Lightweight HLS video element optimized for minimal bundle size. For full hls.js
      </TabsPanel>
    </TabsRoot>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <TabsRoot client:idle>
+      <TabsList client:idle label="Basic usage source code">
+        <Tab client:idle value="App.tsx" initial>App.tsx</Tab>
+      </TabsList>
+      <TabsPanel client:idle value="App.tsx" initial>
+        <ServerCode code={basicUsageReactTailwindTsx} lang="tsx" />
+      </TabsPanel>
+    </TabsRoot>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -56,6 +70,14 @@ Lightweight HLS video element optimized for minimal bundle size. For full hls.js
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
+      { title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <BasicUsageDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <MediaReference media="SimpleHlsVideo" />
@@ -11,6 +11,8 @@ import StyleCase from "@/components/docs/StyleCase.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/use-media/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/use-media/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/use-media/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/use-media/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx?raw";

 `Player.useMedia` (from <DocsLink slug="reference/create-player">`createPlayer`</DocsLink>) returns the current `Media` object (or `null` if no media has been registered yet). `Media` is a runtime-agnostic playback interface — any instance that conforms to it, including an `HTMLVideoElement`, can be the media. It exposes capabilities like `play()` and event subscription rather than assuming a native element. It must be called within a `Player.Provider`. The media object becomes available after a `<Video>` or `<Audio>` component mounts inside the provider tree. To attach a custom media element instead of the built-in components, see <DocsLink slug="reference/use-media-attach">`useMediaAttach`</DocsLink>.

@@ -29,6 +31,15 @@ import basicUsageReactCss from "@/components/docs/demos/use-media/react/css/Basi
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
+      ]}
+    >
+      <BasicUsageDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <UtilReference util="useMedia" />
				`@@ -0,0 +1 @@`
				`import '@videojs/html/media/background-video';`
				`@@ -0,0 +1 @@`
				`import '@videojs/html/media/simple-hls-audio-only';`