feat(site): tailwind demo variants for slider, tooltip, and thumbnail references

The thumbnail JSON demos have no stylesheet-dependent code, so they are shared across both style preferences instead of duplicated. Refs #840 https://claude.ai/code/session_01LUcwUd8E4Ekakp7NTFb6c5
2026-08-16 02:45:09 +00:00 · 2026-06-11 22:55:25 +00:00
parent 30292c326a
commit 18ad240660
23 changed files with 447 additions and 38 deletions
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,14 @@
+<div class="flex items-center bg-neutral-900 p-6">
+    <media-slider class="relative flex h-5 w-full cursor-pointer items-center" value="50">
+        <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-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>
+</div>
@@ -0,0 +1 @@
+import '@videojs/html/ui/slider';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './WithPreview.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./WithPreview.ts";
+</script>
@@ -0,0 +1,22 @@
+<div class="flex items-center bg-neutral-900 px-6 py-10">
+    <media-slider class="relative flex h-5 w-full cursor-pointer items-center" value="50">
+        <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-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-preview
+            class="pointer-events-none absolute bottom-full mb-1.5 opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100"
+        >
+            <media-slider-value
+                type="pointer"
+                class="rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white"
+            ></media-slider-value>
+        </media-slider-preview>
+    </media-slider>
+</div>
@@ -0,0 +1 @@
+import '@videojs/html/ui/slider';
@@ -0,0 +1,21 @@
+import { Slider } from '@videojs/react';
+import { useState } from 'react';
+
+export default function BasicUsage() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <div className="flex items-center bg-neutral-900 p-6">
+      <Slider.Root
+        className="relative flex h-5 w-full cursor-pointer items-center"
+        value={value}
+        onValueChange={setValue}
+      >
+        <Slider.Track className="absolute inset-x-0 h-1 rounded-full bg-white/30 transition-[height] duration-150 in-data-interactive:h-1.5">
+          <Slider.Fill className="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white" />
+        </Slider.Track>
+        <Slider.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" />
+      </Slider.Root>
+    </div>
+  );
+}
@@ -0,0 +1,27 @@
+import { Slider } from '@videojs/react';
+import { useState } from 'react';
+
+export default function WithPreview() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <div className="flex items-center bg-neutral-900 px-6 py-10">
+      <Slider.Root
+        className="relative flex h-5 w-full cursor-pointer items-center"
+        value={value}
+        onValueChange={setValue}
+      >
+        <Slider.Track className="absolute inset-x-0 h-1 rounded-full bg-white/30 transition-[height] duration-150 in-data-interactive:h-1.5">
+          <Slider.Fill className="absolute top-0 left-0 h-full w-(--media-slider-fill) rounded-full bg-white" />
+        </Slider.Track>
+        <Slider.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" />
+        <Slider.Preview className="pointer-events-none absolute bottom-full mb-1.5 opacity-0 transition-opacity duration-150 in-data-pointing:opacity-100">
+          <Slider.Value
+            type="pointer"
+            className="rounded-sm bg-black/80 px-1.5 py-0.5 text-xs whitespace-nowrap text-white"
+          />
+        </Slider.Preview>
+      </Slider.Root>
+    </div>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,25 @@
+<section class="relative block max-w-70">
+    <video-player>
+        <media-container>
+            <video
+                class="pointer-events-none absolute h-px w-px opacity-0"
+                src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+                preload="auto"
+                muted
+                playsinline
+                crossorigin="anonymous"
+            >
+                <track
+                    kind="metadata"
+                    label="thumbnails"
+                    src="/docs/demos/thumbnail/basic.vtt"
+                    default
+                />
+            </video>
+            <media-thumbnail
+                class="block w-auto min-w-0 max-w-60 data-hidden:hidden"
+                time="12"
+            ></media-thumbnail>
+        </media-container>
+    </video-player>
+</section>
@@ -0,0 +1,2 @@
+import '@videojs/html/video/player';
+import '@videojs/html/ui/thumbnail';
@@ -0,0 +1,24 @@
+import { createPlayer, Thumbnail } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+const Player = createPlayer({ features: videoFeatures });
+
+export default function TextTrackUsage() {
+  return (
+    <Player.Provider>
+      <Player.Container className="relative max-w-70">
+        <Video
+          className="pointer-events-none absolute h-px w-px opacity-0"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
+          preload="auto"
+          muted
+          playsInline
+          crossOrigin="anonymous"
+        >
+          <track kind="metadata" label="thumbnails" src="/docs/demos/thumbnail/basic.vtt" default />
+        </Video>
+        <Thumbnail className="block w-auto min-w-0 max-w-60 data-hidden:hidden" time={12} />
+      </Player.Container>
+    </Player.Provider>
+  );
+}
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './BasicUsage.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./BasicUsage.ts";
+</script>
@@ -0,0 +1,15 @@
+<div class="flex items-center justify-center px-6 py-10">
+    <button
+        type="button"
+        commandfor="tooltip-demo"
+        class="cursor-pointer rounded-full border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]"
+    >
+        Hover me
+    </button>
+    <media-tooltip
+        id="tooltip-demo"
+        class="pointer-events-none rounded-md bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]"
+    >
+        Tooltip content
+    </media-tooltip>
+</div>
@@ -0,0 +1 @@
+import '@videojs/html/ui/tooltip';
@@ -0,0 +1,9 @@
+---
+import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
+import html from './Grouping.html?raw';
+---
+
+<HtmlDemo html={html} />
+<script>
+  import "./Grouping.ts";
+</script>
@@ -0,0 +1,43 @@
+<media-tooltip-group class="flex items-center justify-center px-6 py-10">
+    <button
+        type="button"
+        commandfor="tooltip-play"
+        class="cursor-pointer border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]"
+    >
+        Play
+    </button>
+    <media-tooltip
+        id="tooltip-play"
+        class="pointer-events-none rounded-md bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]"
+    >
+        Play video
+    </media-tooltip>
+
+    <button
+        type="button"
+        commandfor="tooltip-mute"
+        class="cursor-pointer border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]"
+    >
+        Mute
+    </button>
+    <media-tooltip
+        id="tooltip-mute"
+        class="pointer-events-none rounded-md bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]"
+    >
+        Mute audio
+    </media-tooltip>
+
+    <button
+        type="button"
+        commandfor="tooltip-fullscreen"
+        class="cursor-pointer border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]"
+    >
+        Fullscreen
+    </button>
+    <media-tooltip
+        id="tooltip-fullscreen"
+        class="pointer-events-none rounded-md bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]"
+    >
+        Enter fullscreen
+    </media-tooltip>
+</media-tooltip-group>
@@ -0,0 +1,2 @@
+import '@videojs/html/ui/tooltip';
+import '@videojs/html/ui/tooltip-group';
@@ -0,0 +1,17 @@
+import { Tooltip } from '@videojs/react';
+
+export default function BasicUsage() {
+  return (
+    <div className="flex items-center justify-center px-6 py-10">
+      <Tooltip.Root>
+        <Tooltip.Trigger className="cursor-pointer rounded-full border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]">
+          Hover me
+        </Tooltip.Trigger>
+        <Tooltip.Popup className="pointer-events-none m-0 rounded-md border-0 bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]">
+          <Tooltip.Arrow className="fill-black/85" />
+          Tooltip content
+        </Tooltip.Popup>
+      </Tooltip.Root>
+    </div>
+  );
+}
@@ -0,0 +1,37 @@
+import { Tooltip } from '@videojs/react';
+
+export default function Grouping() {
+  return (
+    <div className="flex items-center justify-center px-6 py-10">
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger className="cursor-pointer border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]">
+            Play
+          </Tooltip.Trigger>
+          <Tooltip.Popup className="pointer-events-none m-0 rounded-md border-0 bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]">
+            <Tooltip.Arrow className="fill-black/85" />
+            Play video
+          </Tooltip.Popup>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger className="cursor-pointer border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]">
+            Mute
+          </Tooltip.Trigger>
+          <Tooltip.Popup className="pointer-events-none m-0 rounded-md border-0 bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]">
+            <Tooltip.Arrow className="fill-black/85" />
+            Mute audio
+          </Tooltip.Popup>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger className="cursor-pointer border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]">
+            Fullscreen
+          </Tooltip.Trigger>
+          <Tooltip.Popup className="pointer-events-none m-0 rounded-md border-0 bg-black/85 px-2.5 py-1 text-[13px] whitespace-nowrap text-white backdrop-blur-[10px] [--media-tooltip-side-offset:8px]">
+            <Tooltip.Arrow className="fill-black/85" />
+            Enter fullscreen
+          </Tooltip.Popup>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    </div>
+  );
+}
@@ -15,21 +15,31 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/slider/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/slider/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/slider/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/slider/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/slider/react/tailwind/BasicUsage.tsx?raw";

 import WithPreviewDemoReact from "@/components/docs/demos/slider/react/css/WithPreview";
 import withPreviewReactTsx from "@/components/docs/demos/slider/react/css/WithPreview.tsx?raw";
 import withPreviewReactCss from "@/components/docs/demos/slider/react/css/WithPreview.css?raw";
