From 30292c326a64ed53bf78c28734a3fa52a9005514 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 11 Jun 2026 22:54:11 +0000
Subject: [PATCH] feat(site): tailwind demo variants for button, time, and
 slider references

Refs #840

https://claude.ai/code/session_01LUcwUd8E4Ekakp7NTFb6c5
---
 .../html/tailwind/BasicUsage.astro            |   9 ++
 .../html/tailwind/BasicUsage.html             |  18 ++++
 .../html/tailwind/BasicUsage.ts               |   2 +
 .../react/tailwind/BasicUsage.tsx             |  25 +++++
 .../html/tailwind/BasicUsage.astro            |   9 ++
 .../mute-button/html/tailwind/BasicUsage.html |  18 ++++
 .../mute-button/html/tailwind/BasicUsage.ts   |   2 +
 .../html/tailwind/VolumeLevels.astro          |   9 ++
 .../html/tailwind/VolumeLevels.html           |  20 ++++
 .../mute-button/html/tailwind/VolumeLevels.ts |   2 +
 .../mute-button/react/tailwind/BasicUsage.tsx |  25 +++++
 .../react/tailwind/VolumeLevels.tsx           |  35 ++++++
 .../pip-button/html/tailwind/BasicUsage.astro |   9 ++
 .../pip-button/html/tailwind/BasicUsage.html  |  18 ++++
 .../pip-button/html/tailwind/BasicUsage.ts    |   2 +
 .../pip-button/react/tailwind/BasicUsage.tsx  |  25 +++++
 .../html/tailwind/BasicUsage.astro            |   9 ++
 .../play-button/html/tailwind/BasicUsage.html |  18 ++++
 .../play-button/html/tailwind/BasicUsage.ts   |   2 +
 .../play-button/react/tailwind/BasicUsage.tsx |  26 +++++
 .../html/tailwind/BasicUsage.astro            |   9 ++
 .../seek-button/html/tailwind/BasicUsage.html |  26 +++++
 .../seek-button/html/tailwind/BasicUsage.ts   |   2 +
 .../seek-button/react/tailwind/BasicUsage.tsx |  41 +++++++
 .../time-slider/html/tailwind/WithParts.astro |   9 ++
 .../time-slider/html/tailwind/WithParts.html  |  20 ++++
 .../time-slider/html/tailwind/WithParts.ts    |   2 +
 .../time-slider/react/tailwind/WithParts.tsx  |  32 ++++++
 .../time/html/tailwind/CurrentDuration.astro  |   9 ++
 .../time/html/tailwind/CurrentDuration.html   |  19 ++++
 .../time/html/tailwind/CurrentDuration.ts     |   2 +
 .../time/html/tailwind/CurrentTime.astro      |   9 ++
 .../demos/time/html/tailwind/CurrentTime.html |  16 +++
 .../demos/time/html/tailwind/CurrentTime.ts   |   2 +
 .../html/tailwind/CustomNegativeSign.astro    |   9 ++
 .../html/tailwind/CustomNegativeSign.html     |  17 +++
 .../time/html/tailwind/CustomNegativeSign.ts  |   2 +
 .../time/html/tailwind/CustomSeparator.astro  |   9 ++
 .../time/html/tailwind/CustomSeparator.html   |  19 ++++
 .../time/html/tailwind/CustomSeparator.ts     |   2 +
 .../demos/time/html/tailwind/Remaining.astro  |   9 ++
 .../demos/time/html/tailwind/Remaining.html   |  16 +++
 .../demos/time/html/tailwind/Remaining.ts     |   2 +
 .../time/react/tailwind/CurrentDuration.tsx   |  26 +++++
 .../demos/time/react/tailwind/CurrentTime.tsx |  25 +++++
 .../react/tailwind/CustomNegativeSign.tsx     |  26 +++++
 .../time/react/tailwind/CustomSeparator.tsx   |  26 +++++
 .../demos/time/react/tailwind/Remaining.tsx   |  25 +++++
 .../html/tailwind/WithParts.astro             |   9 ++
 .../html/tailwind/WithParts.html              |  25 +++++
 .../volume-slider/html/tailwind/WithParts.ts  |   3 +
 .../react/tailwind/WithParts.tsx              |  35 ++++++
 .../docs/reference/fullscreen-button.mdx      |  20 ++++
 .../content/docs/reference/mute-button.mdx    |  40 +++++++
 .../src/content/docs/reference/pip-button.mdx |  20 ++++
 .../content/docs/reference/play-button.mdx    |  20 ++++
 .../content/docs/reference/seek-button.mdx    |  20 ++++
 .../content/docs/reference/time-slider.mdx    |  24 +++++
 site/src/content/docs/reference/time.mdx      | 100 ++++++++++++++++++
 .../content/docs/reference/volume-slider.mdx  |  24 +++++
 60 files changed, 1034 insertions(+)
 create mode 100644 site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/fullscreen-button/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.astro
 create mode 100644 site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.html
 create mode 100644 site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.ts
 create mode 100644 site/src/components/docs/demos/mute-button/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/mute-button/react/tailwind/VolumeLevels.tsx
 create mode 100644 site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/pip-button/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/play-button/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.astro
 create mode 100644 site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.html
 create mode 100644 site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.ts
 create mode 100644 site/src/components/docs/demos/seek-button/react/tailwind/BasicUsage.tsx
 create mode 100644 site/src/components/docs/demos/time-slider/html/tailwind/WithParts.astro
 create mode 100644 site/src/components/docs/demos/time-slider/html/tailwind/WithParts.html
 create mode 100644 site/src/components/docs/demos/time-slider/html/tailwind/WithParts.ts
 create mode 100644 site/src/components/docs/demos/time-slider/react/tailwind/WithParts.tsx
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CurrentDuration.astro
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CurrentDuration.html
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CurrentDuration.ts
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CurrentTime.astro
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CurrentTime.html
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CurrentTime.ts
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.astro
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.html
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.ts
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CustomSeparator.astro
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CustomSeparator.html
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/CustomSeparator.ts
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/Remaining.astro
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/Remaining.html
 create mode 100644 site/src/components/docs/demos/time/html/tailwind/Remaining.ts
 create mode 100644 site/src/components/docs/demos/time/react/tailwind/CurrentDuration.tsx
 create mode 100644 site/src/components/docs/demos/time/react/tailwind/CurrentTime.tsx
 create mode 100644 site/src/components/docs/demos/time/react/tailwind/CustomNegativeSign.tsx
 create mode 100644 site/src/components/docs/demos/time/react/tailwind/CustomSeparator.tsx
 create mode 100644 site/src/components/docs/demos/time/react/tailwind/Remaining.tsx
 create mode 100644 site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.astro
 create mode 100644 site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.html
 create mode 100644 site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.ts
 create mode 100644 site/src/components/docs/demos/volume-slider/react/tailwind/WithParts.tsx

