tailwind shadow dom

apps/extension/content/ContentApp.tsx

@@ -29,19 +29,11 @@ export default function ContentApp() {
 
   return (
     <div className="flex justify-end items-end min-h-screen w-full">
-      <div className="h-[30vh] absolute flex bottom-12 items-center">
-        <button
-          className={`${hover && "opacity-100 p-2 rounded-l-2xl m-2"} transition bg-background border-2 border-border opacity-0 size-4`}
-        >
-          <img
-            width={24}
-            height={24}
-            className="m-2"
-            src={icon}
-            alt="Save to supermemory.ai"
-          />
-        </button>
-      </div>
+      <button
+        className={`${hover && "opacity-100 p-2 rounded-l-2xl"} transition bg-slate-700 border border-white/30 opacity-0 size-4 h-[30vh] absolute flex bottom-12 items-center`}
+      >
+        <img width={24} height={24} src={icon} alt="Save to supermemory.ai" />
+      </button>
     </div>
   );
 }

apps/extension/content/base.css

@@ -1,6 +1,6 @@
-@tailwind base;
+/* @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities; */
 
 #supermemory-extension-host {
   position: fixed;

apps/extension/content/content.tsx

@@ -1,33 +1,50 @@
 import ReactDOM from "react-dom/client";
 import ContentApp from "./ContentApp";
+import("./base.css");
 
 setTimeout(initial, 1000);
 
-const appendTailwindStyleData = (shadowRoot: ShadowRoot) => {
-  const styleSheet = document.createElement("style");
+const TAILWIND_URL =
+  "https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css";
 
-  const resourceUrl = chrome.runtime.getURL("../public/output.css");
-  const tobeRendered = fetch(resourceUrl)
-    .then((res) => res.text())
-    .then((data) => {
-      console.log(data);
-      styleSheet.textContent = data;
+const appendTailwindStyleData = (shadowRoot: ShadowRoot) => {
+  // Load and inject the local Tailwind CSS file into the shadow DOM
+  const styleSheet = document.createElement("style");
+  // Change this path to your actual Tailwind CSS file's location
+  fetch(TAILWIND_URL)
+    .then((response) => response.text())
+    .then((css) => {
+      styleSheet.textContent = css;
       shadowRoot.appendChild(styleSheet);
     });
 };
 
+const appendTailwindStyleLink = (shadowRoot: ShadowRoot) => {
+  // Import Tailwind CSS and inject it into the shadow DOM
+  const styleSheet = document.createElement("link");
+  styleSheet.rel = "stylesheet";
+  styleSheet.href = TAILWIND_URL;
+  shadowRoot.appendChild(styleSheet);
+};
+
 function initial() {
+  // Create a new div element to host the shadow root.
+  // Styles for this div is in `content/content.css`
   const hostDiv = document.createElement("div");
-  hostDiv.id = "supermemory-extension-host";
+  hostDiv.id = "extension-host";
   document.body.appendChild(hostDiv);
 
+  // Attach the shadow DOM to the hostDiv and set the mode to
+  // 'open' for accessibility from JavaScript.
+  // Ref https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
   const shadowRoot = hostDiv.attachShadow({ mode: "open" });
 
+  // Create a new div element that will be the root container for the React app
   const rootDiv = document.createElement("div");
-  rootDiv.id = "supermemor-extension-root";
+  rootDiv.id = "extension-root";
   shadowRoot.appendChild(rootDiv);
 
-  appendTailwindStyleData(shadowRoot);
+  appendTailwindStyleLink(shadowRoot);
 
   const root = ReactDOM.createRoot(rootDiv);
   root.render(<ContentApp />);