From bd64c692bf4970983909ba88eef716c0e80b7db1 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Sat, 3 Jun 2023 16:11:27 -0600
Subject: [PATCH 1/3] remove important from tailwind config (WIP, website is
 broken)

---
 packages/components/.storybook/preview.tsx    |  12 -
 packages/components/package.json              |  16 +-
 .../components/DistributionsChart/index.tsx   |   6 +-
 .../src/components/SquiggleChart.tsx          |   7 +-
 .../src/components/SquiggleContainer.tsx      |  28 --
 .../src/components/SquiggleEditor.tsx         |   5 +-
 .../components/SquigglePlayground/index.tsx   |  67 ++-
 .../SquiggleViewer/ItemSettingsMenu.tsx       |  17 +-
 packages/components/src/index.ts              |   1 -
 packages/components/src/styles/base.css       | 397 ------------------
 packages/components/src/styles/forms.css      | 182 --------
 packages/components/src/styles/main.css       |  25 +-
 .../tailwind-plugin.cts}                      |  28 +-
 packages/components/tailwind.config.ts        |   9 +
 packages/components/tsconfig.json             |   3 +-
 packages/hub/src/app/ClientApp.tsx            |  11 +-
 packages/ui/README.md                         |   6 +-
 17 files changed, 81 insertions(+), 739 deletions(-)
 delete mode 100644 packages/components/src/components/SquiggleContainer.tsx
 delete mode 100644 packages/components/src/styles/base.css
 delete mode 100644 packages/components/src/styles/forms.css
 rename packages/components/{tailwind.config.js => src/tailwind-plugin.cts} (50%)
 create mode 100644 packages/components/tailwind.config.ts

diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx
index cdec2f2a67..7db8082159 100644
--- a/packages/components/.storybook/preview.tsx
+++ b/packages/components/.storybook/preview.tsx
@@ -1,17 +1,5 @@
-import * as React from "react";
-
 import "../src/styles/main.css";
 
-import { SquiggleContainer } from "../src/components/SquiggleContainer";
-
-export const decorators = [
-  (Story) => (
-    <SquiggleContainer>
-      <Story />
-    </SquiggleContainer>
-  ),
-];
-
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
diff --git a/packages/components/package.json b/packages/components/package.json
index 1fc7f149d2..f3123ce4b8 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -75,7 +75,7 @@
   "scripts": {
     "start": "yarn dev",
     "dev": "storybook dev -p 6006",
-    "build:typescript": "rm -rf dist/esm && tsc",
+    "build:typescript": "rm -rf dist/src dist/tsconfig.tsbuildinfo && tsc",
     "build:css": "postcss ./src/styles/main.css -o ./dist/main.css",
     "build:lezer": "cd ./src/languageSupport; mkdir -p generated; lezer-generator ./squiggle.grammar --output generated/squiggle.ts",
     "build:storybook": "storybook build",
@@ -125,14 +125,20 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/esm/src/index.js",
-      "types": "./dist/types/src/index.d.ts"
+      "import": "./dist/src/index.js",
+      "types": "./dist/src/index.d.ts"
     },
     "./dist/main.css": {
       "default": "./dist/main.css"
+    },
+    "./main.css": {
+      "default": "./dist/main.css"
+    },
+    "./plugin": {
+      "default": "./dist/tailwind-plugin.cjs"
     }
   },
-  "module": "./dist/esm/src/index.js",
-  "types": "./dist/types/src/index.js",
+  "module": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
   "source": "./src/index.ts"
 }
diff --git a/packages/components/src/components/DistributionsChart/index.tsx b/packages/components/src/components/DistributionsChart/index.tsx
index d14f91cb72..43ba760238 100644
--- a/packages/components/src/components/DistributionsChart/index.tsx
+++ b/packages/components/src/components/DistributionsChart/index.tsx
@@ -1,7 +1,6 @@
 import { clsx } from "clsx";
 import * as d3 from "d3";
 import isEqual from "lodash/isEqual.js";