diff --git a/site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-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/fullscreen-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..e21dc625
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.html
@@ -0,0 +1,18 @@
+<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-fullscreen-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]"
+        >
+            <span class="hidden in-data-fullscreen:inline">Exit Fullscreen</span>
+            <span class="hidden not-in-data-fullscreen:inline">Fullscreen</span>
+        </media-fullscreen-button>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..8bd9b818
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/fullscreen-button';
diff --git a/site/src/components/docs/demos/fullscreen-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/fullscreen-button/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..6b79ad2b
--- /dev/null
+++ b/site/src/components/docs/demos/fullscreen-button/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, FullscreenButton } 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
+        />
+        <FullscreenButton
+          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]"
+          render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/mute-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/mute-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..cf2705a6
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.html
@@ -0,0 +1,18 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-mute-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-muted:inline">Unmute</span>
+            <span class="hidden not-in-data-muted:inline">Mute</span>
+        </media-mute-button>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..5c81c0a9
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/mute-button';
diff --git a/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.astro b/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.astro
new file mode 100644
index 00000000..9672930c
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.astro
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './VolumeLevels.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./VolumeLevels.ts";
+</script>
diff --git a/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.html b/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.html
new file mode 100644
index 00000000..d56d2dfc
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.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
+        ></video>
+        <media-mute-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-[volume-level=off]:inline">Off</span>
+            <span class="hidden in-data-[volume-level=low]:inline">Low</span>
+            <span class="hidden in-data-[volume-level=medium]:inline">Medium</span>
+            <span class="hidden in-data-[volume-level=high]:inline">High</span>
+        </media-mute-button>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.ts b/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.ts
new file mode 100644
index 00000000..5c81c0a9
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/html/tailwind/VolumeLevels.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/mute-button';
diff --git a/site/src/components/docs/demos/mute-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/mute-button/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..6f3682bd
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, MuteButton } 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
+        />
+        <MuteButton
+          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.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/mute-button/react/tailwind/VolumeLevels.tsx b/site/src/components/docs/demos/mute-button/react/tailwind/VolumeLevels.tsx
new file mode 100644
index 00000000..3bf5bc39
--- /dev/null
+++ b/site/src/components/docs/demos/mute-button/react/tailwind/VolumeLevels.tsx
@@ -0,0 +1,35 @@
+import { createPlayer, MuteButton } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function VolumeLevels() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MuteButton
+          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.volumeLevel === 'off'
+                ? 'Off'
+                : state.volumeLevel === 'low'
+                  ? 'Low'
+                  : state.volumeLevel === 'medium'
+                    ? 'Medium'
+                    : 'High'}
+            </button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/pip-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/pip-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..05228604
--- /dev/null
+++ b/site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.html
@@ -0,0 +1,18 @@
+<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-pip-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]"
+        >
+            <span class="hidden in-data-pip:inline">Exit PiP</span>
+            <span class="hidden not-in-data-pip:inline">Enter PiP</span>
+        </media-pip-button>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..978c2338
--- /dev/null
+++ b/site/src/components/docs/demos/pip-button/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/pip-button';
diff --git a/site/src/components/docs/demos/pip-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/pip-button/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..e2d8e65a
--- /dev/null
+++ b/site/src/components/docs/demos/pip-button/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, PiPButton } 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
+        />
+        <PiPButton
+          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]"
+          render={(props, state) => <button {...props}>{state.pip ? 'Exit PiP' : 'Enter PiP'}</button>}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/play-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/play-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..2acedb7c
--- /dev/null
+++ b/site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.html
@@ -0,0 +1,18 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+        ></video>
+        <media-play-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-paused:not-in-data-ended:inline">Play</span>
+            <span class="hidden not-in-data-paused:inline">Pause</span>
+            <span class="hidden in-data-ended:inline">Replay</span>
+        </media-play-button>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..6c7c5cd8
--- /dev/null
+++ b/site/src/components/docs/demos/play-button/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/play-button';
diff --git a/site/src/components/docs/demos/play-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/play-button/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..54042902
--- /dev/null
+++ b/site/src/components/docs/demos/play-button/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,26 @@
+import { createPlayer, PlayButton } 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
+        />
+        <PlayButton
+          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.ended ? 'Replay' : state.paused ? 'Play' : 'Pause'}</button>
+          )}
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.astro
new file mode 100644
index 00000000..c515bacd
--- /dev/null
+++ b/site/src/components/docs/demos/seek-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/seek-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.html
new file mode 100644
index 00000000..23c93d1b
--- /dev/null
+++ b/site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.html
@@ -0,0 +1,26 @@
+<video-player class="relative">
+    <media-container>
+        <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 flex gap-2">
+            <media-seek-button
+                seconds="-5"
+                class="cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 whitespace-nowrap text-black backdrop-blur-[10px]"
+            >
+                <span class="hidden in-data-[direction=backward]:inline">&#9194; 5s</span>
+            </media-seek-button>
+            <media-seek-button
+                seconds="10"
+                class="cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 whitespace-nowrap text-black backdrop-blur-[10px]"
+            >
+                <span class="hidden in-data-[direction=forward]:inline">10s &#9193;</span>
+            </media-seek-button>
+        </div>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.ts
new file mode 100644
index 00000000..3797af37
--- /dev/null
+++ b/site/src/components/docs/demos/seek-button/html/tailwind/BasicUsage.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/seek-button';
diff --git a/site/src/components/docs/demos/seek-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/seek-button/react/tailwind/BasicUsage.tsx
new file mode 100644
index 00000000..14f0999b
--- /dev/null
+++ b/site/src/components/docs/demos/seek-button/react/tailwind/BasicUsage.tsx
@@ -0,0 +1,41 @@
+import { createPlayer, SeekButton } 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 flex gap-2">
+          <SeekButton
+            seconds={-5}
+            className="cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 whitespace-nowrap text-black backdrop-blur-[10px]"
+            render={(props, state) => (
+              <button {...props}>
+                {state.direction === 'backward' ? '\u23EA' : '\u23E9'} {5}s
+              </button>
+            )}
+          />
+          <SeekButton
+            seconds={10}
+            className="cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 whitespace-nowrap text-black backdrop-blur-[10px]"
+            render={(props, state) => (
+              <button {...props}>
+                {10}s {state.direction === 'forward' ? '\u23E9' : '\u23EA'}
+              </button>
+            )}
+          />
+        </div>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.astro b/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.astro
new file mode 100644
index 00000000..ce7b2ae9
--- /dev/null
+++ b/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.astro
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './WithParts.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./WithParts.ts";
+</script>
diff --git a/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.html b/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.html
new file mode 100644
index 00000000..3b46a6bb
--- /dev/null
+++ b/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.html
@@ -0,0 +1,20 @@
+<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>
+        <media-time-slider class="absolute inset-x-0 bottom-0 flex h-5 cursor-pointer items-center">
+            <media-slider-track class="absolute inset-x-0 h-1 rounded-full bg-white/30 transition-[height] duration-150 in-data-interactive:h-1.5">
+                <media-slider-buffer class="absolute top-0 left-0 h-full w-(--media-slider-buffer) rounded-full bg-white/40"></media-slider-buffer>
+                <media-slider-fill class="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white in-data-dragging:w-(--media-slider-pointer)"></media-slider-fill>
+            </media-slider-track>
+            <media-slider-thumb class="absolute left-(--media-slider-fill) size-3.5 -translate-x-1/2 scale-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-transform duration-150 in-data-interactive:scale-100 in-data-dragging:left-(--media-slider-pointer) in-data-dragging:scale-110"></media-slider-thumb>
+            <media-slider-value type="pointer" class="pointer-events-none absolute bottom-full left-(--media-slider-pointer) mb-1.5 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"></media-slider-value>
+        </media-time-slider>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.ts b/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.ts
new file mode 100644
index 00000000..d40811aa
--- /dev/null
+++ b/site/src/components/docs/demos/time-slider/html/tailwind/WithParts.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time-slider';
diff --git a/site/src/components/docs/demos/time-slider/react/tailwind/WithParts.tsx b/site/src/components/docs/demos/time-slider/react/tailwind/WithParts.tsx
new file mode 100644
index 00000000..a302efd2
--- /dev/null
+++ b/site/src/components/docs/demos/time-slider/react/tailwind/WithParts.tsx
@@ -0,0 +1,32 @@
+import { createPlayer, TimeSlider } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function WithParts() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <TimeSlider.Root className="absolute inset-x-0 bottom-0 flex h-5 cursor-pointer items-center">
+          <TimeSlider.Track className="absolute inset-x-0 h-1 rounded-full bg-white/30 transition-[height] duration-150 in-data-interactive:h-1.5">
+            <TimeSlider.Buffer className="absolute top-0 left-0 h-full w-(--media-slider-buffer) rounded-full bg-white/40" />
+            <TimeSlider.Fill className="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white in-data-dragging:w-(--media-slider-pointer)" />
+          </TimeSlider.Track>
+          <TimeSlider.Thumb className="absolute left-(--media-slider-fill) size-3.5 -translate-x-1/2 scale-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-transform duration-150 in-data-interactive:scale-100 in-data-dragging:left-(--media-slider-pointer) in-data-dragging:scale-110" />
+          <TimeSlider.Value
+            type="pointer"
+            className="pointer-events-none absolute bottom-full left-(--media-slider-pointer) mb-1.5 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"
+          />
+        </TimeSlider.Root>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.astro b/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.astro
new file mode 100644
index 00000000..4656549d
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.astro
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CurrentDuration.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./CurrentDuration.ts";
+</script>
diff --git a/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.html b/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.html
new file mode 100644
index 00000000..f9a14473
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.html
@@ -0,0 +1,19 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time-group
+            class="absolute bottom-2.5 left-2.5 flex items-center gap-1 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        >
+            <media-time type="current"></media-time>
+            <media-time-separator></media-time-separator>
+            <media-time type="duration"></media-time>
+        </media-time-group>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.ts b/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CurrentDuration.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/html/tailwind/CurrentTime.astro b/site/src/components/docs/demos/time/html/tailwind/CurrentTime.astro
new file mode 100644
index 00000000..5d7c0920
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CurrentTime.astro
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CurrentTime.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./CurrentTime.ts";
+</script>
diff --git a/site/src/components/docs/demos/time/html/tailwind/CurrentTime.html b/site/src/components/docs/demos/time/html/tailwind/CurrentTime.html
new file mode 100644
index 00000000..c5ae8c5b
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CurrentTime.html
@@ -0,0 +1,16 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time
+            class="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+            type="current"
+        ></media-time>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/tailwind/CurrentTime.ts b/site/src/components/docs/demos/time/html/tailwind/CurrentTime.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CurrentTime.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.astro b/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.astro
new file mode 100644
index 00000000..ba67befd
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.astro
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CustomNegativeSign.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./CustomNegativeSign.ts";
+</script>
diff --git a/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.html b/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.html
new file mode 100644
index 00000000..299dd553
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.html
@@ -0,0 +1,17 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time
+            class="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+            type="remaining"
+            negative-sign="~"
+        ></media-time>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.ts b/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CustomNegativeSign.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.astro b/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.astro
new file mode 100644
index 00000000..d22a0e0c
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.astro
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './CustomSeparator.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./CustomSeparator.ts";
+</script>
diff --git a/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.html b/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.html
new file mode 100644
index 00000000..2e5d70e8
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.html
@@ -0,0 +1,19 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time-group
+            class="absolute bottom-2.5 left-2.5 flex items-center gap-1 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        >
+            <media-time type="current"></media-time>
+            <media-time-separator> of </media-time-separator>
+            <media-time type="duration"></media-time>
+        </media-time-group>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.ts b/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/CustomSeparator.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/html/tailwind/Remaining.astro b/site/src/components/docs/demos/time/html/tailwind/Remaining.astro
new file mode 100644
index 00000000..5fcf20c6
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/Remaining.astro
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './Remaining.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./Remaining.ts";
+</script>
diff --git a/site/src/components/docs/demos/time/html/tailwind/Remaining.html b/site/src/components/docs/demos/time/html/tailwind/Remaining.html
new file mode 100644
index 00000000..4ab5db30
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/Remaining.html
@@ -0,0 +1,16 @@
+<video-player class="relative">
+    <media-container>
+        <video
+            class="w-full"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+            autoplay
+            muted
+            playsinline
+            loop
+        ></video>
+        <media-time
+            class="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+            type="remaining"
+        ></media-time>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/time/html/tailwind/Remaining.ts b/site/src/components/docs/demos/time/html/tailwind/Remaining.ts
new file mode 100644
index 00000000..8555624a
--- /dev/null
+++ b/site/src/components/docs/demos/time/html/tailwind/Remaining.ts
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/time';
diff --git a/site/src/components/docs/demos/time/react/tailwind/CurrentDuration.tsx b/site/src/components/docs/demos/time/react/tailwind/CurrentDuration.tsx
new file mode 100644
index 00000000..d10f8938
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/tailwind/CurrentDuration.tsx
@@ -0,0 +1,26 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function CurrentDuration() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Group className="absolute bottom-2.5 left-2.5 flex items-center gap-1 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]">
+          <Time.Value type="current" />
+          <Time.Separator />
+          <Time.Value type="duration" />
+        </Time.Group>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/react/tailwind/CurrentTime.tsx b/site/src/components/docs/demos/time/react/tailwind/CurrentTime.tsx
new file mode 100644
index 00000000..7b264ab1
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/tailwind/CurrentTime.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function CurrentTime() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value
+          type="current"
+          className="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/react/tailwind/CustomNegativeSign.tsx b/site/src/components/docs/demos/time/react/tailwind/CustomNegativeSign.tsx
new file mode 100644
index 00000000..18f988ba
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/tailwind/CustomNegativeSign.tsx
@@ -0,0 +1,26 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function CustomNegativeSign() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value
+          type="remaining"
+          negativeSign="~"
+          className="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/react/tailwind/CustomSeparator.tsx b/site/src/components/docs/demos/time/react/tailwind/CustomSeparator.tsx
new file mode 100644
index 00000000..daeebf91
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/tailwind/CustomSeparator.tsx
@@ -0,0 +1,26 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function CustomSeparator() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Group className="absolute bottom-2.5 left-2.5 flex items-center gap-1 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]">
+          <Time.Value type="current" />
+          <Time.Separator> of </Time.Separator>
+          <Time.Value type="duration" />
+        </Time.Group>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/time/react/tailwind/Remaining.tsx b/site/src/components/docs/demos/time/react/tailwind/Remaining.tsx
new file mode 100644
index 00000000..962179f1
--- /dev/null
+++ b/site/src/components/docs/demos/time/react/tailwind/Remaining.tsx
@@ -0,0 +1,25 @@
+import { createPlayer, Time } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function Remaining() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <Time.Value
+          type="remaining"
+          className="absolute bottom-2.5 left-2.5 rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black tabular-nums backdrop-blur-[10px]"
+        />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.astro b/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.astro
new file mode 100644
index 00000000..ce7b2ae9
--- /dev/null
+++ b/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.astro
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './WithParts.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./WithParts.ts";
+</script>
diff --git a/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.html b/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.html
new file mode 100644
index 00000000..c20a1860
--- /dev/null
+++ b/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.html
@@ -0,0 +1,25 @@
+<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>
+        <media-mute-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-muted:inline">Unmute</span>
+            <span class="hidden not-in-data-muted:inline">Mute</span>
+        </media-mute-button>
+        <media-volume-slider class="absolute right-2.5 bottom-2.5 flex h-5 w-25 cursor-pointer items-center">
+            <media-slider-track class="absolute inset-x-0 h-1 rounded-full bg-white/30 backdrop-blur-[10px] transition-[height] duration-150 in-data-interactive:h-1.5">
+                <media-slider-fill class="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white"></media-slider-fill>
+            </media-slider-track>
+            <media-slider-thumb class="absolute left-(--media-slider-fill) size-3.5 -translate-x-1/2 scale-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-transform duration-150 in-data-interactive:scale-100 in-data-dragging:scale-110"></media-slider-thumb>
+            <media-slider-value type="pointer" class="pointer-events-none absolute bottom-full left-(--media-slider-pointer) mb-1.5 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"></media-slider-value>
+        </media-volume-slider>
+    </media-container>
+</video-player>
diff --git a/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.ts b/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.ts
new file mode 100644
index 00000000..bc487687
--- /dev/null
+++ b/site/src/components/docs/demos/volume-slider/html/tailwind/WithParts.ts
@@ -0,0 +1,3 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/mute-button';
+import '@videojs/html/ui/volume-slider';
diff --git a/site/src/components/docs/demos/volume-slider/react/tailwind/WithParts.tsx b/site/src/components/docs/demos/volume-slider/react/tailwind/WithParts.tsx
new file mode 100644
index 00000000..459d1d4a
--- /dev/null
+++ b/site/src/components/docs/demos/volume-slider/react/tailwind/WithParts.tsx
@@ -0,0 +1,35 @@
+import { createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function WithParts() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative">
+        <Video
+          className="w-full"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          autoPlay
+          muted
+          playsInline
+          loop
+        />
+        <MuteButton
+          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.muted ? 'Unmute' : 'Mute'}</button>}
+        />
+        <VolumeSlider.Root className="absolute right-2.5 bottom-2.5 flex h-5 w-25 cursor-pointer items-center">
+          <VolumeSlider.Track className="absolute inset-x-0 h-1 rounded-full bg-white/30 backdrop-blur-[10px] transition-[height] duration-150 in-data-interactive:h-1.5">
+            <VolumeSlider.Fill className="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white" />
+          </VolumeSlider.Track>
+          <VolumeSlider.Thumb className="absolute left-(--media-slider-fill) size-3.5 -translate-x-1/2 scale-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-transform duration-150 in-data-interactive:scale-100 in-data-dragging:scale-110" />
+          <VolumeSlider.Value
+            type="pointer"
+            className="pointer-events-none absolute bottom-full left-(--media-slider-pointer) mb-1.5 -translate-x-1/2 rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"
+          />
+        </VolumeSlider.Root>
+      </Player.Container>
+    </Player.Provider>
+  );
+}
diff --git a/site/src/content/docs/reference/fullscreen-button.mdx b/site/src/content/docs/reference/fullscreen-button.mdx
index 60b0f39c..beb6857d 100644
--- a/site/src/content/docs/reference/fullscreen-button.mdx
+++ b/site/src/content/docs/reference/fullscreen-button.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/fullscreen-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/fullscreen-button/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/fullscreen-button/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -100,6 +105,13 @@ Renders a `<button>` with an automatic `aria-label`: "Enter fullscreen" or "Exit
       <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"]}>
