From bd47f88bd48c7123bd5b2abb1d21a1fcea72828b Mon Sep 17 00:00:00 2001
From: lukeocodes <luke@lukeoliff.com>
Date: Thu, 7 May 2026 09:41:19 +0100
Subject: [PATCH] fix(ui): namespace tailwind utilities under dg: prefix to
 stop host-page collisions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 0.1.1 release scoped Tailwind preflight to [data-dg-agent] via
tailwindcss-scoped-preflight, but utility classes (.flex, .prose,
.container, .max-w-none, .gap-2, .px-3, .text-sm, .border, etc) and
component classes from the typography plugin (.prose) still ship
unprefixed. When the bundle loads on a host page that also uses
Tailwind, the bundle's class rules win on source order and visibly
break host layout. The most common symptom is .prose snapping content
to max-width: 65ch the moment the widget mounts.

Switching to `@import "tailwindcss" prefix(dg)` namespaces every
generated class under a dg: variant, so .flex becomes .dg\:flex,
.prose becomes .dg\:prose, .max-w-none becomes .dg\:max-w-none, and
so on. Class names in this package's components are updated to match
(class="dg:flex dg:items-center" rather than class="flex items-center").
The scoped preflight plugin keeps doing its job for the universal
selector reset.

After this change the bundle ships:
  - 0 unprefixed Tailwind utility class rules (was 42 collisions with
    Fern docs alone, more with arbitrary host pages)
  - 353 prefixed .dg\: utility rules
  - 76 scoped :where([data-dg-agent], …) preflight rules
  - 33 .dg-* custom component classes (unchanged)

Bundle size: 167.5 KB -> 188.9 KB (+21 KB) from the additional
generated CSS now that Tailwind sees the prefixed class usages and
emits rules for them. Previously these classes were silently dropped
because they weren't matching the prefix-less convention.

Refs:
- https://tailwindcss.com/docs/styling-with-utility-classes#using-a-prefix
- deepgram/agent#48 (the scoped preflight 0.1.1 work that this completes)
- deepgram/dx-stack#4 (will gain a "scoping utilities, not just preflight" gotcha)
---
 .../ui/src/components/AgentConversation.tsx   | 24 +++++++--------
 .../src/components/AgentMicrophoneButton.tsx  | 10 +++----
 .../ui/src/components/AgentSpeakerButton.tsx  | 10 +++----
 .../ui/src/components/AgentStartButton.tsx    |  4 +--
 packages/ui/src/components/AgentStatus.tsx    |  2 +-
 packages/ui/src/components/AgentTextInput.tsx |  8 ++---
 packages/ui/src/components/MicSelector.tsx    |  2 +-
 packages/ui/src/components/Response.tsx       |  6 ++--
 packages/ui/src/components/VoiceButton.tsx    | 26 ++++++++--------
 packages/ui/src/components/ui/button.tsx      | 22 +++++++-------
 packages/ui/src/components/ui/scroll-area.tsx | 12 ++++----
 packages/ui/src/components/ui/select.tsx      | 30 +++++++++----------
 packages/ui/src/components/ui/textarea.tsx    |  2 +-
 packages/ui/src/components/ui/toggle.tsx      | 12 ++++----
 packages/ui/src/styles.css                    | 28 +++++++++--------
 15 files changed, 100 insertions(+), 98 deletions(-)