+import WithPreviewDemoReactTailwind from "@/components/docs/demos/slider/react/tailwind/WithPreview";
+import withPreviewReactTailwindTsx from "@/components/docs/demos/slider/react/tailwind/WithPreview.tsx?raw";

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

 import WithPreviewDemoHtml from "@/components/docs/demos/slider/html/css/WithPreview.astro";
 import withPreviewHtml from "@/components/docs/demos/slider/html/css/WithPreview.html?raw";
 import withPreviewHtmlCss from "@/components/docs/demos/slider/html/css/WithPreview.css?raw";
 import withPreviewHtmlTs from "@/components/docs/demos/slider/html/css/WithPreview.ts?raw";
+import WithPreviewDemoHtmlTailwind from "@/components/docs/demos/slider/html/tailwind/WithPreview.astro";
+import withPreviewTailwindHtml from "@/components/docs/demos/slider/html/tailwind/WithPreview.html?raw";
+import withPreviewTailwindHtmlTs from "@/components/docs/demos/slider/html/tailwind/WithPreview.ts?raw";

 ## Anatomy

@@ -148,6 +158,15 @@ A slider with track, fill, and thumb.
      <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"]}>
@@ -162,6 +181,16 @@ A slider with track, fill, and thumb.
      <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>

 ### With Preview
