Limit tailwind preflight to scoped containers

saulshanabrook · saulshanabrook · commit 09f54e6cc219 · 2024-10-16T21:04:48.000-04:00
egraphs-good/egglog#426 (comment)
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>E-Graph Visualizer</title>
   </head>
-  <body class="h-full">
+  <body class="h-full twp">
     <div class="h-full" id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "egraph-visualizer",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/egraphs-good/egraph-visualizer.git"
@@ -45,6 +45,7 @@
     "globals": "^15.11.0",
     "postcss": "8.4.47",
     "tailwindcss": "3.4.13",
+    "tailwindcss-scoped-preflight": "^3.4.5",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.8.1",
     "vite": "^5.4.8"
diff --git a/src/Visualizer.tsx b/src/Visualizer.tsx
@@ -462,7 +462,7 @@ export function Visualizer({ egraphs, height = null, resize = false }: { egraphs
   );
 
   return (
-    <div className={`w-full relative ${resize ? "resize-y" : ""}`} style={{ height: height || "100%" }} ref={setRootElem}>
+    <div className={`twp w-full relative ${resize ? "resize-y" : ""}`} style={{ height: height || "100%" }} ref={setRootElem}>
       {/* Hidden node to measure text size  */}
       <div className="invisible absolute">
         <ENode outerRef={setOuterElem} innerRef={setInnerElem} />
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,9 @@
+import { scopedPreflightStyles, isolateInsideOfContainer } from 'tailwindcss-scoped-preflight';
+
 // https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/c15f630866480e00d7a39258db0f61b39704e00e/tailwind.config.js
+
 const defaultTheme = require('tailwindcss/defaultTheme');
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -25,6 +29,9 @@ export default {
     require('tailwindcss-react-aria-components'),
     require('tailwindcss-animate'),
     require('@tailwindcss/container-queries'),
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer('.twp', {}),
+    }),
   ],
   important: true,
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3411,6 +3411,7 @@ __metadata:
     tailwindcss: "npm:3.4.13"
     tailwindcss-animate: "npm:1.0.7"
     tailwindcss-react-aria-components: "npm:1.1.6"
+    tailwindcss-scoped-preflight: "npm:^3.4.5"
     typescript: "npm:^5.6.3"
     typescript-eslint: "npm:^8.8.1"
     vega-scale: "npm:7.4.1"
@@ -5336,6 +5337,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss-scoped-preflight@npm:^3.4.5":
+  version: 3.4.5
+  resolution: "tailwindcss-scoped-preflight@npm:3.4.5"
+  peerDependencies:
+    postcss: ^8
+    tailwindcss: ^3
+  checksum: 10c0/d61f85deba587affb70eb430ca2722ce798fc2b62f9230a7d2d2dd35765e7d83d99d8e46e0fc6ff197ad2c47bd66bc9b5b77d200b3d885644a14996ef309eaef
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:3.4.13":
   version: 3.4.13
   resolution: "tailwindcss@npm:3.4.13"