@@ -114,6 +126,14 @@ Renders a `<button>` with an automatic `aria-label`: "Enter fullscreen" or "Exit
       <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="FullscreenButton" />
diff --git a/site/src/content/docs/reference/mute-button.mdx b/site/src/content/docs/reference/mute-button.mdx
index 31fa5573..26aef2d7 100644
--- a/site/src/content/docs/reference/mute-button.mdx
+++ b/site/src/content/docs/reference/mute-button.mdx
@@ -14,23 +14,33 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/mute-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/mute-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/mute-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/mute-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/mute-button/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/mute-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/mute-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/mute-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/mute-button/html/tailwind/BasicUsage.ts?raw";
 
 {/* React demos — Volume Levels */}
 import VolumeLevelsDemoReact from "@/components/docs/demos/mute-button/react/css/VolumeLevels";
 import volumeLevelsReactTsx from "@/components/docs/demos/mute-button/react/css/VolumeLevels.tsx?raw";
 import volumeLevelsReactCss from "@/components/docs/demos/mute-button/react/css/VolumeLevels.css?raw";
+import VolumeLevelsDemoReactTailwind from "@/components/docs/demos/mute-button/react/tailwind/VolumeLevels";
+import volumeLevelsReactTailwindTsx from "@/components/docs/demos/mute-button/react/tailwind/VolumeLevels.tsx?raw";
 
 {/* HTML demos — Volume Levels */}
 import VolumeLevelsDemoHtml from "@/components/docs/demos/mute-button/html/css/VolumeLevels.astro";
 import volumeLevelsHtml from "@/components/docs/demos/mute-button/html/css/VolumeLevels.html?raw";
 import volumeLevelsHtmlCss from "@/components/docs/demos/mute-button/html/css/VolumeLevels.css?raw";
 import volumeLevelsHtmlTs from "@/components/docs/demos/mute-button/html/css/VolumeLevels.ts?raw";