@@ -179,6 +208,15 @@ A slider with a pointer-tracking preview that displays the value at the current
      <WithPreviewDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: withPreviewReactTailwindTsx, lang: "tsx" },
+      ]}
+    >
+      <WithPreviewDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -193,6 +231,16 @@ A slider with a pointer-tracking preview that displays the value at the current
      <WithPreviewDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "index.html", code: withPreviewTailwindHtml, lang: "html" },
+        { title: "index.ts", code: withPreviewTailwindHtmlTs, lang: "ts" },
+      ]}
+    >
+      <WithPreviewDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="Slider" />
@@ -14,6 +14,8 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import TextTrackDemoReact from "@/components/docs/demos/thumbnail/react/css/BasicUsage";
 import textTrackReactTsx from "@/components/docs/demos/thumbnail/react/css/BasicUsage.tsx?raw";
 import textTrackReactCss from "@/components/docs/demos/thumbnail/react/css/BasicUsage.css?raw";
+import TextTrackDemoReactTailwind from "@/components/docs/demos/thumbnail/react/tailwind/BasicUsage";
+import textTrackReactTailwindTsx from "@/components/docs/demos/thumbnail/react/tailwind/BasicUsage.tsx?raw";
 import JsonDemoReact from "@/components/docs/demos/thumbnail/react/css/JsonUsage";
 import jsonReactTsx from "@/components/docs/demos/thumbnail/react/css/JsonUsage.tsx?raw";
 import JsonSpriteDemoReact from "@/components/docs/demos/thumbnail/react/css/JsonSpriteUsage";
