From 3eed6c59bb94912a6595566dd2d7c0ddc20ae82d Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Wed, 25 Oct 2023 09:47:38 -0400
Subject: [PATCH 01/14] add tailwind

---
 apps/test-site/package.json                   |   5 +-
 apps/test-site/postcss.config.cjs             |   6 +
 apps/test-site/src/layouts/LocationLayout.tsx |   1 +
 apps/test-site/src/styles/main.css            |   3 +
 apps/test-site/src/templates/LocationPage.tsx |   1 +
 .../test-site/src/templates/UniversalPage.tsx |   1 +
 apps/test-site/src/templates/index.tsx        |   1 +
 e2e-tests/package.json                        |   5 +-
 e2e-tests/postcss.config.cjs                  |   6 +
 e2e-tests/src/layouts/LocationLayout.tsx      |   1 +
 e2e-tests/src/styles/main.css                 |   3 +
 e2e-tests/src/templates/BasicPage.tsx         |   1 +
 .../src/templates/ErrorComponentPreviews.tsx  |   1 +
 e2e-tests/src/templates/ErrorPage.tsx         |   1 +
 e2e-tests/src/templates/LocationPage.tsx      |   1 +
 e2e-tests/tailwind.config.ts                  |  15 +
 package-lock.json                             | 294 +++++++++++++++++-
 17 files changed, 334 insertions(+), 12 deletions(-)
 create mode 100644 apps/test-site/postcss.config.cjs
 create mode 100644 apps/test-site/src/styles/main.css
 create mode 100644 e2e-tests/postcss.config.cjs
 create mode 100644 e2e-tests/src/styles/main.css
 create mode 100644 e2e-tests/tailwind.config.ts

diff --git a/apps/test-site/package.json b/apps/test-site/package.json
index 66f775e1a..b1a1b1080 100644
--- a/apps/test-site/package.json
+++ b/apps/test-site/package.json
@@ -25,10 +25,13 @@
     "@yext/pages": "^1.0.0-rc.1",
     "@yext/studio": "*",
     "@yext/types": "^0.1.12-alpha",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.11.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-react-perf": "^3.3.1",
