From c4af9832e8cafeb64b4f13516e95039d05ba50f4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 11 Jun 2026 22:57:09 +0000
Subject: [PATCH] feat(site): tailwind demo variants for remaining component
 references

Covers airplay-button, buffering-indicator, captions-button, controls,
playback-rate-button, poster, and popover.

Refs #840

https://claude.ai/code/session_01LUcwUd8E4Ekakp7NTFb6c5
---
 .../html/tailwind/BasicUsage.astro            |  9 +++++
 .../html/tailwind/BasicUsage.html             | 20 ++++++++++
 .../html/tailwind/BasicUsage.ts               |  2 +
 .../react/tailwind/BasicUsage.tsx             | 35 +++++++++++++++++
 .../html/tailwind/BasicUsage.astro            |  9 +++++
 .../html/tailwind/BasicUsage.html             | 14 +++++++
 .../html/tailwind/BasicUsage.ts               |  2 +
 .../react/tailwind/BasicUsage.tsx             | 30 +++++++++++++++
 .../html/tailwind/BasicUsage.astro            |  9 +++++
 .../html/tailwind/BasicUsage.html             | 20 ++++++++++
 .../html/tailwind/BasicUsage.ts               |  2 +
 .../react/tailwind/BasicUsage.tsx             | 29 ++++++++++++++
 .../controls/html/tailwind/BasicUsage.astro   |  9 +++++
 .../controls/html/tailwind/BasicUsage.html    | 32 ++++++++++++++++
 .../controls/html/tailwind/BasicUsage.ts      |  4 ++
 .../controls/react/tailwind/BasicUsage.tsx    | 38 +++++++++++++++++++
 .../html/tailwind/BasicUsage.astro            |  9 +++++
 .../html/tailwind/BasicUsage.html             | 14 +++++++
 .../html/tailwind/BasicUsage.ts               |  2 +
 .../react/tailwind/BasicUsage.tsx             | 25 ++++++++++++
 .../popover/html/tailwind/BasicUsage.astro    |  9 +++++
 .../popover/html/tailwind/BasicUsage.html     | 27 +++++++++++++
 .../demos/popover/html/tailwind/BasicUsage.ts |  2 +
 .../popover/react/tailwind/BasicUsage.tsx     | 32 ++++++++++++++++
 .../poster/html/tailwind/BasicUsage.astro     |  9 +++++
 .../poster/html/tailwind/BasicUsage.html      | 25 ++++++++++++
 .../demos/poster/html/tailwind/BasicUsage.ts  |  3 ++
 .../poster/react/tailwind/BasicUsage.tsx      | 28 ++++++++++++++
 .../content/docs/reference/airplay-button.mdx | 20 ++++++++++
 .../docs/reference/buffering-indicator.mdx    | 20 ++++++++++
 .../docs/reference/captions-button.mdx        | 20 ++++++++++
 site/src/content/docs/reference/controls.mdx  | 20 ++++++++++
 .../docs/reference/playback-rate-button.mdx   | 20 ++++++++++
 site/src/content/docs/reference/popover.mdx   | 20 ++++++++++
 site/src/content/docs/reference/poster.mdx    | 20 ++++++++++
 35 files changed, 589 insertions(+)
 create mode 100644 site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/airplay-button/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/captions-button/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/controls/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/controls/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/controls/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/controls/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/popover/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/popover/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/popover/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/popover/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/poster/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/poster/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/poster/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/poster/react/tailwind/BasicUsage.tsx