-import * as React from "react";
 import { FC, useCallback, useState } from "react";
 
 import {
@@ -28,7 +27,6 @@ import { SummaryTable } from "./SummaryTable.js";
 
 import { Point } from "../../lib/draw/types.js";
 import { DrawContext } from "../../lib/hooks/useCanvas.js";
-import { tailwindSelector } from "../SquiggleContainer.js";
 
 export type DistributionsChartProps = {
   plot: SqDistributionsPlot;
@@ -254,8 +252,7 @@ const InnerDistributionsChart: FC<{
       render={() => (
         <div
           className={clsx(
-            "bg-white border border-gray-300 rounded text-xs p-2 grid gap-x-2",
-            "squiggle" // tooltip is rendered in a portal, so we need this because squiggle-components styles depend on it
+            "bg-white border border-gray-300 rounded text-xs p-2 grid gap-x-2"
           )}
           style={{
             gridTemplateColumns: "min-content min-content",
@@ -268,7 +265,6 @@ const InnerDistributionsChart: FC<{
           <br />
         </div>
       )}
-      tailwindSelector={tailwindSelector}
     >
       <canvas
         data-testid="multi-distribution-chart"
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index e1dbda4e53..49dec48aa0 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { useSquiggle, SquiggleArgs } from "../lib/hooks/useSquiggle.js";
-import { SquiggleContainer } from "./SquiggleContainer.js";
 import { SquiggleViewer, SquiggleViewerProps } from "./SquiggleViewer/index.js";
 import { getValueToRender } from "../lib/utility.js";
 
@@ -13,9 +12,5 @@ export const SquiggleChart: React.FC<Props> = React.memo((props) => {
 
   const valueToRender = getValueToRender(resultAndBindings);
 
-  return (
-    <SquiggleContainer>
-      <SquiggleViewer {...props} result={valueToRender} />
-    </SquiggleContainer>
-  );
+  return <SquiggleViewer {...props} result={valueToRender} />;
 });
diff --git a/packages/components/src/components/SquiggleContainer.tsx b/packages/components/src/components/SquiggleContainer.tsx
deleted file mode 100644
index 88e2c47748..0000000000
--- a/packages/components/src/components/SquiggleContainer.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useContext } from "react";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-type SquiggleContextShape = {
-  containerized: boolean;
-};
-const SquiggleContext = React.createContext<SquiggleContextShape>({
-  containerized: false,
-});
-
-export const tailwindSelector = "squiggle";
-
-export const SquiggleContainer: React.FC<Props> = ({ children }) => {
-  const context = useContext(SquiggleContext);
-
-  if (context.containerized) {
-    return <>{children}</>;
-  } else {
-    return (
-      <SquiggleContext.Provider value={{ containerized: true }}>
-        <div className={tailwindSelector}>{children}</div>
-      </SquiggleContext.Provider>
-    );
-  }
-};
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 5259eb68e8..b27c09dab2 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -4,7 +4,6 @@ import { useMaybeControlledValue } from "../lib/hooks/index.js";
 import { SquiggleArgs, useSquiggle } from "../lib/hooks/useSquiggle.js";
 import { getErrors, getValueToRender } from "../lib/utility.js";
 import { CodeEditor } from "./CodeEditor.js";
-import { SquiggleContainer } from "./SquiggleContainer.js";
 import { SquiggleViewer, SquiggleViewerProps } from "./SquiggleViewer/index.js";
 
 export type SquiggleEditorProps = SquiggleArgs & {
@@ -25,7 +24,7 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
   const errors = getErrors(resultAndBindings.result);
 
   return (
-    <SquiggleContainer>
+    <div>
       <div
         className="border border-grey-200 p-2 m-4"
         data-testid="squiggle-editor"
@@ -41,6 +40,6 @@ export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
       {props.hideViewer ? null : (
         <SquiggleViewer result={valueToRender} {...props} />
       )}
-    </SquiggleContainer>
+    </div>
   );
 };
diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx
index fe3c21feb1..719c836374 100644
--- a/packages/components/src/components/SquigglePlayground/index.tsx
+++ b/packages/components/src/components/SquigglePlayground/index.tsx
@@ -25,7 +25,6 @@ import { useMaybeControlledValue, useSquiggle } from "../../lib/hooks/index.js";
 import { JsImports } from "../../lib/jsImports.js";
 import { getErrors, getValueToRender, isMac } from "../../lib/utility.js";
 import { CodeEditor, CodeEditorHandle } from "../CodeEditor.js";
-import { SquiggleContainer } from "../SquiggleContainer.js";
 import {
   SquiggleViewer,
   SquiggleViewerProps,
@@ -217,41 +216,39 @@ export const SquigglePlayground: React.FC<PlaygroundProps> = (props) => {
   }, []);
 
   return (
-    <SquiggleContainer>
-      <PlaygroundContext.Provider value={{ getLeftPanelElement }}>
-        <StyledTab.Group>
-          <div
-            className="pb-4"
-            style={{
-              minHeight: 200 /* important if editor is hidden */,
-            }}
-          >
-            <div className="flex justify-between items-center">
-              <div className="flex gap-2 items-center">
-                <StyledTab.List>
-                  <StyledTab
-                    name={showEditor ? "Code" : "Display"}
-                    icon={showEditor ? CodeIcon : EyeIcon}
-                  />
-                  <StyledTab name="Sampling Settings" icon={CogIcon} />
-                  <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
-                  <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
-                </StyledTab.List>
-              </div>
-              <div className="flex gap-2 items-center">
-                <RunControls {...runnerState} />
-                <TextTooltip text={isMac() ? "Option+Shift+f" : "Alt+Shift+f"}>
-                  <div>
-                    <Button onClick={editorRef.current?.format}>Format</Button>
-                  </div>
-                </TextTooltip>
-                {renderExtraControls?.()}
-              </div>
+    <PlaygroundContext.Provider value={{ getLeftPanelElement }}>
+      <StyledTab.Group>
+        <div
+          className="pb-4"
+          style={{
+            minHeight: 200 /* important if editor is hidden */,
+          }}
+        >
+          <div className="flex justify-between items-center">
+            <div className="flex gap-2 items-center">
+              <StyledTab.List>
+                <StyledTab
+                  name={showEditor ? "Code" : "Display"}
+                  icon={showEditor ? CodeIcon : EyeIcon}
+                />
+                <StyledTab name="Sampling Settings" icon={CogIcon} />
+                <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
+                <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
+              </StyledTab.List>
+            </div>
+            <div className="flex gap-2 items-center">
+              <RunControls {...runnerState} />
+              <TextTooltip text={isMac() ? "Option+Shift+f" : "Alt+Shift+f"}>
+                <div>
+                  <Button onClick={editorRef.current?.format}>Format</Button>
+                </div>
+              </TextTooltip>
+              {renderExtraControls?.()}
             </div>
-            {showEditor ? withEditor : withoutEditor}
           </div>
-        </StyledTab.Group>
-      </PlaygroundContext.Provider>
-    </SquiggleContainer>
+          {showEditor ? withEditor : withoutEditor}
+        </div>
+      </StyledTab.Group>
+    </PlaygroundContext.Provider>
   );
 };
diff --git a/packages/components/src/components/SquiggleViewer/ItemSettingsMenu.tsx b/packages/components/src/components/SquiggleViewer/ItemSettingsMenu.tsx
index fd10d88224..33f95c93c1 100644
--- a/packages/components/src/components/SquiggleViewer/ItemSettingsMenu.tsx
+++ b/packages/components/src/components/SquiggleViewer/ItemSettingsMenu.tsx
@@ -1,19 +1,20 @@
 import { CogIcon } from "@heroicons/react/solid/esm/index.js";
-import React, { useContext, useRef, useState, useEffect } from "react";
-import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { SqValue } from "@quri/squiggle-lang";
+import merge from "lodash/merge.js";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { SqValue } from "@quri/squiggle-lang";
 import { Modal } from "@quri/ui";
+
+import { PlaygroundContext } from "../SquigglePlayground/index.js";
 import {
   PartialViewSettings,
   ViewSettingsForm,
   viewSettingsSchema,
 } from "../ViewSettingsForm.js";
 import { ViewerContext } from "./ViewerContext.js";
-import { PlaygroundContext } from "../SquigglePlayground/index.js";
 import { locationAsString } from "./utils.js";
-import merge from "lodash/merge.js";
 
 type Props = {
   value: SqValue;
@@ -46,11 +47,7 @@ const ItemSettingsModal: React.FC<
   const { getLeftPanelElement } = useContext(PlaygroundContext);
 
   return (
-    <Modal
-      container={getLeftPanelElement()}
-      tailwindSelector="squiggle" // technically, `container` prop is enough, but this is a bit safer
-      close={close}
-    >
+    <Modal container={getLeftPanelElement()} close={close}>
       <Modal.Header>
         Chart settings
         {value.location!.path.items.length ? (
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 148f85fe44..44a303453b 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -4,7 +4,6 @@ export { SquiggleChart } from "./components/SquiggleChart.js";
 export { SquiggleViewer } from "./components/SquiggleViewer/index.js";
 export { SquiggleEditor } from "./components/SquiggleEditor.js";
 export { SquigglePlayground } from "./components/SquigglePlayground/index.js";
-export { SquiggleContainer } from "./components/SquiggleContainer.js";
 export { NumberShower } from "./components/NumberShower.js";
 
 export { RelativeValueCell } from "./components/RelativeValuesGridChart/RelativeValueCell.js";
diff --git a/packages/components/src/styles/base.css b/packages/components/src/styles/base.css
deleted file mode 100644
index 2ec1cecfc8..0000000000
--- a/packages/components/src/styles/base.css
+++ /dev/null
@@ -1,397 +0,0 @@
-.squiggle {
-  /*
-This file contains:
-1) Base Tailwind preflight styles
-2) Base https://github.com/tailwindlabs/tailwindcss-forms styles
-
-(Both are wrapped in .squiggle)
-*/
-
-  /*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-*/
-
-  /* html { */
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  tab-size: 4; /* 3 */
-  font-family: theme(
-    "fontFamily.sans",
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji"
-  ); /* 4 */
-  /* } */
-
-  /*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-  /* body { */
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-  /* } */
-
-  /*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box; /* 1 */
-    border-width: 0; /* 2 */
-    border-style: solid; /* 2 */
-    border-color: theme("borderColor.DEFAULT", currentColor); /* 2 */
-  }
-
-  ::before,
-  ::after {
-    --tw-content: "";
-  }
-
-  /*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-  hr {
-    height: 0; /* 1 */
-    color: inherit; /* 2 */
-    border-top-width: 1px; /* 3 */
-  }
-
-  /*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-  abbr:where([title]) {
-    text-decoration: underline dotted;
-  }
-
-  /*
-Remove the default font size and weight for headings.
-*/
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  /*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  /*
-Add the correct font weight in Edge and Safari.
-*/
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
-*/
-
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family: theme(
-      "fontFamily.mono",
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      "Liberation Mono",
-      "Courier New",
-      monospace
-    ); /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /*
-Add the correct font size in all browsers.
-*/
-
-  small {
-    font-size: 80%;
-  }
-
-  /*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-  table {
-    text-indent: 0; /* 1 */
-    border-color: inherit; /* 2 */
-    border-collapse: collapse; /* 3 */
-  }
-
-  /*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    font-weight: inherit; /* 1 */
-    line-height: inherit; /* 1 */
-    color: inherit; /* 1 */
-    margin: 0; /* 2 */
-    padding: 0; /* 3 */
-  }
-
-  /*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-  button,
-  select {
-    text-transform: none;
-  }
-
-  /*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button; /* 1 */
-    background-color: transparent; /* 2 */
-    background-image: none; /* 2 */
-  }
-
-  /*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-  :-moz-focusring {
-    outline: auto;
-  }
-
-
-  /*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  /*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-  [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-  }
-
-  /*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  /*
-Add the correct display in Chrome and Safari.
-*/
-
-  summary {
-    display: list-item;
-  }
-
-  /*
-Removes the default spacing and border for appropriate elements.
-*/
-
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    padding: 0;
-  }
-
-  ol,
-  ul,
-  menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  /*
-Prevent resizing textareas horizontally by default.
-*/
-
-  textarea {
-    resize: vertical;
-  }
-
-  /*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1; /* 1 */
-    color: theme("colors.gray.400", #9ca3af); /* 2 */
-  }
-
-  /*
-Set the default cursor for buttons.
-*/
-
-  button,
-  [role="button"] {
-    cursor: pointer;
-  }
-
-  /*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-  :disabled {
-    cursor: default;
-  }
-
-  /*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    display: block; /* 1 */
-    vertical-align: middle; /* 2 */
-  }
-
-  /*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-}
diff --git a/packages/components/src/styles/forms.css b/packages/components/src/styles/forms.css
deleted file mode 100644
index ee77f7ddc7..0000000000
--- a/packages/components/src/styles/forms.css
+++ /dev/null
@@ -1,182 +0,0 @@
-/* Fork of https://github.com/tailwindlabs/tailwindcss-forms styles, see the comment in main.css for details. */
-.squiggle {
-  .form-input,
-  .form-textarea,
-  .form-select,
-  .form-multiselect {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-color: #fff;
-    border-color: #6b7280;
-    border-width: 1px;
-    border-radius: 0px;
-    padding-top: 0.5rem;
-    padding-right: 0.75rem;
-    padding-bottom: 0.5rem;
-    padding-left: 0.75rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    --tw-shadow: 0 0 #0000;
-  }
-
-  .form-input:focus,
-  .form-textarea:focus,
-  .form-select:focus,
-  .form-multiselect:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: #2563eb;
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow);
-    border-color: #2563eb;
-  }
-
-  .form-input::-moz-placeholder,
-  .form-textarea::-moz-placeholder {
-    color: #6b7280;
-    opacity: 1;
-  }
-
-  .form-input::placeholder,
-  .form-textarea::placeholder {
-    color: #6b7280;
-    opacity: 1;
-  }
-
-  .form-input::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-
-  .form-input::-webkit-date-and-time-value {
-    min-height: 1.5em;
-  }
-
-  .form-input::-webkit-datetime-edit,
-  .form-input::-webkit-datetime-edit-year-field,
-  .form-input::-webkit-datetime-edit-month-field,
-  .form-input::-webkit-datetime-edit-day-field,
-  .form-input::-webkit-datetime-edit-hour-field,
-  .form-input::-webkit-datetime-edit-minute-field,
-  .form-input::-webkit-datetime-edit-second-field,
-  .form-input::-webkit-datetime-edit-millisecond-field,
-  .form-input::-webkit-datetime-edit-meridiem-field {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .form-select {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right 0.5rem center;
-    background-repeat: no-repeat;
-    background-size: 1.5em 1.5em;
-    padding-right: 2.5rem;
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-
-  .form-select:where([size]:not([size="1"])) {
-    background-image: initial;
-    background-position: initial;
-    background-repeat: unset;
-    background-size: initial;
-    padding-right: 0.75rem;
-    -webkit-print-color-adjust: unset;
-    print-color-adjust: unset;
-  }
-
-  .form-checkbox,
-  .form-radio {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    padding: 0;
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-    display: inline-block;
-    vertical-align: middle;
-    background-origin: border-box;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    flex-shrink: 0;
-    height: 1rem;
-    width: 1rem;
-    color: #2563eb;
-    background-color: #fff;
-    border-color: #6b7280;
-    border-width: 1px;
-    --tw-shadow: 0 0 #0000;
-  }
-
-  .form-checkbox {
-    border-radius: 0px;
-  }
-
-  .form-radio {
-    border-radius: 100%;
-  }
-
-  .form-checkbox:focus,
-  .form-radio:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-color: #fff;
-    --tw-ring-color: #2563eb;
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
-      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
-      var(--tw-shadow);
-  }
-
-  .form-checkbox:checked,
-  .form-radio:checked {
-    border-color: transparent;
-    background-color: currentColor;
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-
-  .form-checkbox:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  }
-
-  .form-radio:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  }
-
-  .form-checkbox:checked:hover,
-  .form-checkbox:checked:focus,
-  .form-radio:checked:hover,
-  .form-radio:checked:focus {
-    border-color: transparent;
-    background-color: currentColor;
-  }
-
-  .form-checkbox:indeterminate {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-    border-color: transparent;
-    background-color: currentColor;
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-
-  .form-checkbox:indeterminate:hover,
-  .form-checkbox:indeterminate:focus {
-    border-color: transparent;
-    background-color: currentColor;
-  }
-}
diff --git a/packages/components/src/styles/main.css b/packages/components/src/styles/main.css
index 257c57125c..77feb2daea 100644
--- a/packages/components/src/styles/main.css
+++ b/packages/components/src/styles/main.css
@@ -1,29 +1,8 @@
 /*
-Fork of tailwind's preflight with `.squiggle` scoping.
+* These styles are used only by this package's storybook and by those consumers who don't want to use React.
+* Generally, you should generate styles for this package with Tailwind instead. See the README file for details.
 */
-@import "./base.css";
-/*
-Fork of https://github.com/tailwindlabs/tailwindcss-forms styles (with strategy: "class"), but with `.squiggle` scoping.
-This is necessary because tailwindcss-forms's css specificity is lower than preflight's specificity (`padding: 0` and so on),
-so unscoped forms css with scoped preflight css, and there's no setting for scoping.
-*/
-@import "./forms.css";
 
-/*
-This doesn't include tailwind's original preflight (it's disabled in tailwind.config.js),
-but this line is still necessary for proper initialization of `--tw-*` variables.
-*/
 @tailwind base;
-
 @tailwind components;
 @tailwind utilities;
-
-/* Necessary hack because scoped preflight in ./base.css has higher specificity. */
-.ace_cursor {
-  border-left: 2px solid !important;
-}
-
-.ace-error-marker {
-  position: absolute;
-  border-bottom: 1px solid red;
-}
diff --git a/packages/components/tailwind.config.js b/packages/components/src/tailwind-plugin.cts
similarity index 50%
rename from packages/components/tailwind.config.js
rename to packages/components/src/tailwind-plugin.cts
index 8df0a458af..79d25bfa53 100644
--- a/packages/components/tailwind.config.js
+++ b/packages/components/src/tailwind-plugin.cts
@@ -1,12 +1,6 @@
-const config = {
-  content: [
-    "./src/**/*.{html,tsx,ts,js,jsx}",
-    "../../node_modules/@quri/ui/dist/**/*.js",
-  ],
-  corePlugins: {
-    preflight: false,
-  },
-  important: ".squiggle",
+import plugin from "tailwindcss/plugin";
+
+export default plugin(() => {}, {
   theme: {
     extend: {
       animation: {
@@ -17,20 +11,18 @@ const config = {
       },
       keyframes: {
         "squiggle-appear": {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
+          from: { opacity: "0" },
+          to: { opacity: "1" },
         },
         "squiggle-semi-appear": {
-          from: { opacity: 0 },
-          to: { opacity: 0.5 },
+          from: { opacity: "0" },
+          to: { opacity: "0.5" },
         },
         "squiggle-hide": {
-          from: { opacity: 1 },
-          to: { opacity: 0 },
+          from: { opacity: "1" },
+          to: { opacity: "0" },
         },
       },
     },
   },
-};
-
-export default config;
+});
diff --git a/packages/components/tailwind.config.ts b/packages/components/tailwind.config.ts
new file mode 100644
index 0000000000..53fbdbc534
--- /dev/null
+++ b/packages/components/tailwind.config.ts
@@ -0,0 +1,9 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}", "../ui/src/**/*.{ts,tsx}"],
+  plugins: [
+    require("./src/tailwind-plugin.cts"),
+    require("@tailwindcss/forms"),
+  ],
+} satisfies Config;
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 62046f5e9b..1b64ef779b 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -16,8 +16,7 @@
     "strict": true,
     "preserveConstEnums": true,
     "composite": true,