+import VolumeLevelsDemoHtmlTailwind from "@/components/docs/demos/mute-button/html/tailwind/VolumeLevels.astro";
+import volumeLevelsTailwindHtml from "@/components/docs/demos/mute-button/html/tailwind/VolumeLevels.html?raw";
+import volumeLevelsTailwindHtmlTs from "@/components/docs/demos/mute-button/html/tailwind/VolumeLevels.ts?raw";
 
 ## Anatomy
 
@@ -107,6 +117,13 @@ Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute"
       <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"]}>
@@ -119,6 +136,14 @@ Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute"
       <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>
 
 ### Volume Levels
@@ -132,6 +157,13 @@ Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute"
       <VolumeLevelsDemoReact client:idle />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: volumeLevelsReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <VolumeLevelsDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
@@ -144,6 +176,14 @@ Renders a `<button>` with an automatic `aria-label`: "Unmute" when muted, "Mute"
       <VolumeLevelsDemoHtml />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: volumeLevelsTailwindHtml, lang: "html" },
+      { title: "index.ts", code: volumeLevelsTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <VolumeLevelsDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <ComponentReference component="MuteButton" />
diff --git a/site/src/content/docs/reference/pip-button.mdx b/site/src/content/docs/reference/pip-button.mdx
index 5e484999..1ae16916 100644
--- a/site/src/content/docs/reference/pip-button.mdx
+++ b/site/src/content/docs/reference/pip-button.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/pip-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/pip-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/pip-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/pip-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/pip-button/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/pip-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/pip-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/pip-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/pip-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/pip-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/pip-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/pip-button/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -98,6 +103,13 @@ Renders a `<button>` with an automatic `aria-label`: "Enter PiP" or "Exit PiP".
       <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"]}>
@@ -110,6 +122,14 @@ Renders a `<button>` with an automatic `aria-label`: "Enter PiP" or "Exit PiP".
       <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="PipButton" />
diff --git a/site/src/content/docs/reference/play-button.mdx b/site/src/content/docs/reference/play-button.mdx
index 68919946..956eedcd 100644
--- a/site/src/content/docs/reference/play-button.mdx
+++ b/site/src/content/docs/reference/play-button.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/play-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/play-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/play-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/play-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/play-button/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/play-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/play-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/play-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/play-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/play-button/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -104,6 +109,13 @@ Renders a `<button>` element with an automatic `aria-label` that updates based o
       <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"]}>
@@ -116,6 +128,14 @@ Renders a `<button>` element with an automatic `aria-label` that updates based o
       <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="PlayButton" />
diff --git a/site/src/content/docs/reference/seek-button.mdx b/site/src/content/docs/reference/seek-button.mdx
index 60b9fa63..20f6fd78 100644
--- a/site/src/content/docs/reference/seek-button.mdx
+++ b/site/src/content/docs/reference/seek-button.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/seek-button/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/seek-button/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/seek-button/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/seek-button/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/seek-button/react/tailwind/BasicUsage.tsx?raw";
 
 {/* HTML demos */}
 import BasicUsageDemoHtml from "@/components/docs/demos/seek-button/html/css/BasicUsage.astro";
 import basicUsageHtml from "@/components/docs/demos/seek-button/html/css/BasicUsage.html?raw";
 import basicUsageHtmlCss from "@/components/docs/demos/seek-button/html/css/BasicUsage.css?raw";
 import basicUsageHtmlTs from "@/components/docs/demos/seek-button/html/css/BasicUsage.ts?raw";
+import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/seek-button/html/tailwind/BasicUsage.astro";
+import basicUsageTailwindHtml from "@/components/docs/demos/seek-button/html/tailwind/BasicUsage.html?raw";
+import basicUsageTailwindHtmlTs from "@/components/docs/demos/seek-button/html/tailwind/BasicUsage.ts?raw";
 
 ## Anatomy
 
@@ -58,6 +63,13 @@ Renders a `<button>` with an automatic `aria-label` describing the action, e.g.
       <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"]}>
@@ -72,6 +84,14 @@ Renders a `<button>` with an automatic `aria-label` describing the action, e.g.
       <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="SeekButton" />
diff --git a/site/src/content/docs/reference/time-slider.mdx b/site/src/content/docs/reference/time-slider.mdx
index fbecf350..f08426b2 100644
--- a/site/src/content/docs/reference/time-slider.mdx
+++ b/site/src/content/docs/reference/time-slider.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import WithPartsDemoReact from "@/components/docs/demos/time-slider/react/css/WithParts";
 import withPartsReactTsx from "@/components/docs/demos/time-slider/react/css/WithParts.tsx?raw";
 import withPartsReactCss from "@/components/docs/demos/time-slider/react/css/WithParts.css?raw";
+import WithPartsDemoReactTailwind from "@/components/docs/demos/time-slider/react/tailwind/WithParts";
+import withPartsReactTailwindTsx from "@/components/docs/demos/time-slider/react/tailwind/WithParts.tsx?raw";
 
 {/* HTML demos */}
 import WithPartsDemoHtml from "@/components/docs/demos/time-slider/html/css/WithParts.astro";
 import withPartsHtml from "@/components/docs/demos/time-slider/html/css/WithParts.html?raw";
 import withPartsHtmlCss from "@/components/docs/demos/time-slider/html/css/WithParts.css?raw";
 import withPartsHtmlTs from "@/components/docs/demos/time-slider/html/css/WithParts.ts?raw";
+import WithPartsDemoHtmlTailwind from "@/components/docs/demos/time-slider/html/tailwind/WithParts.astro";
+import withPartsTailwindHtml from "@/components/docs/demos/time-slider/html/tailwind/WithParts.html?raw";
+import withPartsTailwindHtmlTs from "@/components/docs/demos/time-slider/html/tailwind/WithParts.ts?raw";
 
 ## Anatomy
 
@@ -105,6 +110,15 @@ Nest sub-components for full control over the slider's DOM structure. This examp
       <WithPartsDemoReact client:idle />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: withPartsReactTailwindTsx, lang: "tsx" },