diff --git a/packages/ui/src/components/AgentConversation.tsx b/packages/ui/src/components/AgentConversation.tsx
index d162fad..d2b3380 100644
--- a/packages/ui/src/components/AgentConversation.tsx
+++ b/packages/ui/src/components/AgentConversation.tsx
@@ -26,13 +26,13 @@ export function AgentConversation({
 
   return (
     <div
-      className={cn("flex-1 min-h-0 overflow-y-auto", className)}
+      className={cn("dg:flex-1 dg:min-h-0 dg:overflow-y-auto", className)}
       style={{ scrollbarWidth: "thin" } as React.CSSProperties}
       data-agent-conversation
       aria-live="polite"
       aria-label="Conversation"
     >
-      <div className="flex flex-col gap-3 p-5 min-h-full">
+      <div className="dg:flex dg:flex-col dg:gap-3 dg:p-5 dg:min-h-full">
         {children}
         <div ref={bottomRef} aria-hidden="true" />
       </div>
@@ -67,28 +67,28 @@ export function AgentMessage({
     <div
       data-role={entry.role}
       className={cn(
-        "flex flex-col gap-1 max-w-[82%]",
-        isUser ? "self-end items-end" : "self-start items-start",
+        "dg:flex dg:flex-col dg:gap-1 dg:max-w-[82%]",
+        isUser ? "dg:self-end dg:items-end" : "dg:self-start dg:items-start",
         className,
       )}
     >
       {/* Role label */}
       {showRole && (
-        <span className="text-[10px] font-semibold uppercase tracking-widest opacity-50 px-1">
+        <span className="dg:text-[10px] dg:font-semibold dg:uppercase dg:tracking-widest dg:opacity-50 dg:px-1">
           {isUser ? "You" : "Agent"}
         </span>
       )}
 
       {/* Avatar + bubble */}
       <div className={cn(
-        "flex items-end gap-2",
-        isUser ? "flex-row-reverse" : "flex-row",
+        "dg:flex dg:items-end dg:gap-2",
+        isUser ? "dg:flex-row-reverse" : "dg:flex-row",
       )}>
         {/* Gradient avatar — assistant only */}
         {!isUser && (
           <div
             aria-hidden="true"
-            className="size-6 rounded-full shrink-0 flex items-center justify-center mb-px bg-gradient-to-br from-primary to-[#149afb]"
+            className="dg:size-6 dg:rounded-full dg:shrink-0 dg:flex dg:items-center dg:justify-center dg:mb-px dg:bg-gradient-to-br dg:from-primary dg:to-[#149afb]"
           >
             <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true">
               <path d="M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3Z" fill="white"/>
@@ -100,10 +100,10 @@ export function AgentMessage({
 
         {/* Bubble */}
         <div className={cn(
-          "px-4 py-3 text-sm leading-normal break-words border text-foreground",
+          "dg:px-4 dg:py-3 dg:text-sm dg:leading-normal dg:break-words dg:border dg:text-foreground",
           isUser
-            ? "rounded-2xl rounded-br-sm bg-[var(--msg-user-bg)] border-[var(--msg-user-border)]"
-            : "rounded-2xl rounded-bl-sm bg-card border-border shadow-sm",
+            ? "dg:rounded-2xl dg:rounded-br-sm dg:bg-[var(--msg-user-bg)] dg:border-[var(--msg-user-border)]"
+            : "dg:rounded-2xl dg:rounded-bl-sm dg:bg-card dg:border-border dg:shadow-sm",
         )}>
           {children ?? entry.content}
         </div>
@@ -111,7 +111,7 @@ export function AgentMessage({
 
       {/* Timestamp */}
       {showTimestamp && entry.timestamp && (
-        <span className="text-[10px] opacity-40 px-1 tabular-nums">
+        <span className="dg:text-[10px] dg:opacity-40 dg:px-1 dg:tabular-nums">
           {formatTime(entry.timestamp)}
         </span>
       )}
diff --git a/packages/ui/src/components/AgentMicrophoneButton.tsx b/packages/ui/src/components/AgentMicrophoneButton.tsx
index 50fa198..f23a4a2 100644
--- a/packages/ui/src/components/AgentMicrophoneButton.tsx
+++ b/packages/ui/src/components/AgentMicrophoneButton.tsx
@@ -30,11 +30,11 @@ const MicOffIcon = () => (
 );
 
 const toggleClasses = cn(
-  "h-10 w-10 shrink-0 rounded-[calc(var(--radius)-6px)] border border-border bg-card text-foreground",
-  "hover:bg-accent hover:text-accent-foreground",
-  "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary",
-  "data-[state=on]:hover:bg-[var(--primary-hover)]",
-  "data-[state=off]:text-muted-foreground",
+  "dg:h-10 dg:w-10 dg:shrink-0 dg:rounded-[calc(var(--radius)-6px)] dg:border dg:border-border dg:bg-card dg:text-foreground",
+  "dg:hover:bg-accent dg:hover:text-accent-foreground",
+  "dg:data-[state=on]:bg-primary dg:data-[state=on]:text-primary-foreground dg:data-[state=on]:border-primary",
+  "dg:data-[state=on]:hover:bg-[var(--primary-hover)]",
+  "dg:data-[state=off]:text-muted-foreground",
 );
 
 export function AgentMicrophoneButton({
diff --git a/packages/ui/src/components/AgentSpeakerButton.tsx b/packages/ui/src/components/AgentSpeakerButton.tsx
index 291d446..4be51b8 100644
--- a/packages/ui/src/components/AgentSpeakerButton.tsx
+++ b/packages/ui/src/components/AgentSpeakerButton.tsx
@@ -44,11 +44,11 @@ export function AgentSpeakerButton({
       data-agent-speaker-button
       data-state={outputMuted ? "muted" : "active"}
       className={cn(
-        "h-10 w-10 shrink-0 rounded-[calc(var(--radius)-6px)] border border-border bg-card text-foreground",
-        "hover:bg-accent hover:text-accent-foreground",
-        "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary",
-        "data-[state=on]:hover:bg-[var(--primary-hover)]",
-        "data-[state=off]:text-muted-foreground",
+        "dg:h-10 dg:w-10 dg:shrink-0 dg:rounded-[calc(var(--radius)-6px)] dg:border dg:border-border dg:bg-card dg:text-foreground",
+        "dg:hover:bg-accent dg:hover:text-accent-foreground",
+        "dg:data-[state=on]:bg-primary dg:data-[state=on]:text-primary-foreground dg:data-[state=on]:border-primary",
+        "dg:data-[state=on]:hover:bg-[var(--primary-hover)]",
+        "dg:data-[state=off]:text-muted-foreground",
         className
       )}
     >
diff --git a/packages/ui/src/components/AgentStartButton.tsx b/packages/ui/src/components/AgentStartButton.tsx
index 70d073c..8f29bc5 100644
--- a/packages/ui/src/components/AgentStartButton.tsx
+++ b/packages/ui/src/components/AgentStartButton.tsx
@@ -53,8 +53,8 @@ export function AgentStartButton({
       aria-label={typeof label === "string" ? label : "Start agent"}
       onClick={handleClick}
       className={cn(
-        "w-full font-semibold",
-        !isGhost && "hover:bg-[var(--primary-hover)] active:bg-[var(--primary-active)]",
+        "dg:w-full dg:font-semibold",
+        !isGhost && "dg:hover:bg-[var(--primary-hover)] dg:active:bg-[var(--primary-active)]",
         className
       )}
     >
diff --git a/packages/ui/src/components/AgentStatus.tsx b/packages/ui/src/components/AgentStatus.tsx
index b466848..5f963e6 100644
--- a/packages/ui/src/components/AgentStatus.tsx
+++ b/packages/ui/src/components/AgentStatus.tsx
@@ -19,7 +19,7 @@ export function AgentStatus({ className, labels }: AgentStatusProps) {
   const label = { ...DEFAULT_LABELS, ...labels }[state] ?? state;
   return (
     <span
-      className={cn("flex items-center gap-1.5 text-xs text-muted-foreground", className)}
+      className={cn("dg:flex dg:items-center dg:gap-1.5 dg:text-xs dg:text-muted-foreground", className)}
       data-agent-status
       data-state={state}
       aria-live="polite"
diff --git a/packages/ui/src/components/AgentTextInput.tsx b/packages/ui/src/components/AgentTextInput.tsx
index 9c53b4b..2793d18 100644
--- a/packages/ui/src/components/AgentTextInput.tsx
+++ b/packages/ui/src/components/AgentTextInput.tsx
@@ -41,7 +41,7 @@ export function AgentTextInput({
   const isDisabled = disabled || !isActive;
 
   return (
-    <div className={cn("flex items-center gap-2 flex-1", className)} data-agent-text-input>
+    <div className={cn("dg:flex dg:items-center dg:gap-2 dg:flex-1", className)} data-agent-text-input>
       <Textarea
         value={value}
         onChange={(e) => setValue(e.target.value)}
@@ -52,7 +52,7 @@ export function AgentTextInput({
         disabled={isDisabled}
         aria-label="Message input"
         rows={1}
-        className="min-h-[42px] max-h-[120px] resize-none py-2.5 text-sm"
+        className="dg:min-h-[42px] dg:max-h-[120px] dg:resize-none dg:py-2.5 dg:text-sm"
       />
       {submitButton !== undefined ? (
         <Button
@@ -61,7 +61,7 @@ export function AgentTextInput({
           onClick={handleSend}
           disabled={isDisabled || !value.trim()}
           aria-label="Send"
-          className="shrink-0 text-muted-foreground hover:text-primary"
+          className="dg:shrink-0 dg:text-muted-foreground dg:hover:text-primary"
         >
           {submitButton}
         </Button>
@@ -72,7 +72,7 @@ export function AgentTextInput({
           onClick={handleSend}
           disabled={isDisabled || !value.trim()}
           aria-label="Send"
-          className="shrink-0 text-muted-foreground hover:text-primary"
+          className="dg:shrink-0 dg:text-muted-foreground dg:hover:text-primary"
         >
           <SendIcon />
         </Button>
diff --git a/packages/ui/src/components/MicSelector.tsx b/packages/ui/src/components/MicSelector.tsx
index 8e732c9..1a209d3 100644
--- a/packages/ui/src/components/MicSelector.tsx
+++ b/packages/ui/src/components/MicSelector.tsx
@@ -86,7 +86,7 @@ export function MicSelector({
       disabled={disabled || loading}
     >
       <SelectTrigger
-        className={cn("text-sm", className)}
+        className={cn("dg:text-sm", className)}
         data-agent-mic-selector
         aria-label="Select microphone"
       >
diff --git a/packages/ui/src/components/Response.tsx b/packages/ui/src/components/Response.tsx
index 4bd580b..1d40ff9 100644
--- a/packages/ui/src/components/Response.tsx
+++ b/packages/ui/src/components/Response.tsx
@@ -28,9 +28,9 @@ export function Response({ children, className }: ResponseProps) {
   return (
     <div
       className={cn(
-        "prose prose-sm dark:prose-invert max-w-none",
-        "prose-a:text-primary prose-code:text-foreground",
-        "prose-pre:bg-input prose-pre:border prose-pre:border-border",
+        "dg:prose dg:prose-sm dg:dark:prose-invert dg:max-w-none",
+        "dg:prose-a:text-primary dg:prose-code:text-foreground",
+        "dg:prose-pre:bg-input dg:prose-pre:border dg:prose-pre:border-border",
         className
       )}
       data-agent-response
diff --git a/packages/ui/src/components/VoiceButton.tsx b/packages/ui/src/components/VoiceButton.tsx
index 4277037..5afd998 100644
--- a/packages/ui/src/components/VoiceButton.tsx
+++ b/packages/ui/src/components/VoiceButton.tsx
@@ -64,27 +64,27 @@ export function VoiceButton({ className, labels, onClick }: VoiceButtonProps) {
       onClick={handleClick}
       className={cn(
         // Base layout — override Button default sizing
-        "inline-flex items-center gap-2.5 px-7 py-3.5 text-[15px] font-semibold h-auto",
+        "dg:inline-flex dg:items-center dg:gap-2.5 dg:px-7 dg:py-3.5 dg:text-[15px] dg:font-semibold dg:h-auto",
         // Idle / base
-        "border border-border bg-card text-foreground",
-        "hover:bg-accent hover:border-primary",
-        "active:bg-[var(--accent-active)]",
-        "focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2",
+        "dg:border dg:border-border dg:bg-card dg:text-foreground",
+        "dg:hover:bg-accent dg:hover:border-primary",
+        "dg:active:bg-[var(--accent-active)]",
+        "dg:focus-visible:outline-2 dg:focus-visible:outline-primary dg:focus-visible:outline-offset-2",
         // Connecting — subtle pulse
-        voiceState === "connecting" && "animate-dg-pulse-fast",
+        voiceState === "connecting" && "dg:animate-dg-pulse-fast",
         // Listening — accent border glow (box-shadow rule lives in @layer components)
-        voiceState === "listening" && "border-primary",
+        voiceState === "listening" && "dg:border-primary",
         // Speaking — primary fill, pulse
         voiceState === "speaking" && [
-          "bg-primary text-primary-foreground border-primary",
-          "hover:bg-[var(--primary-hover)]",
-          "animate-dg-pulse-slow",
-          "[&_svg]:stroke-primary-foreground",
+          "dg:bg-primary dg:text-primary-foreground dg:border-primary",
+          "dg:hover:bg-[var(--primary-hover)]",
+          "dg:animate-dg-pulse-slow",
+          "dg:[&_svg]:stroke-primary-foreground",
         ],
         // Error (reserved for future use — exposed via data-voice-state for consumer styling)
-        (voiceState as string) === "error" && "border-destructive text-destructive hover:border-destructive",
+        (voiceState as string) === "error" && "dg:border-destructive dg:text-destructive dg:hover:border-destructive",
         // Connecting disabled cursor
-        isConnecting && "cursor-wait",
+        isConnecting && "dg:cursor-wait",
         className
       )}
     >
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index 707b1e2..6a82888 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -5,22 +5,22 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "dg:inline-flex dg:items-center dg:justify-center dg:gap-2 dg:whitespace-nowrap dg:rounded-md dg:text-sm dg:font-medium dg:transition-colors dg:focus-visible:outline-none dg:focus-visible:ring-1 dg:focus-visible:ring-ring dg:disabled:pointer-events-none dg:disabled:opacity-50 dg:[&_svg]:pointer-events-none dg:[&_svg]:size-4 dg:[&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: "dg:bg-primary dg:text-primary-foreground dg:shadow dg:hover:bg-primary/90",
+        destructive: "dg:bg-destructive dg:text-destructive-foreground dg:shadow-sm dg:hover:bg-destructive/90",
+        outline: "dg:border dg:border-input dg:bg-background dg:shadow-sm dg:hover:bg-accent dg:hover:text-accent-foreground",
+        secondary: "dg:bg-secondary dg:text-secondary-foreground dg:shadow-sm dg:hover:bg-secondary/80",
+        ghost: "dg:hover:bg-accent dg:hover:text-accent-foreground",
+        link: "dg:text-primary dg:underline-offset-4 dg:hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "dg:h-9 dg:px-4 dg:py-2",
+        sm: "dg:h-8 dg:rounded-md dg:px-3 dg:text-xs",
+        lg: "dg:h-10 dg:rounded-md dg:px-8",
+        icon: "dg:h-9 dg:w-9",
       },
     },
     defaultVariants: {
diff --git a/packages/ui/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
index f9cab02..c175bae 100644
--- a/packages/ui/src/components/ui/scroll-area.tsx
+++ b/packages/ui/src/components/ui/scroll-area.tsx
@@ -11,10 +11,10 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn("dg:relative dg:overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="dg:h-full dg:w-full dg:rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
@@ -31,14 +31,14 @@ const ScrollBar = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      "dg:flex dg:touch-none dg:select-none dg:transition-colors",
+      orientation === "vertical" && "dg:h-full dg:w-2.5 dg:border-l dg:border-l-transparent dg:p-[1px]",
+      orientation === "horizontal" && "dg:h-2.5 dg:flex-col dg:border-t dg:border-t-transparent dg:p-[1px]",
       className
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="dg:relative dg:flex-1 dg:rounded-full dg:bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index ce3e36d..58a1164 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -17,14 +17,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "dg:flex dg:h-9 dg:w-full dg:items-center dg:justify-between dg:whitespace-nowrap dg:rounded-md dg:border dg:border-input dg:bg-transparent dg:px-3 dg:py-2 dg:text-sm dg:shadow-sm dg:ring-offset-background dg:data-[placeholder]:text-muted-foreground dg:focus:outline-none dg:focus:ring-1 dg:focus:ring-ring dg:disabled:cursor-not-allowed dg:disabled:opacity-50 dg:[&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="dg:h-4 dg:w-4 dg:opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -36,10 +36,10 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    className={cn("dg:flex dg:cursor-default dg:items-center dg:justify-center dg:py-1", className)}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUp className="dg:h-4 dg:w-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -50,10 +50,10 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    className={cn("dg:flex dg:cursor-default dg:items-center dg:justify-center dg:py-1", className)}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDown className="dg:h-4 dg:w-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -66,9 +66,9 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "dg:relative dg:z-50 dg:max-h-[--radix-select-content-available-height] dg:min-w-[8rem] dg:overflow-y-auto dg:overflow-x-hidden dg:rounded-md dg:border dg:bg-popover dg:text-popover-foreground dg:shadow-md dg:data-[state=open]:animate-in dg:data-[state=closed]:animate-out dg:data-[state=closed]:fade-out-0 dg:data-[state=open]:fade-in-0 dg:data-[state=closed]:zoom-out-95 dg:data-[state=open]:zoom-in-95 dg:data-[side=bottom]:slide-in-from-top-2 dg:data-[side=left]:slide-in-from-right-2 dg:data-[side=right]:slide-in-from-left-2 dg:data-[side=top]:slide-in-from-bottom-2 dg:origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "dg:data-[side=bottom]:translate-y-1 dg:data-[side=left]:-translate-x-1 dg:data-[side=right]:translate-x-1 dg:data-[side=top]:-translate-y-1",
         className
       )}
       position={position}
@@ -77,9 +77,9 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
+          "dg:p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "dg:h-[var(--radix-select-trigger-height)] dg:w-full dg:min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
@@ -96,7 +96,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    className={cn("dg:px-2 dg:py-1.5 dg:text-sm dg:font-semibold", className)}
     {...props}
   />
 ));
@@ -109,14 +109,14 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "dg:relative dg:flex dg:w-full dg:cursor-default dg:select-none dg:items-center dg:rounded-sm dg:py-1.5 dg:pl-2 dg:pr-8 dg:text-sm dg:outline-none dg:focus:bg-accent dg:focus:text-accent-foreground dg:data-[disabled]:pointer-events-none dg:data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="dg:absolute dg:right-2 dg:flex dg:h-3.5 dg:w-3.5 dg:items-center dg:justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="dg:h-4 dg:w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
@@ -130,7 +130,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("dg:-mx-1 dg:my-1 dg:h-px dg:bg-muted", className)}
     {...props}
   />
 ));
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
index 18e08c2..f4deeb4 100644
--- a/packages/ui/src/components/ui/textarea.tsx
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "dg:flex dg:min-h-[60px] dg:w-full dg:rounded-md dg:border dg:border-input dg:bg-transparent dg:px-3 dg:py-2 dg:text-base dg:shadow-sm dg:placeholder:text-muted-foreground dg:focus-visible:outline-none dg:focus-visible:ring-1 dg:focus-visible:ring-ring dg:disabled:cursor-not-allowed dg:disabled:opacity-50 dg:md:text-sm",
         className
       )}
       ref={ref}
diff --git a/packages/ui/src/components/ui/toggle.tsx b/packages/ui/src/components/ui/toggle.tsx
index 9fa0afe..ab4d587 100644
--- a/packages/ui/src/components/ui/toggle.tsx
+++ b/packages/ui/src/components/ui/toggle.tsx
@@ -7,17 +7,17 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "dg:inline-flex dg:items-center dg:justify-center dg:gap-2 dg:rounded-md dg:text-sm dg:font-medium dg:transition-colors dg:hover:bg-muted dg:hover:text-muted-foreground dg:focus-visible:outline-none dg:focus-visible:ring-1 dg:focus-visible:ring-ring dg:disabled:pointer-events-none dg:disabled:opacity-50 dg:data-[state=on]:bg-accent dg:data-[state=on]:text-accent-foreground dg:[&_svg]:pointer-events-none dg:[&_svg]:size-4 dg:[&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+        default: "dg:bg-transparent",
+        outline: "dg:border dg:border-input dg:bg-transparent dg:shadow-sm dg:hover:bg-accent dg:hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
+        default: "dg:h-9 dg:px-2 dg:min-w-9",
+        sm: "dg:h-8 dg:px-1.5 dg:min-w-8",
+        lg: "dg:h-10 dg:px-2.5 dg:min-w-10",
       },
     },
     defaultVariants: {
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index 774802a..8cce157 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -1,21 +1,23 @@
-/* Tailwind v4 imports, granular so we can scope preflight.
+/* Tailwind v4 imports for @deepgram/ui.
  *
- * The full `@import "tailwindcss";` shortcut pulls preflight in at the global
- * scope, which uses universal selectors (`*, ::before, ::after`, `html`, `body`)
- * that bleed onto any host page that loads the bundle. The
- * `tailwindcss-scoped-preflight` plugin rewrites every preflight rule with a
- * `[data-dg-agent]` ancestor, so the reset only applies to widget descendants.
+ * Two scoping mechanisms keep this bundle safe to load on any host page:
  *
- * Theme tokens and utilities stay global so embedders building their own
- * widget layouts with @deepgram/ui components continue to get class-based
- * styling via Tailwind utilities.
+ * 1. `prefix(dg)` namespaces every utility, component, and typography class
+ *    under a `dg:` variant prefix, so `.flex` becomes `.dg:flex`. The host
+ *    page's own Tailwind utilities never collide because their class names
+ *    live in a different namespace.
  *
- * Do NOT add `@import "tailwindcss";` back. Granular imports + the plugin are
- * the contract that keeps the host page untouched.
+ * 2. `tailwindcss-scoped-preflight` rewrites every preflight rule with a
+ *    `[data-dg-agent]` ancestor so the universal-selector reset
+ *    (`*, ::before, ::after`, `html`, `body`) only applies inside widget
+ *    descendants and never bleeds onto the host page.
+ *
+ * Together, the bundle ships zero unscoped global selectors AND zero
+ * unprefixed utility class names. Any consumer of this package writing
+ * components must use the `dg:` prefix on Tailwind classes.
  */
 @layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
+@import "tailwindcss" prefix(dg);
 @plugin "@tailwindcss/typography";
 @plugin "tailwindcss-scoped-preflight" {
   isolation-strategy: inside;