diff --git a/package-lock.json b/package-lock.json
index 649fd519..fe541b6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5227,6 +5227,20 @@
 				}
 			}
 		},
+		"node_modules/@rollup/pluginutils": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+			"integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"estree-walker": "^2.0.1",
+				"picomatch": "^2.2.2"
+			},
+			"engines": {
+				"node": ">= 8.0.0"
+			}
+		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
 			"version": "4.14.0",
 			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz",
@@ -18537,7 +18551,9 @@
 			}
 		},
 		"node_modules/picocolors": {
-			"version": "1.0.0",
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
@@ -18695,9 +18711,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.38",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-			"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+			"version": "8.4.49",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+			"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -18712,15 +18728,32 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^3.3.7",
-				"picocolors": "^1.0.0",
-				"source-map-js": "^1.2.0"
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
 			},
 			"engines": {
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/postcss-assign-layer": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/postcss-assign-layer/-/postcss-assign-layer-0.4.0.tgz",
+			"integrity": "sha512-ART9ENWnvEyW3yyfJe83nz5j/IsbQHBgSMsUNFmC/+6zy0uC9YTriHKV6TEjOOHXRzXS2yNPj0ksvYkEwwkv5w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^4.2.1"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.3.0"
+			}
+		},
 		"node_modules/postcss-selector-parser": {
 			"version": "6.0.15",
 			"dev": true,
@@ -20560,9 +20593,10 @@
 			}
 		},
 		"node_modules/source-map-js": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -23582,6 +23616,8 @@
 				"eslint-plugin-prettier": "5.1.3",
 				"eslint-plugin-storybook": "0.8.0",
 				"eslint-plugin-vue": "^9.28.0",
+				"postcss": "^8.4.49",
+				"postcss-assign-layer": "^0.4.0",
 				"prettier": "3.2.5",
 				"storybook": "8.0.5",
 				"vite": "^5.2.7",
diff --git a/src/ui/package.json b/src/ui/package.json
index 9787cafb..8bdc9505 100644
--- a/src/ui/package.json
+++ b/src/ui/package.json
@@ -59,6 +59,8 @@
 		"eslint-plugin-prettier": "5.1.3",
 		"eslint-plugin-storybook": "0.8.0",
 		"eslint-plugin-vue": "^9.28.0",
+		"postcss": "^8.4.49",
+		"postcss-assign-layer": "^0.4.0",
 		"prettier": "3.2.5",
 		"storybook": "8.0.5",
 		"vite": "^5.2.7",
diff --git a/src/ui/vite.config.ts b/src/ui/vite.config.ts
index b4e58235..f6d29777 100644
--- a/src/ui/vite.config.ts
+++ b/src/ui/vite.config.ts
@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from "url";
 import { defineConfig, UserConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import writerPlugin from "./viteWriterPlugin";
+import postcssAssignLayer from "postcss-assign-layer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,6 +12,16 @@ export default defineConfig({
 	define: {
 		WRITER_LIVE_CCT: JSON.stringify("no"),
 	},
+	css: {
+		postcss: {
+			plugins: [
+				// we move all our CSS into Cascade layers to let the user's stylesheets have more priority
+				postcssAssignLayer([
+					{ include: "**/*/*.css", layerName: "wf" },
+				]),
+			],
+		},
+	},
 	build: {
 		outDir: "../writer/static",
 		emptyOutDir: true,