+      ]}
+    >
+      <WithPartsDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
@@ -119,6 +133,16 @@ Nest sub-components for full control over the slider's DOM structure. This examp
       <WithPartsDemoHtml />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "index.html", code: withPartsTailwindHtml, lang: "html" },
+        { title: "index.ts", code: withPartsTailwindHtmlTs, lang: "ts" },
+      ]}
+    >
+      <WithPartsDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <ComponentReference component="TimeSlider" />
diff --git a/site/src/content/docs/reference/time.mdx b/site/src/content/docs/reference/time.mdx
index d58fcaed..a583f8c4 100644
--- a/site/src/content/docs/reference/time.mdx
+++ b/site/src/content/docs/reference/time.mdx
@@ -14,44 +14,69 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import CurrentTimeDemoReact from "@/components/docs/demos/time/react/css/CurrentTime";
 import currentTimeReactTsx from "@/components/docs/demos/time/react/css/CurrentTime.tsx?raw";
 import currentTimeReactCss from "@/components/docs/demos/time/react/css/CurrentTime.css?raw";
+import CurrentTimeDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/CurrentTime";
+import currentTimeReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/CurrentTime.tsx?raw";
 
 import CurrentDurationDemoReact from "@/components/docs/demos/time/react/css/CurrentDuration";
 import currentDurationReactTsx from "@/components/docs/demos/time/react/css/CurrentDuration.tsx?raw";
 import currentDurationReactCss from "@/components/docs/demos/time/react/css/CurrentDuration.css?raw";
