From cd8a92e91f2b9fb2d25e3a2d20846a5419f192e9 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Mon, 6 Jun 2022 04:24:38 +0000
Subject: [PATCH] Add css into docusaurus

---
 packages/components/package.json      | 4 ++--
 packages/components/postcss.config.js | 4 ++--
 packages/website/docusaurus.config.js | 8 +++++---
 packages/website/src/css/custom.css   | 1 -
 packages/website/tailwind.config.js   | 7 +++++++
 packages/website/webpack.config.js    | 2 +-
 6 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 packages/website/tailwind.config.js

diff --git a/packages/components/package.json b/packages/components/package.json
index e6927c72..b5cdec3c 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -57,7 +57,7 @@
   },
   "scripts": {
     "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
-    "build": "tsc -b && build-storybook -s public",
+    "build": "tsc -b && tailwindcss -i ./src/tailwind.css -o ./dist/main.css && build-storybook -s public",
     "bundle": "webpack",
     "all": "yarn bundle && yarn build",
     "lint": "prettier --check .",
@@ -96,6 +96,6 @@
     "@types/react": "17.0.43"
   },
   "source": "./src/index.ts",
-  "main": "./dist/bundle.js",
+  "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts"
 }
diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js
index 18eb64ac..3691aac9 100644
--- a/packages/components/postcss.config.js
+++ b/packages/components/postcss.config.js
@@ -3,5 +3,5 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
     cssnano: {},
-  }
-}
+  },
+};
diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
index 91e0926d..330002ef 100644
--- a/packages/website/docusaurus.config.js
+++ b/packages/website/docusaurus.config.js
@@ -19,8 +19,7 @@ const config = {
   organizationName: "quantified-uncertainty", // Usually your GitHub org/user name.
   projectName: "squiggle", // Usually your repo name.
 
-  plugins: [
-  ],
+  plugins: [],
 
   presets: [
     [
@@ -42,7 +41,10 @@ const config = {
             "https://github.com/quantified-uncertainty/squiggle/tree/develop/packages/website/",
         },
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: [
+            require.resolve("./src/css/custom.css"),
+            require.resolve("@quri/squiggle-components/dist/main.css"),
+          ],
         },
       }),
     ],
diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
index 5670ac59..02c5ff6b 100644
--- a/packages/website/src/css/custom.css
+++ b/packages/website/src/css/custom.css
@@ -1,4 +1,3 @@
-@import("@quri/squiggle-components/dist/main.css")
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js
new file mode 100644
index 00000000..f100dc69
--- /dev/null
+++ b/packages/website/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/forms")],
+};
diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js
index 0558c172..f053ebf7 100644
--- a/packages/website/webpack.config.js
+++ b/packages/website/webpack.config.js
@@ -1 +1 @@
-module .exports = {}
+module.exports = {};