@@ -24,6 +26,9 @@ import TextTrackDemoHtml from "@/components/docs/demos/thumbnail/html/css/BasicU
 import textTrackHtml from "@/components/docs/demos/thumbnail/html/css/BasicUsage.html?raw";
 import textTrackHtmlCss from "@/components/docs/demos/thumbnail/html/css/BasicUsage.css?raw";
 import textTrackHtmlTs from "@/components/docs/demos/thumbnail/html/css/BasicUsage.ts?raw";
+import TextTrackDemoHtmlTailwind from "@/components/docs/demos/thumbnail/html/tailwind/BasicUsage.astro";
+import textTrackTailwindHtml from "@/components/docs/demos/thumbnail/html/tailwind/BasicUsage.html?raw";
+import textTrackTailwindHtmlTs from "@/components/docs/demos/thumbnail/html/tailwind/BasicUsage.ts?raw";
 import JsonDemoHtml from "@/components/docs/demos/thumbnail/html/css/JsonUsage.astro";
 import jsonHtml from "@/components/docs/demos/thumbnail/html/css/JsonUsage.html?raw";
 import jsonHtmlTs from "@/components/docs/demos/thumbnail/html/css/JsonUsage.ts?raw";
@@ -152,6 +157,15 @@ React renders a `<div>` element. Add a `className` to style it:
      <TextTrackDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: textTrackReactTailwindTsx, lang: "tsx" },
+      ]}
+    >
+      <TextTrackDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -166,60 +180,62 @@ React renders a `<div>` element. Add a `className` to style it:
      <TextTrackDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "index.html", code: textTrackTailwindHtml, lang: "html" },
+        { title: "index.ts", code: textTrackTailwindHtmlTs, lang: "ts" },
+      ]}
+    >
+      <TextTrackDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 ### JSON Array

 <FrameworkCase frameworks={["react"]}>
-  <StyleCase styles={["css"]}>
-    <Demo
-      files={[
-        { title: "App.tsx", code: jsonReactTsx, lang: "tsx" },
-      ]}
-    >
-      <JsonDemoReact client:idle />
-    </Demo>
-  </StyleCase>
+  <Demo
+    files={[
+      { title: "App.tsx", code: jsonReactTsx, lang: "tsx" },
+    ]}
+  >
+    <JsonDemoReact client:idle />
+  </Demo>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
-  <StyleCase styles={["css"]}>
-    <Demo
-      files={[
-        { title: "index.html", code: jsonHtml, lang: "html" },
-        { title: "index.ts", code: jsonHtmlTs, lang: "ts" },
-      ]}
-    >
-      <JsonDemoHtml />
-    </Demo>
-  </StyleCase>
+  <Demo
+    files={[
+      { title: "index.html", code: jsonHtml, lang: "html" },
+      { title: "index.ts", code: jsonHtmlTs, lang: "ts" },
+    ]}
+  >
+    <JsonDemoHtml />
+  </Demo>
 </FrameworkCase>

 ### JSON Sprite Array

 <FrameworkCase frameworks={["react"]}>
-  <StyleCase styles={["css"]}>
-    <Demo
-      files={[
-        { title: "App.tsx", code: jsonSpriteReactTsx, lang: "tsx" },
-      ]}
-    >
-      <JsonSpriteDemoReact client:idle />
-    </Demo>
-  </StyleCase>
+  <Demo
+    files={[
+      { title: "App.tsx", code: jsonSpriteReactTsx, lang: "tsx" },
+    ]}
+  >
+    <JsonSpriteDemoReact client:idle />
+  </Demo>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
-  <StyleCase styles={["css"]}>
-    <Demo
-      files={[
-        { title: "index.html", code: jsonSpriteHtml, lang: "html" },
-        { title: "index.ts", code: jsonSpriteHtmlTs, lang: "ts" },
-      ]}
-    >
-      <JsonSpriteDemoHtml />
-    </Demo>
-  </StyleCase>
+  <Demo
+    files={[
+      { title: "index.html", code: jsonSpriteHtml, lang: "html" },
+      { title: "index.ts", code: jsonSpriteHtmlTs, lang: "ts" },
+    ]}
+  >
+    <JsonSpriteDemoHtml />
+  </Demo>
 </FrameworkCase>

 <ComponentReference component="Thumbnail" />