+import CurrentDurationDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/CurrentDuration";
+import currentDurationReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/CurrentDuration.tsx?raw";
 
 import RemainingDemoReact from "@/components/docs/demos/time/react/css/Remaining";
 import remainingReactTsx from "@/components/docs/demos/time/react/css/Remaining.tsx?raw";
 import remainingReactCss from "@/components/docs/demos/time/react/css/Remaining.css?raw";
+import RemainingDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/Remaining";
+import remainingReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/Remaining.tsx?raw";
 
 import CustomSeparatorDemoReact from "@/components/docs/demos/time/react/css/CustomSeparator";
 import customSeparatorReactTsx from "@/components/docs/demos/time/react/css/CustomSeparator.tsx?raw";
 import customSeparatorReactCss from "@/components/docs/demos/time/react/css/CustomSeparator.css?raw";
+import CustomSeparatorDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/CustomSeparator";
+import customSeparatorReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/CustomSeparator.tsx?raw";
 
 import CustomNegativeSignDemoReact from "@/components/docs/demos/time/react/css/CustomNegativeSign";
 import customNegativeSignReactTsx from "@/components/docs/demos/time/react/css/CustomNegativeSign.tsx?raw";
 import customNegativeSignReactCss from "@/components/docs/demos/time/react/css/CustomNegativeSign.css?raw";