-    "eslint-plugin-tsdoc": "^0.2.17"
+    "eslint-plugin-tsdoc": "^0.2.17",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.4"
   },
   "scripts": {
     "dev": "studio",
diff --git a/apps/test-site/postcss.config.cjs b/apps/test-site/postcss.config.cjs
new file mode 100644
index 000000000..8567b4c40
--- /dev/null
+++ b/apps/test-site/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
\ No newline at end of file
diff --git a/apps/test-site/src/layouts/LocationLayout.tsx b/apps/test-site/src/layouts/LocationLayout.tsx
index 7b7a51a02..a65ac427d 100644
--- a/apps/test-site/src/layouts/LocationLayout.tsx
+++ b/apps/test-site/src/layouts/LocationLayout.tsx
@@ -1,4 +1,5 @@
 import Header from "../components/Header";
+import "../styles/main.css";
 
 function LocationLayout() {
   return (
diff --git a/apps/test-site/src/styles/main.css b/apps/test-site/src/styles/main.css
new file mode 100644
index 000000000..bd6213e1d
--- /dev/null
+++ b/apps/test-site/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/apps/test-site/src/templates/LocationPage.tsx b/apps/test-site/src/templates/LocationPage.tsx
index c1c80a4b3..f7bf015a4 100644
--- a/apps/test-site/src/templates/LocationPage.tsx
+++ b/apps/test-site/src/templates/LocationPage.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {
diff --git a/apps/test-site/src/templates/UniversalPage.tsx b/apps/test-site/src/templates/UniversalPage.tsx
index d074d0867..ad0eded25 100644
--- a/apps/test-site/src/templates/UniversalPage.tsx
+++ b/apps/test-site/src/templates/UniversalPage.tsx
@@ -4,6 +4,7 @@ import Button from "../components/Button";
 import Container from "../components/Container";
 import Cta from "../components/Cta";
 import FixedText from "../components/FixedText";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {
diff --git a/apps/test-site/src/templates/index.tsx b/apps/test-site/src/templates/index.tsx
index e36df1436..b0fa5823b 100644
--- a/apps/test-site/src/templates/index.tsx
+++ b/apps/test-site/src/templates/index.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Button from "../components/Button";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";
diff --git a/e2e-tests/package.json b/e2e-tests/package.json
index c22f717a1..d032b2e84 100644
--- a/e2e-tests/package.json
+++ b/e2e-tests/package.json
@@ -16,8 +16,11 @@
     "@vitejs/plugin-react": "^2.1.0",
     "@yext/pages": "^1.0.0-rc.1",
     "@yext/studio": "*",
+    "autoprefixer": "^10.4.16",
     "fs-extra": "^11.1.1",
-    "glob": "^10.3.1"
+    "glob": "^10.3.1",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.4"
   },
   "dependencies": {
     "kill-port": "^2.0.1"
diff --git a/e2e-tests/postcss.config.cjs b/e2e-tests/postcss.config.cjs
new file mode 100644
index 000000000..8567b4c40
--- /dev/null
+++ b/e2e-tests/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
\ No newline at end of file
diff --git a/e2e-tests/src/layouts/LocationLayout.tsx b/e2e-tests/src/layouts/LocationLayout.tsx
index 7b7a51a02..074778436 100644
--- a/e2e-tests/src/layouts/LocationLayout.tsx
+++ b/e2e-tests/src/layouts/LocationLayout.tsx
@@ -1,4 +1,5 @@
 import Header from "../components/Header";
+import "../styles/main.css"
 
 function LocationLayout() {
   return (
diff --git a/e2e-tests/src/styles/main.css b/e2e-tests/src/styles/main.css
new file mode 100644
index 000000000..bd6213e1d
--- /dev/null
+++ b/e2e-tests/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/e2e-tests/src/templates/BasicPage.tsx b/e2e-tests/src/templates/BasicPage.tsx
index bf68dadfa..890cead3d 100644
--- a/e2e-tests/src/templates/BasicPage.tsx
+++ b/e2e-tests/src/templates/BasicPage.tsx
@@ -1,6 +1,7 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Banner from "../components/Banner";
 import Container from "../components/Container";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";
diff --git a/e2e-tests/src/templates/ErrorComponentPreviews.tsx b/e2e-tests/src/templates/ErrorComponentPreviews.tsx
index b30df8134..c97db3db6 100644
--- a/e2e-tests/src/templates/ErrorComponentPreviews.tsx
+++ b/e2e-tests/src/templates/ErrorComponentPreviews.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import ErrorComponent from "../components/ErrorComponent";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "error-component-page";
diff --git a/e2e-tests/src/templates/ErrorPage.tsx b/e2e-tests/src/templates/ErrorPage.tsx
index 1b97e919b..361bcaac2 100644
--- a/e2e-tests/src/templates/ErrorPage.tsx
+++ b/e2e-tests/src/templates/ErrorPage.tsx
@@ -1,4 +1,5 @@
 import { GetPath, TemplateProps } from "@yext/pages";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "error-page";
diff --git a/e2e-tests/src/templates/LocationPage.tsx b/e2e-tests/src/templates/LocationPage.tsx
index c1c80a4b3..f7bf015a4 100644
--- a/e2e-tests/src/templates/LocationPage.tsx
+++ b/e2e-tests/src/templates/LocationPage.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {
diff --git a/e2e-tests/tailwind.config.ts b/e2e-tests/tailwind.config.ts
new file mode 100644
index 000000000..4fbb8a7e0
--- /dev/null
+++ b/e2e-tests/tailwind.config.ts
@@ -0,0 +1,15 @@
+import type { StudioTailwindConfig } from "@yext/studio";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "#aa00ff",
+      },
+      fontSize: {
+        medium: "14px",
+      },
+    },
+  },
+} satisfies StudioTailwindConfig;
diff --git a/package-lock.json b/package-lock.json
index 4289d0f8c..e96002533 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,10 +58,13 @@
         "@yext/pages": "^1.0.0-rc.1",
         "@yext/studio": "*",
         "@yext/types": "^0.1.12-alpha",
+        "autoprefixer": "^10.4.16",
         "eslint": "^8.11.0",
         "eslint-plugin-import": "^2.25.4",
         "eslint-plugin-react-perf": "^3.3.1",
-        "eslint-plugin-tsdoc": "^0.2.17"
+        "eslint-plugin-tsdoc": "^0.2.17",
+        "postcss": "^8.4.31",
+        "tailwindcss": "^3.3.4"
       }
     },
     "apps/test-site/node_modules/@vitejs/plugin-react": {
@@ -85,6 +88,104 @@
         "vite": "^3.0.0"
       }
     },
+    "apps/test-site/node_modules/autoprefixer": {
+      "version": "10.4.16",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "apps/test-site/node_modules/caniuse-lite": {
+      "version": "1.0.30001554",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
+      "integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "apps/test-site/node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "apps/test-site/node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "apps/test-site/node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "apps/test-site/node_modules/magic-string": {
       "version": "0.26.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
@@ -98,9 +199,9 @@
       }
     },
     "apps/test-site/node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "funding": [
         {
@@ -116,7 +217,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -126,6 +226,43 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "apps/test-site/node_modules/tailwindcss": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.4.tgz",
+      "integrity": "sha512-JXZNOkggUAc9T5E7nCrimoXHcSf9h3NWFe5sh36CGD/3M5TRLuQeFnQoDsit2uVTqgoOZHLx5rTykLUu16vsMQ==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.19.1",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "apps/test-site/node_modules/vite": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
@@ -188,8 +325,11 @@
         "@vitejs/plugin-react": "^2.1.0",
         "@yext/pages": "^1.0.0-rc.1",
         "@yext/studio": "*",
+        "autoprefixer": "^10.4.16",
         "fs-extra": "^11.1.1",
-        "glob": "^10.3.1"
+        "glob": "^10.3.1",
+        "postcss": "^8.4.31",
+        "tailwindcss": "^3.3.4"
       }
     },
     "e2e-tests/node_modules/@vitejs/plugin-react": {
@@ -213,6 +353,43 @@
         "vite": "^3.0.0"
       }
     },