diff --git a/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..b65846d8
--- /dev/null
+++ b/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.html
@@ -0,0 +1,20 @@
+<video-player class="relative block">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-airplay-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=unavailable]:cursor-not-allowed data-[availability=unavailable]:opacity-50 data-[availability=unavailable]:grayscale data-[availability=unsupported]:cursor-not-allowed data-[availability=unsupported]:opacity-50 data-[availability=unsupported]:grayscale"
+        >
+            <span class="hidden in-data-[airplay-state=connected]:inline">Stop AirPlay</span>
+            <span class="hidden in-data-[availability=available]:not-in-data-[airplay-state=connected]:inline">Start AirPlay</span>
+            <span class="hidden in-data-[availability=unavailable]:inline">No AirPlay devices found</span>
+            <span class="hidden in-data-[availability=unsupported]:inline">AirPlay not supported</span>
+        </media-airplay-button>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..14879a23
--- /dev/null
+++ b/site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/airplay-button';
diff --git a/site/src/components/docs/demos/airplay-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/airplay-button/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..6e4f8923
--- /dev/null
+++ b/site/src/components/docs/demos/airplay-button/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,35 @@
+import { AirPlayButton, createPlayer } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+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
+        />
+        <AirPlayButton
+          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=unavailable]:cursor-not-allowed data-[availability=unavailable]:opacity-50 data-[availability=unavailable]:grayscale data-[availability=unsupported]:cursor-not-allowed data-[availability=unsupported]:opacity-50 data-[availability=unsupported]:grayscale"
+          render={(props, state) => {
+            const label =
+              state.availability === 'unsupported'
+                ? 'AirPlay not supported'
+                : state.state === 'connected'
+                  ? 'Stop AirPlay'
+                  : state.availability === 'unavailable'
+                    ? 'No AirPlay devices found'
+                    : 'Start AirPlay';
+            return <button {...props}>{label}</button>;
+          }}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..42e3c8d8
--- /dev/null
+++ b/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.html
@@ -0,0 +1,14 @@
+<video-player class="relative flex h-full w-full">
+    <media-container>
+        <video
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-buffering-indicator class="pointer-events-none absolute inset-0 z-30 flex items-center justify-center">
+            <div class="hidden size-12 animate-spin rounded-full border-4 border-white/30 border-t-white [animation-duration:0.8s] in-data-visible:block"></div>
+        </media-buffering-indicator>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..c28dcd98
--- /dev/null
+++ b/site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/buffering-indicator';
diff --git a/site/src/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..014cbd7f
--- /dev/null
+++ b/site/src/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,30 @@
+import { BufferingIndicator, createPlayer } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative flex h-full w-full">
+        <Video
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <BufferingIndicator
+          className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center"
+          render={(props, state) => (
+            <div {...props}>
+              {state.visible && (
+                <div className="hidden size-12 animate-spin rounded-full border-4 border-white/30 border-t-white [animation-duration:0.8s] in-data-visible:block" />
+              )}
+            </div>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..55f75a72
--- /dev/null
+++ b/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.html
@@ -0,0 +1,20 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        >
+            <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srclang="en" label="English" />
+        </video>
+        <media-captions-button
+            class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+        >
+            <span class="hidden in-data-active:inline">Captions Off</span>
+            <span class="hidden not-in-data-active:inline">Captions On</span>
+        </media-captions-button>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..dbbd8dcd
--- /dev/null
+++ b/site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/captions-button';
diff --git a/site/src/components/docs/demos/captions-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/captions-button/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..c954e308
--- /dev/null
+++ b/site/src/components/docs/demos/captions-button/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,29 @@
+import { CaptionsButton, createPlayer } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+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
+        >
+          <track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
+        </Video>
+        <CaptionsButton
+          className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => (
+            <button {...props}>{state.subtitlesShowing ? 'Captions Off' : 'Captions On'}</button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..cd78a96a
--- /dev/null
+++ b/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.html
@@ -0,0 +1,32 @@
+<video-player class="relative block">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+
+        <media-controls
+            class="pointer-events-none absolute inset-0 flex items-end bg-linear-to-t from-black/45 to-transparent to-45% p-3 transition-opacity duration-250 not-data-visible:opacity-0"
+        >
+            <media-controls-group
+                class="pointer-events-auto flex w-full items-center justify-between"
+                aria-label="Playback controls"
+            >
+                <media-play-button
+                    class="cursor-pointer rounded-full border border-white/25 bg-white/75 px-4 py-2 text-sm text-black backdrop-blur-[10px]"
+                >
+                    <span class="hidden in-data-paused:inline">Play</span>
+                    <span class="hidden not-in-data-paused:inline">Pause</span>
+                </media-play-button>
+                <media-time
+                    class="inline-flex items-center gap-1 rounded-full border border-white/25 bg-white/75 px-4 py-2 text-sm text-black backdrop-blur-[10px]"
+                    type="current"
+                ></media-time>
+            </media-controls-group>
+        </media-controls>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..f1eee5ec
--- /dev/null
+++ b/site/src/components/docs/demos/controls/html/tailwind/BasicUsage.ts
@@ -0,0 +1,4 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/controls';
+import '@videojs/html/ui/play-button';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/controls/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/controls/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..9e9fcc26
--- /dev/null
+++ b/site/src/components/docs/demos/controls/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,38 @@
+import { Controls, createPlayer, PlayButton, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+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
+        />
+
+        <Controls.Root className="pointer-events-none absolute inset-0 flex items-end bg-linear-to-t from-black/45 to-transparent to-45% p-3 transition-opacity duration-250 not-data-visible:opacity-0">
+          <Controls.Group
+            className="pointer-events-auto flex w-full items-center justify-between"
+            aria-label="Playback controls"
+          >
+            <PlayButton
+              className="cursor-pointer rounded-full border border-white/25 bg-white/75 px-4 py-2 text-sm text-black backdrop-blur-[10px]"
+              render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
+            />
+
+            <Time.Value
+              type="current"
+              className="inline-flex items-center gap-1 rounded-full border border-white/25 bg-white/75 px-4 py-2 text-sm text-black backdrop-blur-[10px]"
+            />
+          </Controls.Group>
+        </Controls.Root>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..e5f217ca
--- /dev/null
+++ b/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.html
@@ -0,0 +1,14 @@
+<video-player class="relative">
+    <video
+        class="w-full"
+        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+        autoplay
+        muted
+        playsinline
+        loop
+    ></video>
+    <media-playback-rate-button
+        class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px] after:content-[attr(data-rate)_'×']"
+    >
+    </media-playback-rate-button>
+</video-player>
diff --git a/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..6f30f8d6
--- /dev/null
+++ b/site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/playback-rate-button';
diff --git a/site/src/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..8525f023
--- /dev/null
+++ b/site/src/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, PlaybackRateButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+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
+        />
+        <PlaybackRateButton
+          className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => <button {...props}>{Math.round(state.rate * 10) / 10}&times;</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..22d26768
--- /dev/null
+++ b/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.html
@@ -0,0 +1,27 @@
+<video-player class="relative block">
+    <media-container class="relative block">
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <div class="absolute bottom-2.5 left-2.5">
+            <button
+                type="button"
+                commandfor="popover-demo"
+                class="cursor-pointer rounded-full border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]"
+            >Settings</button>
+            <media-popover
+                id="popover-demo"
+                class="rounded-lg bg-black/85 px-4 py-3 text-sm whitespace-nowrap text-white backdrop-blur-[10px]"
+            >
+                <div>
+                    Popover content
+                </div>
+            </media-popover>
+        </div>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..5f95baa6
--- /dev/null
+++ b/site/src/components/docs/demos/popover/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/popover';
diff --git a/site/src/components/docs/demos/popover/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/popover/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..8d5ae14a
--- /dev/null
+++ b/site/src/components/docs/demos/popover/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,32 @@
+import { createPlayer, Popover } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+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
+        />
+        <div className="absolute bottom-2.5 left-2.5">
+          <Popover.Root>
+            <Popover.Trigger className="cursor-pointer rounded-full border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]">
+              Settings
+            </Popover.Trigger>
+            <Popover.Popup className="m-0 rounded-lg border-0 bg-black/85 px-4 py-3 text-sm text-white backdrop-blur-[10px] [--media-popover-side-offset:8px]">
+              <Popover.Arrow className="fill-black/85" />
+              <div className="whitespace-nowrap">Popover content</div>
+            </Popover.Popup>
+          </Popover.Root>
+        </div>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.astro
@@ -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>
diff --git a/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..c0d97b59
--- /dev/null
+++ b/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.html
@@ -0,0 +1,25 @@
+<!-- biome-ignore-all lint/a11y/useMediaCaption: TODO -->
+<video-player class="relative block">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            playsinline
+        ></video>
+
+        <media-poster class="pointer-events-none absolute inset-0 transition-opacity duration-250 not-data-visible:opacity-0">
+            <img
+                class="h-full w-full object-cover"
+                src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
+                alt="Video thumbnail"
+            />
+        </media-poster>
+
+        <media-play-button
+            class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/25 bg-white/75 px-4 py-2 text-black backdrop-blur-[10px]"
+        >
+            <span class="hidden in-data-paused:inline">Play</span>
+            <span class="hidden not-in-data-paused:inline">Pause</span>
+        </media-play-button>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..72060f9f
--- /dev/null
+++ b/site/src/components/docs/demos/poster/html/tailwind/BasicUsage.ts
@@ -0,0 +1,3 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/play-button';
+import '@videojs/html/ui/poster';
diff --git a/site/src/components/docs/demos/poster/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/poster/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..2ed2f7bc
--- /dev/null
+++ b/site/src/components/docs/demos/poster/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,28 @@
+import { createPlayer, PlayButton, Poster } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          playsInline
+        />
+
+        <Poster
+          className="pointer-events-none absolute inset-0 h-full w-full object-cover transition-opacity duration-250 not-data-visible:opacity-0"
+          src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
+        />
+
+        <PlayButton
+          className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/25 bg-white/75 px-4 py-2 text-black backdrop-blur-[10px]"
+          render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/content/docs/reference/airplay-button.mdx b/site/src/content/docs/reference/airplay-button.mdx
index 3e8bacf0..0ea33d37 100644
--- a/site/src/content/docs/reference/airplay-button.mdx
+++ b/site/src/content/docs/reference/airplay-button.mdx
@@ -15,12 +15,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/airplay-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/airplay-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/airplay-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/airplay-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/airplay-button/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/airplay-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/airplay-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/airplay-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/airplay-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/airplay-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/airplay-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/airplay-button/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -110,6 +115,13 @@ Renders a `<button>` with an automatic `aria-label`: "Start AirPlay" when discon
       <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"]}>
@@ -122,6 +134,14 @@ Renders a `<button>` with an automatic `aria-label`: "Start AirPlay" when discon
       <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="AirPlayButton" />
diff --git a/site/src/content/docs/reference/buffering-indicator.mdx b/site/src/content/docs/reference/buffering-indicator.mdx
index 857671b2..fc882b5e 100644
--- a/site/src/content/docs/reference/buffering-indicator.mdx
+++ b/site/src/content/docs/reference/buffering-indicator.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/buffering-indicator/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/buffering-indicator/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/buffering-indicator/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/buffering-indicator/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/buffering-indicator/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/buffering-indicator/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -56,6 +61,13 @@ Hide and show the indicator based on the `data-visible` attribute.
       <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"]}>
@@ -68,6 +80,14 @@ Hide and show the indicator based on the `data-visible` attribute.
       <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="BufferingIndicator" />
diff --git a/site/src/content/docs/reference/captions-button.mdx b/site/src/content/docs/reference/captions-button.mdx
index a541fc91..17898793 100644
--- a/site/src/content/docs/reference/captions-button.mdx
+++ b/site/src/content/docs/reference/captions-button.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/captions-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/captions-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/captions-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/captions-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/captions-button/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/captions-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/captions-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/captions-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/captions-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/captions-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/captions-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/captions-button/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -75,6 +80,13 @@ Renders a `<button>` with an automatic `aria-label`: "Disable captions" when act
       <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"]}>
@@ -87,6 +99,14 @@ Renders a `<button>` with an automatic `aria-label`: "Disable captions" when act
       <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="CaptionsButton" />
diff --git a/site/src/content/docs/reference/controls.mdx b/site/src/content/docs/reference/controls.mdx
index 827aedc7..e25fa50b 100644
--- a/site/src/content/docs/reference/controls.mdx
+++ b/site/src/content/docs/reference/controls.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/controls/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/controls/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/controls/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/controls/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/controls/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/controls/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/controls/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/controls/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/controls/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/controls/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/controls/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/controls/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -121,6 +126,13 @@ No ARIA role is applied to `Controls.Root` — it is a layout wrapper, not a lan
       <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"]}>
@@ -135,6 +147,14 @@ No ARIA role is applied to `Controls.Root` — it is a layout wrapper, not a lan
       <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="Controls" />
diff --git a/site/src/content/docs/reference/playback-rate-button.mdx b/site/src/content/docs/reference/playback-rate-button.mdx
index 5095c60b..2b479012 100644
--- a/site/src/content/docs/reference/playback-rate-button.mdx
+++ b/site/src/content/docs/reference/playback-rate-button.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/playback-rate-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/playback-rate-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/playback-rate-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/playback-rate-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/playback-rate-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/playback-rate-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -78,6 +83,13 @@ Renders a `<button>` with an automatic `aria-label` of `"Playback rate {rate}"`
       <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"]}>
@@ -90,6 +102,14 @@ Renders a `<button>` with an automatic `aria-label` of `"Playback rate {rate}"`
       <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="PlaybackRateButton" />
diff --git a/site/src/content/docs/reference/popover.mdx b/site/src/content/docs/reference/popover.mdx
index 82e438ab..3a8681cf 100644
--- a/site/src/content/docs/reference/popover.mdx
+++ b/site/src/content/docs/reference/popover.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/popover/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/popover/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/popover/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/popover/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/popover/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/popover/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/popover/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/popover/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/popover/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/popover/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/popover/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/popover/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -137,6 +142,13 @@ The trigger receives `aria-expanded` reflecting the open state. When `modal` is
       <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"]}>
@@ -151,6 +163,14 @@ The trigger receives `aria-expanded` reflecting the open state. When `modal` is
       <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="Popover" />
diff --git a/site/src/content/docs/reference/poster.mdx b/site/src/content/docs/reference/poster.mdx
index 1b82e8a7..4e5ec64d 100644
--- a/site/src/content/docs/reference/poster.mdx
+++ b/site/src/content/docs/reference/poster.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/poster/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/poster/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/poster/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/poster/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/poster/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/poster/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/poster/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/poster/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/poster/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/poster/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/poster/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/poster/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -86,6 +91,13 @@ Unlike the native `<video poster>` attribute, this component allows you to provi
       <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"]}>
@@ -100,6 +112,14 @@ Unlike the native `<video poster>` attribute, this component allows you to provi
       <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="Poster" />