+import CustomNegativeSignDemoReactTailwind from "@/components/docs/demos/time/react/tailwind/CustomNegativeSign";
+import customNegativeSignReactTailwindTsx from "@/components/docs/demos/time/react/tailwind/CustomNegativeSign.tsx?raw";
 
 {/* HTML demos */}
 import CurrentTimeDemoHtml from "@/components/docs/demos/time/html/css/CurrentTime.astro";
 import currentTimeHtml from "@/components/docs/demos/time/html/css/CurrentTime.html?raw";
 import currentTimeHtmlCss from "@/components/docs/demos/time/html/css/CurrentTime.css?raw";
 import currentTimeHtmlTs from "@/components/docs/demos/time/html/css/CurrentTime.ts?raw";
+import CurrentTimeDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/CurrentTime.astro";
+import currentTimeTailwindHtml from "@/components/docs/demos/time/html/tailwind/CurrentTime.html?raw";
+import currentTimeTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/CurrentTime.ts?raw";
 import CurrentDurationDemoHtml from "@/components/docs/demos/time/html/css/CurrentDuration.astro";
 import currentDurationHtml from "@/components/docs/demos/time/html/css/CurrentDuration.html?raw";
 import currentDurationHtmlCss from "@/components/docs/demos/time/html/css/CurrentDuration.css?raw";
 import currentDurationHtmlTs from "@/components/docs/demos/time/html/css/CurrentDuration.ts?raw";
+import CurrentDurationDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/CurrentDuration.astro";
+import currentDurationTailwindHtml from "@/components/docs/demos/time/html/tailwind/CurrentDuration.html?raw";
+import currentDurationTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/CurrentDuration.ts?raw";
 import RemainingDemoHtml from "@/components/docs/demos/time/html/css/Remaining.astro";
 import remainingHtml from "@/components/docs/demos/time/html/css/Remaining.html?raw";
 import remainingHtmlCss from "@/components/docs/demos/time/html/css/Remaining.css?raw";
 import remainingHtmlTs from "@/components/docs/demos/time/html/css/Remaining.ts?raw";
+import RemainingDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/Remaining.astro";
+import remainingTailwindHtml from "@/components/docs/demos/time/html/tailwind/Remaining.html?raw";
+import remainingTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/Remaining.ts?raw";
 import CustomSeparatorDemoHtml from "@/components/docs/demos/time/html/css/CustomSeparator.astro";
 import customSeparatorHtml from "@/components/docs/demos/time/html/css/CustomSeparator.html?raw";
 import customSeparatorHtmlCss from "@/components/docs/demos/time/html/css/CustomSeparator.css?raw";
 import customSeparatorHtmlTs from "@/components/docs/demos/time/html/css/CustomSeparator.ts?raw";