+    "e2e-tests/node_modules/autoprefixer": {
+      "version": "10.4.16",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "e2e-tests/node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -222,6 +399,67 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "e2e-tests/node_modules/caniuse-lite": {
+      "version": "1.0.30001554",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
+      "integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "e2e-tests/node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "e2e-tests/node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "e2e-tests/node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "e2e-tests/node_modules/fs-extra": {
       "version": "11.1.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
@@ -311,9 +549,9 @@
       }
     },
     "e2e-tests/node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "funding": [
         {
@@ -329,7 +567,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -339,6 +576,43 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "e2e-tests/node_modules/tailwindcss": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.4.tgz",
+      "integrity": "sha512-JXZNOkggUAc9T5E7nCrimoXHcSf9h3NWFe5sh36CGD/3M5TRLuQeFnQoDsit2uVTqgoOZHLx5rTykLUu16vsMQ==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.19.1",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "e2e-tests/node_modules/vite": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",

From c676595b709dba7395b507a3db0d6b14b9eb8ec3 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 25 Oct 2023 13:50:44 +0000
Subject: [PATCH 02/14] Automated linting update and features.json sync

---
 apps/test-site/postcss.config.cjs        | 2 +-
 apps/test-site/src/styles/main.css       | 2 +-
 e2e-tests/postcss.config.cjs             | 2 +-
 e2e-tests/src/layouts/LocationLayout.tsx | 2 +-
 e2e-tests/src/styles/main.css            | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/test-site/postcss.config.cjs b/apps/test-site/postcss.config.cjs
index 8567b4c40..12a703d90 100644
--- a/apps/test-site/postcss.config.cjs
+++ b/apps/test-site/postcss.config.cjs
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
\ No newline at end of file
+};
diff --git a/apps/test-site/src/styles/main.css b/apps/test-site/src/styles/main.css
index bd6213e1d..b5c61c956 100644
--- a/apps/test-site/src/styles/main.css
+++ b/apps/test-site/src/styles/main.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/e2e-tests/postcss.config.cjs b/e2e-tests/postcss.config.cjs
index 8567b4c40..12a703d90 100644
--- a/e2e-tests/postcss.config.cjs
+++ b/e2e-tests/postcss.config.cjs
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
\ No newline at end of file
+};
diff --git a/e2e-tests/src/layouts/LocationLayout.tsx b/e2e-tests/src/layouts/LocationLayout.tsx
index 074778436..a65ac427d 100644
--- a/e2e-tests/src/layouts/LocationLayout.tsx
+++ b/e2e-tests/src/layouts/LocationLayout.tsx
@@ -1,5 +1,5 @@
 import Header from "../components/Header";
