Vendor stylesheets load in Tailwind's base layer through a vendor.css shim, so our overrides win outright; the editor's drag placeholder takes the 12% primary

frontend/src/components/Common/UplotChart.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react"
 import uPlot from "uplot"
-import "uplot/dist/uPlot.min.css"
 
-// After uPlot's own sheet, and beside this component rather than in the
-// dashboard chunk: a chart on Health or Home is styled without a dashboard
-// having been visited first.
+// Beside this component rather than in the dashboard chunk: a chart on Health
+// or Home is styled without a dashboard having been visited first. uPlot's own
+// sheet comes in through `vendor.css`.
 import "./uplot.css"
 
 import type { HistoryPoint } from "@/client"

frontend/src/components/Dashboard/DashboardEditor.tsx

@@ -9,7 +9,6 @@ import {
   type Position,
   setTransform,
 } from "react-grid-layout"
-import "react-grid-layout/css/styles.css"
 
 import {
   type ApiError,

frontend/src/components/Flow/BrainView.tsx

@@ -9,7 +9,6 @@ import {
   ReactFlowProvider,
   useReactFlow,
 } from "@xyflow/react"
-import "@xyflow/react/dist/style.css"
 import {
   forceCollide,
   forceLink,

frontend/src/components/Flow/FlowEditor.tsx

@@ -1,3 +1,10 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query"
+import { useNavigate } from "@tanstack/react-router"
 import {
   Background,
   BackgroundVariant,
@@ -13,14 +20,6 @@ import {
   useStore,
   useUpdateNodeInternals,
 } from "@xyflow/react"
-import "@xyflow/react/dist/style.css"
-import {
-  useMutation,
-  useQuery,
-  useQueryClient,
-  useSuspenseQuery,
-} from "@tanstack/react-query"
-import { useNavigate } from "@tanstack/react-router"
 import { Workflow } from "lucide-react"
 import { motion } from "motion/react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"

frontend/src/index.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "./vendor.css";
 
 @custom-variant dark (&:is(.dark *));
 

frontend/src/vendor.css

@@ -0,0 +1,10 @@
+/*
+ * The libraries' own stylesheets, in Tailwind's `base` layer.
+ *
+ * Imported from TS they were unlayered, so our overrides beat them only by
+ * loading later, and lost wherever a lazy chunk brought the library's sheet in
+ * after ours. In `base` every sheet of ours and every utility wins over them.
+ */
+@import "@xyflow/react/dist/style.css" layer(base);
+@import "uplot/dist/uPlot.min.css" layer(base);
+@import "react-grid-layout/css/styles.css" layer(base);