-    "outDir": "./dist/esm",
-    "declarationDir": "./dist/types",
+    "outDir": "./dist",
     "declaration": true,
     "sourceMap": true
   },
diff --git a/packages/hub/src/app/ClientApp.tsx b/packages/hub/src/app/ClientApp.tsx
index 1135dea847..e60fdb040e 100644
--- a/packages/hub/src/app/ClientApp.tsx
+++ b/packages/hub/src/app/ClientApp.tsx
@@ -8,7 +8,6 @@ import { RelayEnvironmentProvider } from "react-relay";
 import { RootLayout } from "@/components/layout/RootLayout";
 import { getCurrentEnvironment } from "@/graphql/relayEnvironment";
 import { WithToasts } from "@quri/ui";
-import { SquiggleContainer } from "@quri/squiggle-components";
 
 export const ClientApp: FC<PropsWithChildren<{ session: Session | null }>> = ({
   session,
@@ -19,13 +18,9 @@ export const ClientApp: FC<PropsWithChildren<{ session: Session | null }>> = ({
   return (
     <SessionProvider session={session}>
       <RelayEnvironmentProvider environment={environment}>
-        <div className="squiggle-hub">
-          <WithToasts>
-            <RootLayout>
-              <SquiggleContainer>{children}</SquiggleContainer>
-            </RootLayout>
-          </WithToasts>
-        </div>
+        <WithToasts>
+          <RootLayout>{children}</RootLayout>
+        </WithToasts>
       </RelayEnvironmentProvider>
     </SessionProvider>
   );
diff --git a/packages/ui/README.md b/packages/ui/README.md
index f4b8e0a159..f1b56386b3 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -42,8 +42,6 @@ If you don't use Tailwind, you can try `import "@quri/ui/dist/main.css"` instead
 
 But beware: this stylesheet includes the entire Tailwind Preflight, which will reset your global styles. It will also add global Tailwind classnames (e.g. `.block` and `.flex`) to your stylesheet, which might be a problem if you use a different CSS framework.
 
-So usage with Tailwind is recommended even if you don't use Tailwind yourself. That way you could [disable Preflight](https://tailwindcss.com/docs/preflight#disabling-preflight) and containerize `@quri/ui` styles with [`important` selector](https://tailwindcss.com/docs/configuration#selector-strategy).
+So usage with Tailwind is recommended even if you don't use Tailwind yourself.
 
-```
-
-```
+That way you could [disable Preflight](https://tailwindcss.com/docs/preflight#disabling-preflight), if your own CSS reset is similar to it (it's your responsibility to check whether that's the case), and containerize `@quri/ui` styles with [`important` selector](https://tailwindcss.com/docs/configuration#selector-strategy).

From d4ca2f983b95aeca675abc85318993fe144047a4 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Sat, 3 Jun 2023 16:49:50 -0600
Subject: [PATCH 2/3] make all packages compatible with new tailwind strategy

---
 packages/components/package.json              |  7 +---
 packages/components/postcss.config.cjs        |  3 --
 ...{tailwind.config.js => tailwind.config.ts} | 15 +++++---
 packages/relative-values/src/app/layout.tsx   | 37 +++++++++----------
 .../src/components/Interface/ModelPicker.tsx  |  6 +--
 .../src/components/Tailwind.tsx               |  8 ----
 .../components/View/ListView/ColumnHeader.tsx |  2 -
 .../components/View/PlotView/ForcePlot.tsx    |  9 +----
 .../View/PlotView/ValueAndUncertaintyPlot.tsx |  7 +---
 .../src/components/ui/DropdownButton.tsx      |  3 +-
 packages/relative-values/tailwind.config.js   | 13 -------
 packages/relative-values/tailwind.config.ts   | 17 +++++++++
 packages/ui/postcss.config.cjs                |  1 -
 packages/website/docusaurus.config.js         | 34 ++++++++++++++---
 packages/website/package.json                 |  4 +-
 packages/website/src/css/custom.css           |  4 ++
 packages/website/tailwind.config.js           |  6 ---
 packages/website/tailwind.config.ts           | 13 +++++++
 yarn.lock                                     | 31 ++--------------
 19 files changed, 103 insertions(+), 117 deletions(-)
 rename packages/hub/{tailwind.config.js => tailwind.config.ts} (50%)
 delete mode 100644 packages/relative-values/src/components/Tailwind.tsx
 delete mode 100644 packages/relative-values/tailwind.config.js
 create mode 100644 packages/relative-values/tailwind.config.ts
 delete mode 100644 packages/website/tailwind.config.js
 create mode 100644 packages/website/tailwind.config.ts

diff --git a/packages/components/package.json b/packages/components/package.json
index f3123ce4b8..bb95976914 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -50,9 +50,6 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.24",
     "postcss-cli": "^10.0.0",
-    "postcss-import": "^15.1.0",
-    "postcss-loader": "^7.3.2",
-    "postcss-nesting": "^11.2.2",
     "react": "^18.1.0",
     "react-dom": "^18.2.0",
     "resize-observer-polyfill": "^1.5.1",
@@ -134,8 +131,8 @@
     "./main.css": {
       "default": "./dist/main.css"
     },
-    "./plugin": {
-      "default": "./dist/tailwind-plugin.cjs"
+    "./tailwind-plugin": {
+      "default": "./dist/src/tailwind-plugin.cjs"
     }
   },
   "module": "./dist/src/index.js",
diff --git a/packages/components/postcss.config.cjs b/packages/components/postcss.config.cjs
index 74eecfcd1c..12a703d900 100644
--- a/packages/components/postcss.config.cjs
+++ b/packages/components/postcss.config.cjs
@@ -1,9 +1,6 @@
 module.exports = {
   plugins: {
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
-    cssnano: {},
   },
 };
diff --git a/packages/hub/tailwind.config.js b/packages/hub/tailwind.config.ts
similarity index 50%
rename from packages/hub/tailwind.config.js
rename to packages/hub/tailwind.config.ts
index 86f9bbabcf..b4fb5d7260 100644
--- a/packages/hub/tailwind.config.js
+++ b/packages/hub/tailwind.config.ts
@@ -1,7 +1,11 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{tsx,ts}", "../../node_modules/@quri/ui/dist/**/*.js"],
-  important: ".squiggle-hub",
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "../ui/src/**/*.{ts,tsx}",
+    "../components/src/**/*.{ts,tsx}",
+  ],
   theme: {
     extend: {
       boxShadow: {
@@ -10,8 +14,9 @@ module.exports = {
     },
   },
   plugins: [
+    require("@quri/squiggle-components/tailwind-plugin"),
     require("@tailwindcss/forms")({
       strategy: "class", // strategy: 'base' interferes with react-select styles
     }),
   ],
-};
+} satisfies Config;
diff --git a/packages/relative-values/src/app/layout.tsx b/packages/relative-values/src/app/layout.tsx
index eda3bae548..6bab21b6d2 100644
--- a/packages/relative-values/src/app/layout.tsx
+++ b/packages/relative-values/src/app/layout.tsx
@@ -5,7 +5,6 @@ import { PropsWithChildren } from "react";
 import "@quri/squiggle-components/dist/main.css";
 import "../styles/main.css";
 
-import { Tailwind } from "@/components/Tailwind";
 import { StorageProvider } from "@/storage/StorageProvider";
 import { ScaleIcon } from "../components/ui/icons/ScaleIcon";
 
@@ -13,27 +12,25 @@ export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en">
       <body>
-        <Tailwind>
-          <StorageProvider>
-            <div className="min-h-screen">
-              <div className="bg-white border-b border-slate-300">
-                <div className="max-w-6xl mx-auto">
-                  <Link href="/">
-                    <div className="flex items-center text-lg font-bold py-2 text-slate-500 cursor-pointer">
-                      <ScaleIcon
-                        className="fill-slate-500 mr-3 opacity-50"
-                        size={24}
-                        viewBox={"0 0 25 25"}
-                      />
-                      Relative Values Explorer
-                    </div>
-                  </Link>
-                </div>
+        <StorageProvider>
+          <div className="min-h-screen">
+            <div className="bg-white border-b border-slate-300">
+              <div className="max-w-6xl mx-auto">
+                <Link href="/">
+                  <div className="flex items-center text-lg font-bold py-2 text-slate-500 cursor-pointer">
+                    <ScaleIcon
+                      className="fill-slate-500 mr-3 opacity-50"
+                      size={24}
+                      viewBox={"0 0 25 25"}
+                    />
+                    Relative Values Explorer
+                  </div>
+                </Link>
               </div>
-              {children}
             </div>
-          </StorageProvider>
-        </Tailwind>
+            {children}
+          </div>
+        </StorageProvider>
       </body>
     </html>
   );
diff --git a/packages/relative-values/src/components/Interface/ModelPicker.tsx b/packages/relative-values/src/components/Interface/ModelPicker.tsx
index 756665bb93..820fe8b002 100644
--- a/packages/relative-values/src/components/Interface/ModelPicker.tsx
+++ b/packages/relative-values/src/components/Interface/ModelPicker.tsx
@@ -8,7 +8,6 @@ import { Dropdown } from "@quri/ui";
 import { useSelectedModel } from "@/app/interfaces/[id]/models/[modelId]/ModelProvider";
 import { newModelRoute, useSiblingRoute } from "@/routes";
 import { useSelectedInterface } from "./InterfaceProvider";
-import { tailwindSelector } from "../Tailwind";
 
 const ModelPickerMenu: FC<{ close(): void }> = ({ close }) => {
   const { models, catalog } = useSelectedInterface();
@@ -71,10 +70,7 @@ export const ModelPicker: FC = () => {
   const selectedModel = useSelectedModel();
 
   return (
-    <Dropdown
-      tailwindSelector={tailwindSelector}
-      render={({ close }) => <ModelPickerMenu close={close} />}
-    >
+    <Dropdown render={({ close }) => <ModelPickerMenu close={close} />}>
       <div className="border border-gray-200 p-2 rounded cursor-pointer">
         {selectedModel ? (
           <div className="text-gray-700 text-sm">Unselect</div>
diff --git a/packages/relative-values/src/components/Tailwind.tsx b/packages/relative-values/src/components/Tailwind.tsx
deleted file mode 100644
index 3c3e60c2a6..0000000000
--- a/packages/relative-values/src/components/Tailwind.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-"use client";
-import { FC, PropsWithChildren } from "react";
-
-export const tailwindSelector = "squiggle-relative-values squiggle";
-
-export const Tailwind: FC<PropsWithChildren> = ({ children }) => (
-  <div className={tailwindSelector}>{children}</div>
-);
diff --git a/packages/relative-values/src/components/View/ListView/ColumnHeader.tsx b/packages/relative-values/src/components/View/ListView/ColumnHeader.tsx
index 07538cc759..a20869e36d 100644
--- a/packages/relative-values/src/components/View/ListView/ColumnHeader.tsx
+++ b/packages/relative-values/src/components/View/ListView/ColumnHeader.tsx
@@ -6,7 +6,6 @@ import { useSelectedInterface } from "@/components/Interface/InterfaceProvider";
 import { Item } from "@/types";
 import { CellBox } from "../CellBox";
 import { Header } from "../Header";
-import { tailwindSelector } from "@/components/Tailwind";
 
 const ColumnHeaderContextMenu: FC<{
   setSelectedItem(item: Item): void;
@@ -51,7 +50,6 @@ export const ColumnHeader: FC<{
   return (
     <div className="sticky top-0 left-0 z-10 grid place-items-stretch h-full">
       <Dropdown
-        tailwindSelector={tailwindSelector}
         render={({ close }) => (
           <ColumnHeaderContextMenu
             setSelectedItem={(item) => {
diff --git a/packages/relative-values/src/components/View/PlotView/ForcePlot.tsx b/packages/relative-values/src/components/View/PlotView/ForcePlot.tsx
index 72277773da..6d99015883 100644
--- a/packages/relative-values/src/components/View/PlotView/ForcePlot.tsx
+++ b/packages/relative-values/src/components/View/PlotView/ForcePlot.tsx
@@ -7,11 +7,10 @@ import { MouseTooltip } from "@quri/ui";
 
 import { useSelectedInterface } from "@/components/Interface/InterfaceProvider";
 import { ModelEvaluator } from "@/values/ModelEvaluator";
+import { DrawContext } from "@quri/squiggle-components";
 import { useViewContext } from "../ViewProvider";
 import { useFilteredItems } from "../hooks";
-import { DrawContext } from "@quri/squiggle-components";
 import { ItemTooltip } from "./ItemTooltip";
-import { tailwindSelector } from "@/components/Tailwind";
 
 export const distance = (
   p1: { x: number; y: number },
@@ -194,11 +193,7 @@ export const ForcePlot: FC<{
   }, [hoveredItem]);
 
   return (
-    <MouseTooltip
-      isOpen={hoveredId !== undefined}
-      render={renderTooltip}
-      tailwindSelector={tailwindSelector}
-    >
+    <MouseTooltip isOpen={hoveredId !== undefined} render={renderTooltip}>
       <canvas ref={ref} className="w-full" />
     </MouseTooltip>
   );
diff --git a/packages/relative-values/src/components/View/PlotView/ValueAndUncertaintyPlot.tsx b/packages/relative-values/src/components/View/PlotView/ValueAndUncertaintyPlot.tsx
index d8a71cc8f1..6d8fc0969a 100644
--- a/packages/relative-values/src/components/View/PlotView/ValueAndUncertaintyPlot.tsx
+++ b/packages/relative-values/src/components/View/PlotView/ValueAndUncertaintyPlot.tsx
@@ -17,7 +17,6 @@ import { useFilteredItems } from "../hooks";
 import { averageMedian, averageUncertainty } from "../hooks/useSortedItems";
 import { distance } from "./ForcePlot";
 import { ItemTooltip } from "./ItemTooltip";
-import { tailwindSelector } from "@/components/Tailwind";
 
 type Datum = {
   item: Item;
@@ -171,11 +170,7 @@ export const ValueAndUncertaintyPlot: FC<{
   }, [data, hoveredId]);
 
   return (
-    <MouseTooltip
-      isOpen={hoveredId !== undefined}
-      render={renderTooltip}
-      tailwindSelector={tailwindSelector}
-    >
+    <MouseTooltip isOpen={hoveredId !== undefined} render={renderTooltip}>
       <canvas ref={ref} className="w-full" />
     </MouseTooltip>
   );
diff --git a/packages/relative-values/src/components/ui/DropdownButton.tsx b/packages/relative-values/src/components/ui/DropdownButton.tsx
index fad7496673..5111022dea 100644
--- a/packages/relative-values/src/components/ui/DropdownButton.tsx
+++ b/packages/relative-values/src/components/ui/DropdownButton.tsx
@@ -1,7 +1,6 @@
 import { FC } from "react";
 
 import { Button, Dropdown } from "@quri/ui";
-import { tailwindSelector } from "../Tailwind";
 
 type Props = {
   text: string;
@@ -11,7 +10,7 @@ type Props = {
 export const DropdownButton: FC<Props> = ({ text, children }) => {
   return (
     <div className="flex">
-      <Dropdown render={children} tailwindSelector={tailwindSelector}>
+      <Dropdown render={children}>
         <Button>{text}</Button>
       </Dropdown>
     </div>
diff --git a/packages/relative-values/tailwind.config.js b/packages/relative-values/tailwind.config.js
deleted file mode 100644
index 263987f167..0000000000
--- a/packages/relative-values/tailwind.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{tsx,ts}", "../../node_modules/@quri/ui/dist/**/*.js"],
-  important: ".squiggle-relative-values",
-  theme: {
-    extend: {
-      boxShadow: {
-        dropdown: "rgba(0, 0, 0, 0.25) 0px 6px 16px",
-      },
-    },
-  },
-  plugins: [],
-};
diff --git a/packages/relative-values/tailwind.config.ts b/packages/relative-values/tailwind.config.ts
new file mode 100644
index 0000000000..e43ac2e2fc
--- /dev/null
+++ b/packages/relative-values/tailwind.config.ts
@@ -0,0 +1,17 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "../ui/src/**/*.{ts,tsx}",
+    "../components/src/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      boxShadow: {
+        dropdown: "rgba(0, 0, 0, 0.25) 0px 6px 16px",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
diff --git a/packages/ui/postcss.config.cjs b/packages/ui/postcss.config.cjs
index a5a6ff8582..12a703d900 100644
--- a/packages/ui/postcss.config.cjs
+++ b/packages/ui/postcss.config.cjs
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
index f1f426f745..8719a0aa0e 100644
--- a/packages/website/docusaurus.config.js
+++ b/packages/website/docusaurus.config.js
@@ -5,7 +5,32 @@ const katex = require("rehype-katex");
 
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
-const path = require("path");
+
+// via https://github.com/facebook/docusaurus/issues/2961#issuecomment-1531243979
+async function pluginTailwindCSS(context, options) {
+  return {
+    name: "docusaurus-tailwindcss",
+    injectHtmlTags() {
+      return {
+        headTags: [
+          {
+            tagName: "link",
+            attributes: {
+              rel: "stylesheet",
+              href: "https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css",
+            },
+          },
+        ],
+      };
+    },
+    configurePostCss(postcssOptions) {
+      // Appends TailwindCSS and AutoPrefixer.
+      postcssOptions.plugins.push(require("tailwindcss"));
+      postcssOptions.plugins.push(require("autoprefixer"));
+      return postcssOptions;
+    },
+  };
+}
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -19,7 +44,7 @@ const config = {
   favicon: "img/favicon.ico",
   organizationName: "quantified-uncertainty", // Usually your GitHub org/user name.
   projectName: "squiggle", // Usually your repo name.
-  plugins: [],
+  plugins: [pluginTailwindCSS],
   presets: [
     [
       "classic",
@@ -40,10 +65,7 @@ const config = {
             "https://github.com/quantified-uncertainty/squiggle/tree/develop/packages/website/",
         },
         theme: {
-          customCss: [
-            require.resolve("./src/css/custom.css"),
-            require.resolve("@quri/squiggle-components/dist/main.css"),
-          ],
+          customCss: [require.resolve("./src/css/custom.css")],
         },
       }),
     ],
diff --git a/packages/website/package.json b/packages/website/package.json
index 8973f639d9..455b597138 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -41,6 +41,8 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.8.8"
+    "autoprefixer": "^10.4.14",
+    "prettier": "^2.8.8",
+    "tailwindcss": "^3.3.2"
   }
 }
diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
index 7e4f5fe55b..b547082f2d 100644
--- a/packages/website/src/css/custom.css
+++ b/packages/website/src/css/custom.css
@@ -6,6 +6,10 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Lato:wght@100;400;700;900&family=Lora:wght@400;500;600&display=swap");
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #e74c0f;
diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js
deleted file mode 100644
index 6cef416cf1..0000000000
--- a/packages/website/tailwind.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
-  theme: {
-    extend: {},
-  },
-};
diff --git a/packages/website/tailwind.config.ts b/packages/website/tailwind.config.ts
new file mode 100644
index 0000000000..f1726dcae2
--- /dev/null
+++ b/packages/website/tailwind.config.ts
@@ -0,0 +1,13 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["../ui/src/**/*.{ts,tsx}", "../components/src/**/*.{ts,tsx}"],
+  plugins: [
+    require("@quri/squiggle-components/tailwind-plugin"),
+    require("@tailwindcss/forms")({ strategy: "class" }),
+  ],
+  corePlugins: {
+    // Tailwind's preflight will be injected by docusaurus plugin, see docusaurus.config.js
+    preflight: false,
+  },
+} satisfies Config;
diff --git a/yarn.lock b/yarn.lock
index c92cf59a2c..84967c1fd0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2167,16 +2167,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/selector-specificity@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "@csstools/selector-specificity@npm:2.0.2"
-  peerDependencies:
-    postcss: ^8.2
-    postcss-selector-parser: ^6.0.10
-  checksum: a2045a27276a6cfe645b6e212afc217d9a43174ea7a1fa1ab8918d5a0ace72380fbd9837fe1920c547985c11a9070dc48c5c80d483d3f581ddf7aa688204d44f
-  languageName: node
-  linkType: hard
-
 "@discoveryjs/json-ext@npm:0.5.7, @discoveryjs/json-ext@npm:^0.5.0, @discoveryjs/json-ext@npm:^0.5.3":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
@@ -4398,9 +4388,6 @@ __metadata:
     lodash: ^4.17.21
     postcss: ^8.4.24
     postcss-cli: ^10.0.0
-    postcss-import: ^15.1.0
-    postcss-loader: ^7.3.2
-    postcss-nesting: ^11.2.2
     prettier: ^3.0.0-alpha.12
     react: ^18.1.0
     react-dom: ^18.2.0
@@ -18287,7 +18274,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-loader@npm:^7.0.0, postcss-loader@npm:^7.3.2":
+"postcss-loader@npm:^7.0.0":
   version: 7.3.2
   resolution: "postcss-loader@npm:7.3.2"
   dependencies:
@@ -18443,18 +18430,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-nesting@npm:^11.2.2":
-  version: 11.2.2
-  resolution: "postcss-nesting@npm:11.2.2"
-  dependencies:
-    "@csstools/selector-specificity": ^2.0.0
-    postcss-selector-parser: ^6.0.10
-  peerDependencies:
-    postcss: ^8.4
-  checksum: 84149edbfe9b0adf069b7ddf06d21fc7a543e7f44b97c3975d8b1f088dddc20853689cb859d5be06000cca83bdc56929b13581bfdaf1971cfafa492add867831
-  languageName: node
-  linkType: hard
-
 "postcss-normalize-charset@npm:^5.1.0":
   version: 5.1.0
   resolution: "postcss-normalize-charset@npm:5.1.0"
@@ -18612,7 +18587,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9":
+"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9":
   version: 6.0.11
   resolution: "postcss-selector-parser@npm:6.0.11"
   dependencies:
@@ -21289,6 +21264,7 @@ __metadata:
     "@mdx-js/react": 1.6.22
     "@quri/squiggle-components": ^0.7.0
     "@quri/ui": ^0.1.0
+    autoprefixer: ^10.4.14
     base64-js: ^1.5.1
     clsx: ^1.2.1
     hast-util-is-element: 2.1.3
@@ -21299,6 +21275,7 @@ __metadata:
     react-dom: ^18.2.0
     rehype-katex: ^5
     remark-math: ^3
+    tailwindcss: ^3.3.2
   languageName: unknown
   linkType: soft
 

From d4f97f7ce237728d8f206fb1ad0095eb9433926a Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Sat, 3 Jun 2023 18:01:45 -0600
Subject: [PATCH 3/3] components README; TailwindProvider component

---
 packages/components/README.md                 | 134 ++++++++++++------
 packages/ui/src/components/Dropdown/index.tsx |  16 +--
 packages/ui/src/components/Modal.tsx          |  14 +-
 packages/ui/src/components/MouseTooltip.tsx   |  12 +-
 .../ui/src/components/TailwindProvider.tsx    |  20 +++
 packages/ui/src/index.ts                      |   2 +
 6 files changed, 128 insertions(+), 70 deletions(-)
 create mode 100644 packages/ui/src/components/TailwindProvider.tsx

diff --git a/packages/components/README.md b/packages/components/README.md
index 46d7af3dc1..72edb1c966 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -3,66 +3,116 @@
 
 # Squiggle components
 
-This package contains the react components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
+This package contains the React components for Squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
 
 The `@quri/squiggle-components` package offers several components and utilities for people who want to embed Squiggle components into websites.
 
-## Usage in a Next.js project
+This package is pure ESM; if you have trouble with importing it, read [this document](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
 
-For now, `squiggle-components` requires the `window` property, so using the package in Next.js requires dynamic loading:
+## Configuration
 
+First, install this library:
+
+```
+yarn add @quri/squiggle-components # or npm install if you use npm
 ```
 
-import React from "react";
-import { SquiggleChart } from "@quri/squiggle-components";
-
-import dynamic from "next/dynamic";
-
-const SquiggleChart = dynamic(
-  () => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
-  {
-    loading: () => <p>Loading...</p>,
-    ssr: false,
-  }
-);
-
-export function DynamicSquiggleChart({ squiggleString }) {
-  if (squiggleString == "") {
-    return null;
-  } else {
-    return (
-        <SquiggleChart
-          defaultCode={squiggleString}
-          width={445}
-          height={200}
-          showSummary={true}
-        />
-    );
-  }
+## Styles
+
+Before using this library, you'll have to make a decision on how to use styles.
+
+There are three options:
+
+### 1. Usage with Tailwind
+
+If you already use Tailwind, you should add `./node_modules/@quri/ui/dist/**/*.js` and `./node_modules/@quri/squiggle-components/dist/**/*.js` to your `tailwind.config.js` [content configuration](https://tailwindcss.com/docs/content-configuration):
+
+```js
+module.exports = {
+  content: [
+    ..., // other files for your own project
+    './node_modules/@quri/ui/dist/**/*.js',
+    './node_modules/@quri/squiggle-components/dist/**/*.js',
+  ],
+  plugins: [
+    require("@tailwindcss/forms")({ strategy: "class" }), // playground settings use tailwind forms
+    require("@quri/squiggle-components/tailwind-plugin"), // some squiggle-components styles extend the default Tailwind's theme
+  ],
+  ..., // other settings
 }
 ```
 
-You can example of this approach in [this repository](https://github.com/NunoSempere/squiggle-nexjs-example), which you could clone to begin using Squiggle in your project.
+It's possible that in the future you might need to change the `content` or `plugins` lists. Please check this README and consult with squiggle-components changelog when you update this library to a new version.
 
-## Usage with create-react-app
+### 2. Usage without Tailwind
+
+You can import the CSS file that we bundle with this library:
+
+```js
+import "@quri/squiggle-components/dist/main.css";
+```
+
+Note that you have to import this CSS file **only if you don't use Tailwind**.
 
-Create React App seems to be [on the way out](https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741) and it is currently not supported by Squiggle. We recommend looking into ["production-grade React frameworks"](https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks) instead.
+The downsides of this approach:
 
-## Build storybook for development
+- It will include the Tailwind's global [preflight](https://tailwindcss.com/docs/preflight) styles, which do some non-trivial CSS resets, e.g. it resets all heading styles.
+- There's a slight risk that your own CSS framework class names will collide with Tailwind class names.
 
-We assume that you had run `yarn` at monorepo level, installing dependencies.
+You might want to import squiggle-components CSS _before_ your own CSS resets; in that case, your CSS will get a chance to override the styles that Tailwind's preflight broke for you.
 
-You need to _prepare_ by building and bundling `squiggle-lang`
+### 3. Configure Tailwind with scoped styles just for this library
 
-```sh
-cd ../squiggle-lang
-yarn build
+This is the approach that we recommend if the previous one doesn't work for you. It's more complicated, though.
+
+First, [install Tailwind](https://tailwindcss.com/docs/installation) in your project.
+
+Then configure Tailwind (in `tailwind.config.js`) in the similar way as the first approach explained above in the "Usage with Tailwind" section:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./node_modules/@quri/ui/dist/**/*.js",
+    "./node_modules/@quri/squiggle-components/dist/**/*.js",
+  ],
+  plugins: [
+    require("@tailwindcss/forms")({ strategy: "class" }),
+    require("@quri/squiggle-components/tailwind-plugin"),
+  ],
+  corePlugins: {
+    preflight: false,
+  },
+  important: ".squiggle",
+};
 ```
 
-If you've otherwise done this recently you can skip those.
+Next, in your CSS file for Tailwind, the one with `@tailwind` directives, you'll have to insert the full Tailwind's [preflight](https://unpkg.com/tailwindcss@3.3.2/src/css/preflight.css), but wrap it in `.squiggle { ... }`. This way, Tailwind's preflight will affect only Squiggle components and nothing else.
 
-Run a development server
+This will require you to install [postcss-nested](https://github.com/postcss/postcss-nested) and add it to your `postcss.config.js`, like this:
 
-```sh
-yarn start
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    "postcss-nested": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
 ```
+
+Then, add `<TailwindProvider>...</TailwindProvider>` on top of your app (it can be imported from `@quri/ui` package). It will:
+
+1. Add an additional `<div class="squiggle">...</div>` for scoped Tailwind styles.
+2. Set up React context that will allow to wrap modals and tooltips with that div too. (This is necessary because our modals and tooltips rely on React portals and jump out of the main DOM tree.)
+
+## Components
+
+Consult with our [Storybook](https://components.squiggle-language.com/) to find out which components you can use.
+
+You'll probably need one of `<SquiggleChart>`, `<SquiggleEditor>` or `<SquigglePlayground>`, depending on your goals.
+
+## Usage with create-react-app
+
+Create React App seems to be [on the way out](https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741) and might be not compatible with Squiggle. We recommend looking into ["production-grade React frameworks"](https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks) instead.
diff --git a/packages/ui/src/components/Dropdown/index.tsx b/packages/ui/src/components/Dropdown/index.tsx
index 9f0c9902d4..0f4125f132 100644
--- a/packages/ui/src/components/Dropdown/index.tsx
+++ b/packages/ui/src/components/Dropdown/index.tsx
@@ -9,23 +9,17 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import { clsx } from "clsx";
-import { FC, PropsWithChildren, useRef, useState } from "react";
+import { FC, PropsWithChildren, useContext, useRef, useState } from "react";
+import { TailwindContext } from "../TailwindProvider.js";
 
 type Props = PropsWithChildren<{
   render(options: { close(): void }): React.ReactNode;
   fullHeight?: boolean;
-  // When `important: '.container-classname'` is used, this should be set because we render dropdowns in a portal.
-  // `squiggle-components` set this to `squiggle`.
-  // See also: https://tailwindcss.com/docs/configuration#selector-strategy
-  tailwindSelector?: string;
 }>;
 
-export const Dropdown: FC<Props> = ({
-  render,
-  fullHeight,
-  tailwindSelector,
-  children,
-}) => {
+export const Dropdown: FC<Props> = ({ render, fullHeight, children }) => {
+  const { selector: tailwindSelector } = useContext(TailwindContext);
+
   const [isOpen, setIsOpen] = useState(false);
 
   const arrowRef = useRef<HTMLDivElement | null>(null);
diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
index 3b54c69057..d658f0a25c 100644
--- a/packages/ui/src/components/Modal.tsx
+++ b/packages/ui/src/components/Modal.tsx
@@ -12,6 +12,7 @@ import {
 import { createPortal } from "react-dom";
 
 import { useWindowScroll, useWindowSize } from "../hooks/react-use.js";
+import { TailwindContext } from "./TailwindProvider.js";
 
 type ModalContextShape = {
   close: () => void;
@@ -143,10 +144,6 @@ type ModalType = React.FC<
   PropsWithChildren<{
     // if specified, modal will be positioned over the visible part of the container, if it's not too small
     container?: HTMLElement;
-    // When `important: '.container-classname'` is used, this should be set because we render Modal in a portal.
-    // `squiggle-components` set this to `squiggle`.
-    // See also: https://tailwindcss.com/docs/configuration#selector-strategy
-    tailwindSelector?: string;
     close: () => void;
   }>
 > & {
@@ -155,14 +152,11 @@ type ModalType = React.FC<
   Header: typeof ModalHeader;
 };
 
-export const Modal: ModalType = ({
-  children,
-  container,
-  tailwindSelector,
-  close,
-}) => {
+export const Modal: ModalType = ({ children, container, close }) => {
   const [el] = useState(() => document.createElement("div"));
 
+  const { selector: tailwindSelector } = useContext(TailwindContext);
+
   useEffect(() => {
     document.body.appendChild(el);
     return () => {
diff --git a/packages/ui/src/components/MouseTooltip.tsx b/packages/ui/src/components/MouseTooltip.tsx
index a618f9b733..f77c9a0066 100644
--- a/packages/ui/src/components/MouseTooltip.tsx
+++ b/packages/ui/src/components/MouseTooltip.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode, memo } from "react";
+import { FC, PropsWithChildren, ReactNode, memo, useContext } from "react";
 
 import {
   FloatingPortal,
@@ -8,6 +8,7 @@ import {
   useFloating,
   useInteractions,
 } from "@floating-ui/react";
+import { TailwindContext } from "./TailwindProvider.js";
 
 function useMouseTooltip({ isOpen }: { isOpen: boolean }) {
   const floating = useFloating({
@@ -37,20 +38,17 @@ function useMouseTooltip({ isOpen }: { isOpen: boolean }) {
 type Props = PropsWithChildren<{
   isOpen: boolean;
   render(): ReactNode;
-  // When `important: '.container-classname'` is used, this should be set because we render tooltips in a portal.
-  // `squiggle-components` set this to `squiggle`.
-  // See also: https://tailwindcss.com/docs/configuration#selector-strategy
-  tailwindSelector?: string;
 }>;
 
 export const MouseTooltip: FC<Props> = memo(function MouseTooltip({
   render,
   isOpen,
-  tailwindSelector,
   children,
-}) {
+}: Props) {
   const tooltip = useMouseTooltip({ isOpen });
 
+  const { selector: tailwindSelector } = useContext(TailwindContext);
+
   return (
     <div ref={tooltip.containerRef} {...tooltip.containerProps}>
       {children}
diff --git a/packages/ui/src/components/TailwindProvider.tsx b/packages/ui/src/components/TailwindProvider.tsx
new file mode 100644
index 0000000000..cd4845aee7
--- /dev/null
+++ b/packages/ui/src/components/TailwindProvider.tsx
@@ -0,0 +1,20 @@
+import { FC, PropsWithChildren, createContext } from "react";
+
+type TailwindContextShape = {
+  selector?: string;
+};
+
+export const TailwindContext = createContext<TailwindContextShape>({
+  selector: undefined,
+});
+
+export const TailwindProvider: FC<PropsWithChildren<{ selector?: string }>> = ({
+  selector = "squiggle", // recommended name in squiggle-components README.md
+  children,
+}) => {
+  return (
+    <TailwindContext.Provider value={{ selector }}>
+      <div className={selector}>{children}</div>
+    </TailwindContext.Provider>
+  );
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index f311600afa..6956ad4765 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -27,3 +27,5 @@ export { SignOutIcon } from "./icons/SignOutIcon.js";
 export { EditIcon } from "./icons/EditIcon.js";
 
 export { useToast, WithToasts } from "./components/WithToasts/index.js";
+
+export { TailwindProvider } from "./components/TailwindProvider.js";