-import "../styles/main.css"
+import "../styles/main.css";
 
 function LocationLayout() {
   return (
diff --git a/e2e-tests/src/styles/main.css b/e2e-tests/src/styles/main.css
index bd6213e1d..b5c61c956 100644
--- a/e2e-tests/src/styles/main.css
+++ b/e2e-tests/src/styles/main.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;

From f105409c6772579c665ddb881e41d9cb141c0d45 Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Wed, 25 Oct 2023 09:52:07 -0400
Subject: [PATCH 03/14] readd playwright tests

---
 e2e-tests/playwright.config.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/e2e-tests/playwright.config.ts b/e2e-tests/playwright.config.ts
index 4f09ce889..457223261 100644
--- a/e2e-tests/playwright.config.ts
+++ b/e2e-tests/playwright.config.ts
@@ -1,5 +1,6 @@
 import { PlaywrightTestConfig, expect } from "@playwright/test";
 import fs from "node:fs";
+import os from "node:os";
 
 expect.extend({
   async toHaveContents(filepath: string, expectedContents: string) {
@@ -51,7 +52,7 @@ const config: PlaywrightTestConfig = {
     video: "on",
   },
   workers: 1,
-  ignoreSnapshots: true,
+  ignoreSnapshots: os.platform() !== "darwin",
 };
 
 export default config;

From d8a1befe8d1ef33eb68e3dcc1ce8e06f62d168ee Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Wed, 25 Oct 2023 10:28:38 -0400
Subject: [PATCH 04/14] add css to fixtures

---
 e2e-tests/tests/__fixtures__/add-element-expected-page.tsx       | 1 +
 e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx        | 1 +
 .../tests/__fixtures__/hmr/update-button-props-expected-page.tsx | 1 +
 e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx      | 1 +
 .../tests/__fixtures__/rearrange-elements-expected-page.tsx      | 1 +
 e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx    | 1 +
 6 files changed, 6 insertions(+)

diff --git a/e2e-tests/tests/__fixtures__/add-element-expected-page.tsx b/e2e-tests/tests/__fixtures__/add-element-expected-page.tsx
index c10028b22..b5d7ca19d 100644
--- a/e2e-tests/tests/__fixtures__/add-element-expected-page.tsx
+++ b/e2e-tests/tests/__fixtures__/add-element-expected-page.tsx
@@ -5,6 +5,7 @@ import Footer from "../components/Footer";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {
diff --git a/e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx b/e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx
index f5057e75e..e9726996b 100644
--- a/e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx
+++ b/e2e-tests/tests/__fixtures__/add-layout-page-expected.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Header from "../components/Header";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";
diff --git a/e2e-tests/tests/__fixtures__/hmr/update-button-props-expected-page.tsx b/e2e-tests/tests/__fixtures__/hmr/update-button-props-expected-page.tsx
index 912b323f8..b9c53a3e7 100644
--- a/e2e-tests/tests/__fixtures__/hmr/update-button-props-expected-page.tsx
+++ b/e2e-tests/tests/__fixtures__/hmr/update-button-props-expected-page.tsx
@@ -2,6 +2,7 @@ import { GetPath, TemplateProps } from "@yext/pages";
 import Banner from "../components/Banner";
 import Button from "../components/Button";
 import Container from "../components/Container";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";
diff --git a/e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx b/e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx
index dca03685d..598c22c06 100644
--- a/e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx
+++ b/e2e-tests/tests/__fixtures__/hmr/updated-universal-page.tsx
@@ -1,5 +1,6 @@
 import { GetPath, TemplateProps } from "@yext/pages";
 import Button from "../components/Button";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";
diff --git a/e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx b/e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx
index a22974e84..c24e46667 100644
--- a/e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx
+++ b/e2e-tests/tests/__fixtures__/rearrange-elements-expected-page.tsx
@@ -4,6 +4,7 @@ import BusinessInfo from "../components/BusinessInfo";
 import Header from "../components/Header";
 import HoursDisplay from "../components/HoursDisplay";
 import ProminentImage from "../components/ProminentImage";
+import "../styles/main.css";
 
 export const config: TemplateConfig = {
   stream: {
diff --git a/e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx b/e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx
index 51469103c..8bbec8209 100644
--- a/e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx
+++ b/e2e-tests/tests/__fixtures__/remove-element-expected-page.tsx
@@ -1,4 +1,5 @@
 import { GetPath, TemplateProps } from "@yext/pages";
+import "../styles/main.css";
 
 export const getPath: GetPath<TemplateProps> = () => {
   return "index.html";

From 9c9435b0c9c19e0ea6fe8cb7f332fcf805b3565a Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Wed, 25 Oct 2023 11:47:12 -0400
Subject: [PATCH 05/14] wait for overlay to be opacity-0

---
 e2e-tests/tests/infra/StudioPlaywrightPage.ts        | 12 +++++++++---
 packages/studio-ui/src/components/LoadingOverlay.tsx |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/e2e-tests/tests/infra/StudioPlaywrightPage.ts b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
index 2595daa46..f8b0f8e5d 100644
--- a/e2e-tests/tests/infra/StudioPlaywrightPage.ts
+++ b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
@@ -134,8 +134,14 @@ export default class StudioPlaywrightPage {
    */
   async waitForLoadState() {
     await this.page.waitForLoadState();
-    await expect(
-      this.page.getByRole("button", { name: "Open Add Element Menu" })
-    ).toBeVisible();
+    const overlayDomEl = this.page.getByTestId("loading-overlay")
+    await expect.poll(() => overlayDomEl.evaluate((e: HTMLElement) => {
+       console.log(e.className)
+      return e.className.includes("opacity-0")
+    }), {
+      message: "Waiting for LoadingOverlay to finish.",
+      timeout: 5000,
+    }).toBeTruthy()
+    console.log("TRUTHED!")
   }
 }
diff --git a/packages/studio-ui/src/components/LoadingOverlay.tsx b/packages/studio-ui/src/components/LoadingOverlay.tsx
index 5fdf9e64c..8578ff432 100644
--- a/packages/studio-ui/src/components/LoadingOverlay.tsx
+++ b/packages/studio-ui/src/components/LoadingOverlay.tsx
@@ -28,7 +28,7 @@ export default function LoadingOverlay(
 
   return (
     <>
-      <div className={overlayClassname}>{overlay}</div>
+      <div className={overlayClassname} data-testid="loading-overlay">{overlay}</div>
       <div className={childrenWrapperClassname}>{props.children}</div>
     </>
   );

From 357bb44d812b356910ec719091996de7f782a620 Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Wed, 25 Oct 2023 11:48:09 -0400
Subject: [PATCH 06/14] remove console.log

---
 e2e-tests/tests/infra/StudioPlaywrightPage.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/e2e-tests/tests/infra/StudioPlaywrightPage.ts b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
index f8b0f8e5d..1a1572113 100644
--- a/e2e-tests/tests/infra/StudioPlaywrightPage.ts
+++ b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
@@ -142,6 +142,5 @@ export default class StudioPlaywrightPage {
       message: "Waiting for LoadingOverlay to finish.",
       timeout: 5000,
     }).toBeTruthy()
-    console.log("TRUTHED!")
   }
 }

From 4034943e527fcec3d697dae3aaa9b785f2c6746f Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 25 Oct 2023 15:49:22 +0000
Subject: [PATCH 07/14] Automated linting update and features.json sync

---
 e2e-tests/tests/infra/StudioPlaywrightPage.ts | 22 ++++++++++++-------
 .../src/components/LoadingOverlay.tsx         |  4 +++-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/e2e-tests/tests/infra/StudioPlaywrightPage.ts b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
index 1a1572113..5bc169616 100644
--- a/e2e-tests/tests/infra/StudioPlaywrightPage.ts
+++ b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
@@ -134,13 +134,19 @@ export default class StudioPlaywrightPage {
    */
   async waitForLoadState() {
     await this.page.waitForLoadState();
-    const overlayDomEl = this.page.getByTestId("loading-overlay")
-    await expect.poll(() => overlayDomEl.evaluate((e: HTMLElement) => {
-       console.log(e.className)
-      return e.className.includes("opacity-0")
-    }), {
-      message: "Waiting for LoadingOverlay to finish.",
-      timeout: 5000,
-    }).toBeTruthy()
+    const overlayDomEl = this.page.getByTestId("loading-overlay");
+    await expect
+      .poll(
+        () =>
+          overlayDomEl.evaluate((e: HTMLElement) => {
+            console.log(e.className);
+            return e.className.includes("opacity-0");
+          }),
+        {
+          message: "Waiting for LoadingOverlay to finish.",
+          timeout: 5000,
+        }
+      )
+      .toBeTruthy();
   }
 }
diff --git a/packages/studio-ui/src/components/LoadingOverlay.tsx b/packages/studio-ui/src/components/LoadingOverlay.tsx
index 8578ff432..76c102874 100644
--- a/packages/studio-ui/src/components/LoadingOverlay.tsx
+++ b/packages/studio-ui/src/components/LoadingOverlay.tsx
@@ -28,7 +28,9 @@ export default function LoadingOverlay(
 
   return (
     <>
-      <div className={overlayClassname} data-testid="loading-overlay">{overlay}</div>
+      <div className={overlayClassname} data-testid="loading-overlay">
+        {overlay}
+      </div>
       <div className={childrenWrapperClassname}>{props.children}</div>
     </>
   );

From deb38dbe978d0560b37539aff75876cdeeec7935 Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Wed, 25 Oct 2023 11:50:58 -0400
Subject: [PATCH 08/14] more console.log

---
 e2e-tests/tests/infra/StudioPlaywrightPage.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/e2e-tests/tests/infra/StudioPlaywrightPage.ts b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
index 5bc169616..ed9b9a4b6 100644
--- a/e2e-tests/tests/infra/StudioPlaywrightPage.ts
+++ b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
@@ -139,7 +139,6 @@ export default class StudioPlaywrightPage {
       .poll(
         () =>
           overlayDomEl.evaluate((e: HTMLElement) => {
-            console.log(e.className);
             return e.className.includes("opacity-0");
           }),
         {

From e5543bc25486014bb8054a7acf9d24324e9cb178 Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Wed, 25 Oct 2023 16:50:05 -0400
Subject: [PATCH 09/14] rename to active styles

---
 .../studio-ui/src/components/IFramePortal.tsx    |  4 ++--
 ...tUserStyles.tsx => useInjectActiveStyles.tsx} | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)
 rename packages/studio-ui/src/hooks/{useInjectUserStyles.tsx => useInjectActiveStyles.tsx} (83%)

diff --git a/packages/studio-ui/src/components/IFramePortal.tsx b/packages/studio-ui/src/components/IFramePortal.tsx
index 5c370f10e..67225c471 100644
--- a/packages/studio-ui/src/components/IFramePortal.tsx
+++ b/packages/studio-ui/src/components/IFramePortal.tsx
@@ -2,7 +2,7 @@ import { createPortal } from "react-dom";
 import { Dispatch, PropsWithChildren, SetStateAction, useRef } from "react";
 import useStudioStore from "../store/useStudioStore";
 import { twMerge } from "tailwind-merge";
-import useInjectUserStyles from "../hooks/useInjectUserStyles";
+import useInjectActiveStyles from "../hooks/useInjectActiveStyles";
 import useViewportOption from "../hooks/useViewportOption";
 
 export default function IFramePortal(
@@ -15,7 +15,7 @@ export default function IFramePortal(
   const previewRef = useRef<HTMLDivElement>(null);
   const iframeDocument = props.iframeEl?.contentWindow?.document;
   const [viewport] = useStudioStore((store) => [store.pagePreview.viewport]);
-  useInjectUserStyles(iframeDocument);
+  useInjectActiveStyles(iframeDocument);
   const iframeCSS = twMerge(
     "mr-auto ml-auto",
     viewport.css,
diff --git a/packages/studio-ui/src/hooks/useInjectUserStyles.tsx b/packages/studio-ui/src/hooks/useInjectActiveStyles.tsx
similarity index 83%
rename from packages/studio-ui/src/hooks/useInjectUserStyles.tsx
rename to packages/studio-ui/src/hooks/useInjectActiveStyles.tsx
index 7c9f85c21..ffe5315cf 100644
--- a/packages/studio-ui/src/hooks/useInjectUserStyles.tsx
+++ b/packages/studio-ui/src/hooks/useInjectActiveStyles.tsx
@@ -10,12 +10,12 @@ import { StudioStore } from "../store/models/StudioStore";
  * styling of the current active page and component tree.  Styling is cleared
  * from the iframe before each injection.
  */
-export default function useInjectUserStyles(
+export default function useInjectActiveStyles(
   iframeDocument: Document | undefined
 ) {
-  const [userStyleImports, loadedStyleFilepaths] = useStudioStore(
+  const [activeStylesFilepaths, loadedStyleFilepaths] = useStudioStore(
     (store) => [
-      getUserStyleImports(store),
+      getFilepathsOfActiveStyles(store),
       store.loadedStyles.loadedStyleFilepaths,
     ],
     isEqual
@@ -25,7 +25,7 @@ export default function useInjectUserStyles(
     if (!iframeDocument) {
       return;
     }
-    userStyleImports.forEach((styleFilepath) => {
+    activeStylesFilepaths.forEach((styleFilepath) => {
       injectStyleIntoIframe(iframeDocument, styleFilepath);
     });
 
@@ -39,11 +39,11 @@ export default function useInjectUserStyles(
      * called before all user styles are added to Studio's
      * document head.
      */
-  }, [iframeDocument, userStyleImports, loadedStyleFilepaths]);
+  }, [iframeDocument, activeStylesFilepaths, loadedStyleFilepaths]);
 }
 
-function getUserStyleImports(store: StudioStore): string[] {
-  const pageStyles = store.pages.getActivePageState()?.styleImports ?? [];
+function getFilepathsOfActiveStyles(store: StudioStore): string[] {
+  const activePageStyles = store.pages.getActivePageState()?.styleImports ?? [];
   const componentTree = store.actions.getComponentTree();
   const getComponentMetadata = store.actions.getComponentMetadata;
 
@@ -54,7 +54,7 @@ function getUserStyleImports(store: StudioStore): string[] {
       componentTreeStyles.add(styleFilepath);
     });
   });
-  return [...componentTreeStyles, ...pageStyles];
+  return [...componentTreeStyles, ...activePageStyles];
 }
 
 function clearStylingFromIframe(iframeDocument: Document) {

From cf7c3be90ee8db85a72be2b7f1550cb90f8b520a Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Thu, 26 Oct 2023 09:16:30 -0400
Subject: [PATCH 10/14] less plurals!

---
 packages/studio-ui/src/hooks/useInjectActiveStyles.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/studio-ui/src/hooks/useInjectActiveStyles.tsx b/packages/studio-ui/src/hooks/useInjectActiveStyles.tsx
index ffe5315cf..df6909e46 100644
--- a/packages/studio-ui/src/hooks/useInjectActiveStyles.tsx
+++ b/packages/studio-ui/src/hooks/useInjectActiveStyles.tsx
@@ -13,7 +13,7 @@ import { StudioStore } from "../store/models/StudioStore";
 export default function useInjectActiveStyles(
   iframeDocument: Document | undefined
 ) {
-  const [activeStylesFilepaths, loadedStyleFilepaths] = useStudioStore(
+  const [activeStyleFilepaths, loadedStyleFilepaths] = useStudioStore(
     (store) => [
       getFilepathsOfActiveStyles(store),
       store.loadedStyles.loadedStyleFilepaths,
@@ -25,7 +25,7 @@ export default function useInjectActiveStyles(
     if (!iframeDocument) {
       return;
     }
-    activeStylesFilepaths.forEach((styleFilepath) => {
+    activeStyleFilepaths.forEach((styleFilepath) => {
       injectStyleIntoIframe(iframeDocument, styleFilepath);
     });
 
@@ -39,7 +39,7 @@ export default function useInjectActiveStyles(
      * called before all user styles are added to Studio's
      * document head.
      */
-  }, [iframeDocument, activeStylesFilepaths, loadedStyleFilepaths]);
+  }, [iframeDocument, activeStyleFilepaths, loadedStyleFilepaths]);
 }
 
 function getFilepathsOfActiveStyles(store: StudioStore): string[] {

From 1958bdcf40cdba34819d2140111514269f07821b Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Thu, 26 Oct 2023 09:29:00 -0400
Subject: [PATCH 11/14] remove unused theme

---
 apps/test-site/tailwind.config.ts | 9 +--------
 e2e-tests/tailwind.config.ts      | 9 +--------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/apps/test-site/tailwind.config.ts b/apps/test-site/tailwind.config.ts
index 4fbb8a7e0..5596527ea 100644
--- a/apps/test-site/tailwind.config.ts
+++ b/apps/test-site/tailwind.config.ts
@@ -3,13 +3,6 @@ import type { StudioTailwindConfig } from "@yext/studio";
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {
-      colors: {
-        primary: "#aa00ff",
-      },
-      fontSize: {
-        medium: "14px",
-      },
-    },
+    extend: {}
   },
 } satisfies StudioTailwindConfig;
diff --git a/e2e-tests/tailwind.config.ts b/e2e-tests/tailwind.config.ts
index 4fbb8a7e0..5596527ea 100644
--- a/e2e-tests/tailwind.config.ts
+++ b/e2e-tests/tailwind.config.ts
@@ -3,13 +3,6 @@ import type { StudioTailwindConfig } from "@yext/studio";
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {
-      colors: {
-        primary: "#aa00ff",
-      },
-      fontSize: {
-        medium: "14px",
-      },
-    },
+    extend: {}
   },
 } satisfies StudioTailwindConfig;

From 2ba54d6a707d3f2a08a7d6442d7c47787d4e0a4e Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 26 Oct 2023 13:29:55 +0000
Subject: [PATCH 12/14] Automated linting update and features.json sync

---
 apps/test-site/tailwind.config.ts | 2 +-
 e2e-tests/tailwind.config.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/test-site/tailwind.config.ts b/apps/test-site/tailwind.config.ts
index 5596527ea..c940bb4ff 100644
--- a/apps/test-site/tailwind.config.ts
+++ b/apps/test-site/tailwind.config.ts
@@ -3,6 +3,6 @@ import type { StudioTailwindConfig } from "@yext/studio";
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {}
+    extend: {},
   },
 } satisfies StudioTailwindConfig;
diff --git a/e2e-tests/tailwind.config.ts b/e2e-tests/tailwind.config.ts
index 5596527ea..c940bb4ff 100644
--- a/e2e-tests/tailwind.config.ts
+++ b/e2e-tests/tailwind.config.ts
@@ -3,6 +3,6 @@ import type { StudioTailwindConfig } from "@yext/studio";
 export default {
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
-    extend: {}
+    extend: {},
   },
 } satisfies StudioTailwindConfig;

From fc2c8052b2b3a0c57b51737d004df35673fc34f3 Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Thu, 26 Oct 2023 09:52:40 -0400
Subject: [PATCH 13/14] add tailwind to e2e-tests

---
 e2e-tests/tests/infra/studioTest.ts            | 2 +-
 e2e-tests/{ => tests/infra}/tailwind.config.ts | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename e2e-tests/{ => tests/infra}/tailwind.config.ts (100%)

diff --git a/e2e-tests/tests/infra/studioTest.ts b/e2e-tests/tests/infra/studioTest.ts
index e493cfac0..811a409fa 100644
--- a/e2e-tests/tests/infra/studioTest.ts
+++ b/e2e-tests/tests/infra/studioTest.ts
@@ -25,7 +25,7 @@ export type StudioTestFixtures = {
 export const studioTest = base.extend<StudioTestFixtures>({
   createRemote: false,
   debug: false,
-  tailwindConfigPath: undefined,
+  tailwindConfigPath: "tests/infra/tailwind.config.ts",
   studioPage: async (
     { page, createRemote, debug, tailwindConfigPath },
     use,
diff --git a/e2e-tests/tailwind.config.ts b/e2e-tests/tests/infra/tailwind.config.ts
similarity index 100%
rename from e2e-tests/tailwind.config.ts
rename to e2e-tests/tests/infra/tailwind.config.ts

From c348efa9da3184b5561621f5c829cc69daf89fe8 Mon Sep 17 00:00:00 2001
From: Alex Taing <ataing@yext.com>
Date: Thu, 26 Oct 2023 10:08:44 -0400
Subject: [PATCH 14/14] custom tailwind rename

---
 .../{tailwind.config.ts => custom-tailwind.config.ts}           | 0
 e2e-tests/tests/custom-tailwind.spec.ts                         | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename e2e-tests/tests/__fixtures__/{tailwind.config.ts => custom-tailwind.config.ts} (100%)

diff --git a/e2e-tests/tests/__fixtures__/tailwind.config.ts b/e2e-tests/tests/__fixtures__/custom-tailwind.config.ts
similarity index 100%
rename from e2e-tests/tests/__fixtures__/tailwind.config.ts
rename to e2e-tests/tests/__fixtures__/custom-tailwind.config.ts
diff --git a/e2e-tests/tests/custom-tailwind.spec.ts b/e2e-tests/tests/custom-tailwind.spec.ts
index 348b5160a..63c460041 100644
--- a/e2e-tests/tests/custom-tailwind.spec.ts
+++ b/e2e-tests/tests/custom-tailwind.spec.ts
@@ -3,7 +3,7 @@ import { studioTest } from "./infra/studioTest.js";
 import fs from "fs";
 
 studioTest.use({
-  tailwindConfigPath: "tests/__fixtures__/tailwind.config.ts",
+  tailwindConfigPath: "tests/__fixtures__/custom-tailwind.config.ts",
 });
 
 studioTest(