+import CustomSeparatorDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/CustomSeparator.astro";
+import customSeparatorTailwindHtml from "@/components/docs/demos/time/html/tailwind/CustomSeparator.html?raw";
+import customSeparatorTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/CustomSeparator.ts?raw";
 import CustomNegativeSignDemoHtml from "@/components/docs/demos/time/html/css/CustomNegativeSign.astro";
 import customNegativeSignHtml from "@/components/docs/demos/time/html/css/CustomNegativeSign.html?raw";
 import customNegativeSignHtmlCss from "@/components/docs/demos/time/html/css/CustomNegativeSign.css?raw";
 import customNegativeSignHtmlTs from "@/components/docs/demos/time/html/css/CustomNegativeSign.ts?raw";
+import CustomNegativeSignDemoHtmlTailwind from "@/components/docs/demos/time/html/tailwind/CustomNegativeSign.astro";
+import customNegativeSignTailwindHtml from "@/components/docs/demos/time/html/tailwind/CustomNegativeSign.html?raw";
+import customNegativeSignTailwindHtmlTs from "@/components/docs/demos/time/html/tailwind/CustomNegativeSign.ts?raw";
 
 ## Anatomy
 
@@ -124,6 +149,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <CurrentTimeDemoReact client:idle />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: currentTimeReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <CurrentTimeDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
@@ -136,6 +168,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <CurrentTimeDemoHtml />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: currentTimeTailwindHtml, lang: "html" },
+      { title: "index.ts", code: currentTimeTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <CurrentTimeDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 ### Current / Duration
@@ -149,6 +189,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <CurrentDurationDemoReact client:idle />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: currentDurationReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <CurrentDurationDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
@@ -161,6 +208,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <CurrentDurationDemoHtml />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: currentDurationTailwindHtml, lang: "html" },
+      { title: "index.ts", code: currentDurationTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <CurrentDurationDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 ### Remaining
@@ -174,6 +229,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <RemainingDemoReact client:idle />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: remainingReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <RemainingDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
@@ -186,6 +248,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <RemainingDemoHtml />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: remainingTailwindHtml, lang: "html" },
+      { title: "index.ts", code: remainingTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <RemainingDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 ### Custom Separator
@@ -199,6 +269,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <CustomSeparatorDemoReact client:idle />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: customSeparatorReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <CustomSeparatorDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
@@ -211,6 +288,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <CustomSeparatorDemoHtml />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: customSeparatorTailwindHtml, lang: "html" },
+      { title: "index.ts", code: customSeparatorTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <CustomSeparatorDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 ### Custom Negative Sign
@@ -224,6 +309,13 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <CustomNegativeSignDemoReact client:idle />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "App.tsx", code: customNegativeSignReactTailwindTsx, lang: "tsx" },
+    ]}>
+      <CustomNegativeSignDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
@@ -236,6 +328,14 @@ No `aria-live` region is used — time updates too frequently and might overwhel
       <CustomNegativeSignDemoHtml />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo files={[
+      { title: "index.html", code: customNegativeSignTailwindHtml, lang: "html" },
+      { title: "index.ts", code: customNegativeSignTailwindHtmlTs, lang: "ts" },
+    ]}>
+      <CustomNegativeSignDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <ComponentReference component="Time" />
diff --git a/site/src/content/docs/reference/volume-slider.mdx b/site/src/content/docs/reference/volume-slider.mdx
index c151264d..022363a5 100644
--- a/site/src/content/docs/reference/volume-slider.mdx
+++ b/site/src/content/docs/reference/volume-slider.mdx
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import WithPartsDemoReact from "@/components/docs/demos/volume-slider/react/css/WithParts";
 import withPartsReactTsx from "@/components/docs/demos/volume-slider/react/css/WithParts.tsx?raw";
 import withPartsReactCss from "@/components/docs/demos/volume-slider/react/css/WithParts.css?raw";
+import WithPartsDemoReactTailwind from "@/components/docs/demos/volume-slider/react/tailwind/WithParts";
+import withPartsReactTailwindTsx from "@/components/docs/demos/volume-slider/react/tailwind/WithParts.tsx?raw";
 
 {/* HTML demos */}
 import WithPartsDemoHtml from "@/components/docs/demos/volume-slider/html/css/WithParts.astro";
 import withPartsHtml from "@/components/docs/demos/volume-slider/html/css/WithParts.html?raw";
 import withPartsHtmlCss from "@/components/docs/demos/volume-slider/html/css/WithParts.css?raw";
 import withPartsHtmlTs from "@/components/docs/demos/volume-slider/html/css/WithParts.ts?raw";
+import WithPartsDemoHtmlTailwind from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.astro";
+import withPartsTailwindHtml from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.html?raw";
+import withPartsTailwindHtmlTs from "@/components/docs/demos/volume-slider/html/tailwind/WithParts.ts?raw";
 
 ## Anatomy
 
@@ -89,6 +94,15 @@ Nest sub-components for full control over the slider's DOM structure. This examp
       <WithPartsDemoReact client:idle />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: withPartsReactTailwindTsx, lang: "tsx" },
+      ]}
+    >
+      <WithPartsDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
@@ -103,6 +117,16 @@ Nest sub-components for full control over the slider's DOM structure. This examp
       <WithPartsDemoHtml />
     </Demo>
   </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "index.html", code: withPartsTailwindHtml, lang: "html" },
+        { title: "index.ts", code: withPartsTailwindHtmlTs, lang: "ts" },
+      ]}
+    >
+      <WithPartsDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>
 
 <ComponentReference component="VolumeSlider" />