Skip to content

fix: clarify Tailwind scoping with .zenuml class #284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 23, 2025
Merged

fix: clarify Tailwind scoping with .zenuml class #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions src/components/DiagramFrame/DiagramFrame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,7 @@ export const DiagramFrame = ({
};
const setStyle = (style: string) => {
const styleElementId = "zenuml-style";
let styleElement =
document.getElementById(styleElementId) ||
document.createElement("style");
let styleElement: HTMLElement;
styleElement = document.createElement("style");
styleElement.id = styleElementId;
document.head.append(styleElement);
Expand All @@ -105,8 +103,8 @@ export const DiagramFrame = ({
const setRemoteCss = (url: string) => {
const hostname = new URL(url).hostname;

// if url is from github, we fetch the raw content and set the style
// if url contains github.com or githubusercontent.com, we fetch the raw content and set the style
// if url is from GitHub, we fetch the raw content and set the style
// if url contains GitHub.com or githubusercontent.com, we fetch the raw content and set the style
if (
hostname === "https://github.com" ||
hostname === "https://githubusercontent.com"
Expand All @@ -124,9 +122,7 @@ export const DiagramFrame = ({
}
const remoteCssUrlId = "zenuml-remote-css";
// check if remote css element exists
let remoteCssElement =
(document.getElementById(remoteCssUrlId) as HTMLLinkElement) ||
document.createElement("link");
let remoteCssElement: HTMLLinkElement;
remoteCssElement = document.createElement("link");
remoteCssElement.id = remoteCssUrlId;
remoteCssElement.rel = "stylesheet";
Expand All @@ -146,9 +142,12 @@ export const DiagramFrame = ({
}));

return (
// The Tailwind utilities (p-1, bg-skin-canvas, inline-block) work here because this component
// is rendered inside a parent div with .zenuml class in core.tsx. The Tailwind configuration
// uses important: ".zenuml" which generates selectors like ".zenuml .p-1" for scoped styling.
<div
ref={containerRef}
className={cn("zenuml p-1 bg-skin-canvas inline-block", theme)}
className={cn("p-1 bg-skin-canvas inline-block", theme)}
>
<Debug />
<div className="frame text-skin-base bg-skin-frame border-skin-frame relative m-1 origin-top-left whitespace-nowrap border rounded">
Expand Down
7 changes: 6 additions & 1 deletion src/core.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,12 @@ export default class ZenUml implements IZenUml {
createRoot(this.el).render(
<StrictMode>
<Provider store={store}>
<div> {naked ? <SeqDiagram /> : <DiagramFrame />}</div>
{/* IMPORTANT: The .zenuml class here works with Tailwind's important: ".zenuml" configuration.
With this setup, Tailwind generates selectors like ".zenuml .bg-skin-canvas" instead of
just ".bg-skin-canvas". This means all Tailwind utilities used in child components
(like DiagramFrame) will only work when they are descendants of an element with the
.zenuml class. This provides scoped styling for the ZenUML library. */}
<div className="zenuml"> {naked ? <SeqDiagram /> : <DiagramFrame />}</div>
</Provider>
</StrictMode>,
);
Expand Down
Loading