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..12a703d90
--- /dev/null
+++ b/apps/test-site/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
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..b5c61c956
--- /dev/null
+++ b/apps/test-site/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
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/apps/test-site/tailwind.config.ts b/apps/test-site/tailwind.config.ts
index 4fbb8a7e0..c940bb4ff 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/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/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;
diff --git a/e2e-tests/postcss.config.cjs b/e2e-tests/postcss.config.cjs
new file mode 100644
index 000000000..12a703d90
--- /dev/null
+++ b/e2e-tests/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/e2e-tests/src/layouts/LocationLayout.tsx b/e2e-tests/src/layouts/LocationLayout.tsx
index 7b7a51a02..a65ac427d 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..b5c61c956
--- /dev/null
+++ b/e2e-tests/src/styles/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
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/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__/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/__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";
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(
diff --git a/e2e-tests/tests/infra/StudioPlaywrightPage.ts b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
index 2595daa46..ed9b9a4b6 100644
--- a/e2e-tests/tests/infra/StudioPlaywrightPage.ts
+++ b/e2e-tests/tests/infra/StudioPlaywrightPage.ts
@@ -134,8 +134,18 @@ 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) => {
+            return e.className.includes("opacity-0");
+          }),
+        {
+          message: "Waiting for LoadingOverlay to finish.",
+          timeout: 5000,
+        }
+      )
+      .toBeTruthy();
   }
 }
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/tests/infra/tailwind.config.ts b/e2e-tests/tests/infra/tailwind.config.ts
new file mode 100644
index 000000000..c940bb4ff
--- /dev/null
+++ b/e2e-tests/tests/infra/tailwind.config.ts
@@ -0,0 +1,8 @@
+import type { StudioTailwindConfig } from "@yext/studio";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+} 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",
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/components/LoadingOverlay.tsx b/packages/studio-ui/src/components/LoadingOverlay.tsx
index 5fdf9e64c..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}>{overlay}</div>
+      <div className={overlayClassname} data-testid="loading-overlay">
+        {overlay}
+      </div>
       <div className={childrenWrapperClassname}>{props.children}</div>
     </>
   );
diff --git a/packages/studio-ui/src/hooks/useInjectUserStyles.tsx b/packages/studio-ui/src/hooks/useInjectActiveStyles.tsx
similarity index 84%
rename from packages/studio-ui/src/hooks/useInjectUserStyles.tsx
rename to packages/studio-ui/src/hooks/useInjectActiveStyles.tsx
index 7c9f85c21..df6909e46 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 [activeStyleFilepaths, 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) => {
+    activeStyleFilepaths.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, activeStyleFilepaths, 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) {