fix(ui): namespace tailwind utilities under dg: prefix to stop host-page collisions

[lukeocodes]

Why

deepgram/ui#27 scoped Tailwind preflight to [data-dg-agent] via tailwindcss-scoped-preflight, but utility classes still ship unprefixed. When the bundle loads on a host page that also uses Tailwind, source order makes the bundle's .prose, .flex, .container, .max-w-none etc rules win and visibly break host layout. Reproduced on the deepgram-docs preview where .prose { max-width: 65ch } collapses content the moment the widget mounts. 42 utility-class collisions counted against Fern's HTML alone; more on arbitrary customer sites.

tailwindcss-scoped-preflight only handles preflight (*, ::before, ::after). Utilities and the typography plugin's .prose rules need a different mechanism.

What changed

• packages/ui/src/styles.css: switched to @import "tailwindcss" prefix(dg) (Tailwind v4 prefix syntax). Replaced the granular theme/utilities imports because prefix applies cleanly to the full import. The scoped-preflight plugin still runs for the universal-selector reset.
• All .tsx components: every Tailwind utility in className=, cn(...), and cva(...) strings now uses the dg: prefix. flex items-center gap-2 -> dg:flex dg:items-center dg:gap-2, hover:bg-accent -> dg:hover:bg-accent, data-[state=on]:bg-primary -> dg:data-[state=on]:bg-primary, [&>span]:line-clamp-1 -> dg:[&>span]:line-clamp-1. Custom .dg-* component classes (dg-btn, dg-panel, dg-fab) are unchanged - they're not Tailwind utilities.
• defaultVariants keys in cva(...) calls ({ variant: "default" }) stay unprefixed - those are variant-name references, not class names.

Verification

	before (0.1.1)	after
Unprefixed Tailwind utility rules in bundle	42 collisions with Fern HTML, many more in general	0
Prefixed .dg\:* utility rules	0	353
Scoped :where([data-dg-agent], …) preflight rules	76	76 (unchanged)
Custom .dg-* component classes	33	33 (unchanged)
Unit tests	13/13 pass	13/13 pass
Bundle size	167.5 KB	188.9 KB (+21 KB, the prefixed utility rules)

The +21 KB is real generated CSS that was silently dropped before because Tailwind couldn't see prefix-less class usages with prefix mode on. With the prefix matching, all utility classes used by components now emit rules.

Expected after merge

1. release-please opens chore(main): release ui 0.1.2 (patch bump under bump-patch-for-minor-pre-major).
2. Merging that publishes @deepgram/ui@0.1.2 to npm.
3. deepgram/agent needs a follow-up PR bumping @deepgram/ui to ^0.1.2 in packages/widget/package.json. That triggers @deepgram/agents-widget@0.1.5 -> CDN deploy with the prefixed bundle.
4. Once cdn.deepgram.com/widgets/latest/widget.umd.js ships the prefixed bundle, the docs preview narrowing-on-mount bug goes away and customer sites embedding the widget stop having their layouts hijacked.

Refs

• Tailwind v4 prefix docs
• 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 section

Note for downstream consumers

Anyone writing components that use @deepgram/ui Tailwind utilities directly (rare - most consumers use the React components without touching their classes) MUST use the dg: prefix:

// Before
<div className="flex items-center gap-2" />

// After
<div className="dg:flex dg:items-center dg:gap-2" />

This only applies to consumers running their own Tailwind through @deepgram/ui's styles. Consumers who just import <AgentMicrophoneButton /> etc are unaffected.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui-web	Ready	Preview, Comment	May 7, 2026 8:41am