@@ -14,21 +14,31 @@ import Demo from "@/components/docs/demos/Demo.astro";
 import BasicUsageDemoReact from "@/components/docs/demos/tooltip/react/css/BasicUsage";
 import basicUsageReactTsx from "@/components/docs/demos/tooltip/react/css/BasicUsage.tsx?raw";
 import basicUsageReactCss from "@/components/docs/demos/tooltip/react/css/BasicUsage.css?raw";
+import BasicUsageDemoReactTailwind from "@/components/docs/demos/tooltip/react/tailwind/BasicUsage";
+import basicUsageReactTailwindTsx from "@/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx?raw";

 import GroupingDemoReact from "@/components/docs/demos/tooltip/react/css/Grouping";
 import groupingReactTsx from "@/components/docs/demos/tooltip/react/css/Grouping.tsx?raw";
 import groupingReactCss from "@/components/docs/demos/tooltip/react/css/Grouping.css?raw";
+import GroupingDemoReactTailwind from "@/components/docs/demos/tooltip/react/tailwind/Grouping";
+import groupingReactTailwindTsx from "@/components/docs/demos/tooltip/react/tailwind/Grouping.tsx?raw";

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

 import GroupingDemoHtml from "@/components/docs/demos/tooltip/html/css/Grouping.astro";
 import groupingHtml from "@/components/docs/demos/tooltip/html/css/Grouping.html?raw";
 import groupingHtmlCss from "@/components/docs/demos/tooltip/html/css/Grouping.css?raw";
 import groupingHtmlTs from "@/components/docs/demos/tooltip/html/css/Grouping.ts?raw";
+import GroupingDemoHtmlTailwind from "@/components/docs/demos/tooltip/html/tailwind/Grouping.astro";
+import groupingTailwindHtml from "@/components/docs/demos/tooltip/html/tailwind/Grouping.html?raw";
+import groupingTailwindHtmlTs from "@/components/docs/demos/tooltip/html/tailwind/Grouping.ts?raw";

 ## Anatomy

@@ -163,6 +173,15 @@ The trigger receives `aria-describedby` pointing to the popup when open. The pop
      <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"]}>
@@ -177,6 +196,16 @@ The trigger receives `aria-describedby` pointing to the popup when open. The pop
      <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>

 ### Grouping
@@ -196,6 +225,15 @@ The trigger receives `aria-describedby` pointing to the popup when open. The pop
      <GroupingDemoReact client:idle />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "App.tsx", code: groupingReactTailwindTsx, lang: "tsx" },
+      ]}
+    >
+      <GroupingDemoReactTailwind client:idle />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <FrameworkCase frameworks={["html"]}>
@@ -214,6 +252,16 @@ The trigger receives `aria-describedby` pointing to the popup when open. The pop
      <GroupingDemoHtml />
    </Demo>
  </StyleCase>
+  <StyleCase styles={["tailwind"]}>
+    <Demo
+      files={[
+        { title: "index.html", code: groupingTailwindHtml, lang: "html" },
+        { title: "index.ts", code: groupingTailwindHtmlTs, lang: "ts" },
+      ]}
+    >
+      <GroupingDemoHtmlTailwind />
+    </Demo>
+  </StyleCase>
 </FrameworkCase>

 <ComponentReference component="Tooltip" partOrder={["provider", "root", "trigger", "popup", "arrow"]} />