From dbdf39e2d51e18719093bb57c82a8358309eb6b4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 12:26:17 -0700
Subject: [PATCH 1/7] fix

---
 packages/repl/src/lib/Output/console/Console.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index cc9471eb29..4c27f3ecec 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -1,4 +1,4 @@
-<script module>
+<script module lang="ts">
 	export type Log = {
 		command: 'info' | 'warn' | 'error' | 'table' | 'group' | 'clear' | 'unclonable';
 		action?: 'console';

From 6390752c15e4862354d9fd5e469117f9e91a8bcf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 13:25:54 -0700
Subject: [PATCH 2/7] remove logging

---
 packages/editor/src/lib/compile-worker/worker.ts | 1 -
 packages/repl/src/lib/workers/bundler/index.ts   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/editor/src/lib/compile-worker/worker.ts b/packages/editor/src/lib/compile-worker/worker.ts
index c00ed75e9f..d5fd227096 100644
--- a/packages/editor/src/lib/compile-worker/worker.ts
+++ b/packages/editor/src/lib/compile-worker/worker.ts
@@ -59,7 +59,6 @@ async function init(v: string) {
 
 		can_use_experimental_async = true;
 	} catch (e) {
-		console.error(e);
 		// do nothing
 	}
 
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 6b2f7b26d5..00cae45f91 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -93,7 +93,6 @@ async function init(v: string, packages_url: string) {
 
 		can_use_experimental_async = true;
 	} catch (e) {
-		console.error(e);
 		// do nothing
 	}
 

From ad99099500113c80ad59dc2cda04a4a99f8b65c9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 14:38:23 -0700
Subject: [PATCH 3/7] WIP

---
 packages/repl/package.json                    |  1 +
 packages/repl/src/lib/Output/ReplProxy.ts     |  4 +-
 packages/repl/src/lib/Output/Viewer.svelte    |  7 +-
 .../repl/src/lib/Output/srcdoc/index.html     | 71 ++--------------
 .../repl/src/lib/Output/srcdoc/styles.css     | 61 ++++++++++++++
 packages/repl/src/lib/types.d.ts              |  1 +
 .../repl/src/lib/workers/bundler/index.ts     | 80 ++++++++++++++++++-
 pnpm-lock.yaml                                |  8 ++
 8 files changed, 165 insertions(+), 68 deletions(-)
 create mode 100644 packages/repl/src/lib/Output/srcdoc/styles.css

diff --git a/packages/repl/package.json b/packages/repl/package.json
index 5ab688c8e7..500b9c3758 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -86,6 +86,7 @@
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
 		"svelte": "5.23.0",
+		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
 		"zimmerframe": "^1.1.2"
 	}
diff --git a/packages/repl/src/lib/Output/ReplProxy.ts b/packages/repl/src/lib/Output/ReplProxy.ts
index 19c7700171..a42f28cd73 100644
--- a/packages/repl/src/lib/Output/ReplProxy.ts
+++ b/packages/repl/src/lib/Output/ReplProxy.ts
@@ -85,8 +85,8 @@ export default class ReplProxy {
 		}
 	}
 
-	eval(script: string) {
-		return this.iframe_command('eval', { script });
+	eval(script: string, style?: string) {
+		return this.iframe_command('eval', { script, style });
 	}
 
 	handle_links() {
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 3931e79a1f..b724b6ad53 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -107,7 +107,8 @@
 			clear_logs();
 
 			if (!$bundle.error) {
-				await proxy?.eval(`
+				await proxy?.eval(
+					`
 					${injectedJS}
 
 					if (!window.__setup_focus_handling) {
@@ -183,7 +184,9 @@
 						}
 					}
 					//# sourceURL=playground:output
-				`);
+				`,
+					$bundle?.tailwind
+				);
 				error = null;
 			}
 		} catch (e) {
diff --git a/packages/repl/src/lib/Output/srcdoc/index.html b/packages/repl/src/lib/Output/srcdoc/index.html
index 9e56bf30db..f89f687249 100644
--- a/packages/repl/src/lib/Output/srcdoc/index.html
+++ b/packages/repl/src/lib/Output/srcdoc/index.html
@@ -1,72 +1,13 @@
 <!doctype html>
 <html>
 	<head>
-		<style>
-			body {
-				--bg-1: hsl(0, 0%, 100%);
-				--bg-2: hsl(206, 20%, 90%);
-				--bg-3: hsl(206, 20%, 80%);
-				--fg-1: hsl(0, 0%, 13%);
-				--fg-2: hsl(0, 0%, 20%);
-				--fg-2: hsl(0, 0%, 30%);
-				--link: hsl(208, 77%, 47%);
-				--link-hover: hsl(208, 77%, 55%);
-				--link-active: hsl(208, 77%, 40%);
-				--border-radius: 4px;
-				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-					'Open Sans', 'Helvetica Neue', sans-serif;
-				--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-					'DejaVu Sans Mono', monospace;
-				color-scheme: light;
-				background: var(--bg-1);
-				color: var(--fg-1);
-				font-family: var(--font);
-				line-height: 1.5;
-				margin: 1rem;
-				height: calc(100vh - 2rem);
-				accent-color: var(--hover) !important;
-			}
-
-			a {
-				color: var(--link);
-			}
-
-			a:hover {
-				color: var(--link-hover);
-			}
-
-			a:active {
-				color: var(--link-active);
-			}
-
-			code {
-				background: var(--bg-2);
-				font-family: var(--font-mono);
-				font-size: 0.9em;
-				padding: 0.15rem 0.3rem;
-				border-radius: var(--border-radius);
-			}
-
-			ul.todos {
-				padding: 0;
-			}
-
-			body.dark {
-				color-scheme: dark;
-				--bg-1: hsl(0, 0%, 18%);
-				--bg-2: hsl(0, 0%, 30%);
-				--bg-3: hsl(0, 0%, 40%);
-				--fg-1: hsl(0, 0%, 90%);
-				--fg-2: hsl(0, 0%, 70%);
-				--fg-3: hsl(0, 0%, 60%);
-				--link: hsl(206, 96%, 72%);
-				--link-hover: hsl(206, 96%, 78%);
-				--link-active: hsl(206, 96%, 64%);
-			}
-		</style>
+		<style id="injected"></style>
 
 		<script>
 			(function () {
+				const style = document.querySelector('style#injected');
+				let styles = '';
+
 				function send(payload, origin = '*') {
 					if (payload.command === 'info' && payload.args[0] instanceof Error) {
 						const error = payload.args[0];
@@ -97,6 +38,10 @@
 						}
 
 						if (action === 'eval') {
+							if (data.args.style !== undefined && styles !== (styles = data.args.style)) {
+								style.textContent = styles;
+							}
+
 							(0, eval)(data.args.script);
 						}
 
diff --git a/packages/repl/src/lib/Output/srcdoc/styles.css b/packages/repl/src/lib/Output/srcdoc/styles.css
new file mode 100644
index 0000000000..33b0dcabc5
--- /dev/null
+++ b/packages/repl/src/lib/Output/srcdoc/styles.css
@@ -0,0 +1,61 @@
+body {
+	--bg-1: hsl(0, 0%, 100%);
+	--bg-2: hsl(206, 20%, 90%);
+	--bg-3: hsl(206, 20%, 80%);
+	--fg-1: hsl(0, 0%, 13%);
+	--fg-2: hsl(0, 0%, 20%);
+	--fg-2: hsl(0, 0%, 30%);
+	--link: hsl(208, 77%, 47%);
+	--link-hover: hsl(208, 77%, 55%);
+	--link-active: hsl(208, 77%, 40%);
+	--border-radius: 4px;
+	--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+		'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
+		monospace;
+	color-scheme: light;
+	background: var(--bg-1);
+	color: var(--fg-1);
+	font-family: var(--font);
+	line-height: 1.5;
+	margin: 1rem;
+	height: calc(100vh - 2rem);
+	accent-color: var(--hover) !important;
+}
+
+a {
+	color: var(--link);
+}
+
+a:hover {
+	color: var(--link-hover);
+}
+
+a:active {
+	color: var(--link-active);
+}
+
+code {
+	background: var(--bg-2);
+	font-family: var(--font-mono);
+	font-size: 0.9em;
+	padding: 0.15rem 0.3rem;
+	border-radius: var(--border-radius);
+}
+
+ul.todos {
+	padding: 0;
+}
+
+body.dark {
+	color-scheme: dark;
+	--bg-1: hsl(0, 0%, 18%);
+	--bg-2: hsl(0, 0%, 30%);
+	--bg-3: hsl(0, 0%, 40%);
+	--fg-1: hsl(0, 0%, 90%);
+	--fg-2: hsl(0, 0%, 70%);
+	--fg-3: hsl(0, 0%, 60%);
+	--link: hsl(206, 96%, 72%);
+	--link-hover: hsl(206, 96%, 78%);
+	--link-active: hsl(206, 96%, 64%);
+}
diff --git a/packages/repl/src/lib/types.d.ts b/packages/repl/src/lib/types.d.ts
index 665293c6d5..a46e9f0766 100644
--- a/packages/repl/src/lib/types.d.ts
+++ b/packages/repl/src/lib/types.d.ts
@@ -26,6 +26,7 @@ export type Bundle = {
 	client: OutputChunk | null;
 	error: (RollupError & CompileError) | null;
 	server: OutputChunk | null;
+	tailwind?: string;
 	imports: string[];
 	warnings: Warning[];
 };
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 00cae45f91..e76201d917 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -1,4 +1,6 @@
 import '@sveltejs/site-kit/polyfills';
+import * as tailwindcss from 'tailwindcss';
+import { walk } from 'zimmerframe';
 import '../patch_window';
 import { sleep } from '../../utils';
 import { rollup } from '@rollup/browser';
@@ -17,9 +19,20 @@ import type { BundleMessageData } from '../workers';
 import type { Warning } from '../../types';
 import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
 import type { File } from 'editor';
+import type { Node } from 'estree';
 import { parseTar, type FileDescription } from 'tarparser';
 import { max } from './semver';
 
+import tailwind_preflight from 'tailwindcss/preflight.css?raw';
+import tailwind_theme from 'tailwindcss/theme.css?raw';
+import tailwind_utilities from 'tailwindcss/utilities.css?raw';
+
+const tailwind_files = {
+	'tailwindcss/theme.css': tailwind_theme,
+	'tailwindcss/preflight.css': tailwind_preflight,
+	'tailwindcss/utilities.css': tailwind_utilities
+};
+
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
 self.window = self;
@@ -33,6 +46,17 @@ let inited = Promise.withResolvers<typeof svelte>();
 
 let can_use_experimental_async = false;
 
+const base = `@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);`;
+
+const tailwind = await tailwindcss.compile(base, {
+	loadStylesheet: async (id, base) => {
+		return { content: tailwind_files[id], base };
+	}
+});
+
 async function init(v: string, packages_url: string) {
 	const match = /^(pr|commit|branch)-(.+)/.exec(v);
 
@@ -267,6 +291,29 @@ async function get_bundle(
 	const all_warnings: Array<{ message: string }> = [];
 	const new_cache: typeof cache = new Map();
 
+	const tailwind_candidates = [];
+
+	function add_tailwind_candidates(ast: Node | undefined) {
+		if (!ast) return;
+
+		walk(ast, null, {
+			ImportDeclaration() {
+				// don't descend into these nodes, so that we don't
+				// pick up import sources
+			},
+			Literal(node) {
+				if (typeof node.value === 'string' && node.value) {
+					tailwind_candidates.push(...node.value.split(' '));
+				}
+			},
+			TemplateElement(node) {
+				if (node.value.raw) {
+					tailwind_candidates.push(...node.value.raw.split(' '));
+				}
+			}
+		});
+	}
+
 	const repl_plugin: Plugin = {
 		name: 'svelte-repl',
 		async resolveId(importee, importer) {
@@ -434,6 +481,21 @@ async function get_bundle(
 
 				result = svelte.compile(code, compilerOptions);
 
+				walk(result.ast.html as import('svelte/compiler').AST.TemplateNode, null, {
+					Attribute(node) {
+						if (Array.isArray(node.value)) {
+							for (const chunk of node.value) {
+								if (chunk.type === 'Text') {
+									tailwind_candidates.push(...chunk.data.split(' '));
+								}
+							}
+						}
+					}
+				});
+
+				add_tailwind_candidates(result.ast.module);
+				add_tailwind_candidates(result.ast.instance);
+
 				if (result.css?.code) {
 					// resolve local files by inlining them
 					result.css.code = result.css.code.replace(
@@ -516,7 +578,21 @@ async function get_bundle(
 				loop_protect,
 				replace({
 					'process.env.NODE_ENV': JSON.stringify('production')
-				})
+				}),
+				{
+					name: 'tailwind-extract',
+					transform(code, id) {
+						// TODO tidy this up
+						if (id.startsWith(svelte_url)) return;
+						if (id.endsWith('.svelte')) return;
+						if (id === './__entry.js') return;
+						if (id === 'esm-env') return;
+						if (id === shared_file) return;
+						if (id.startsWith('https://unpkg.com/clsx@')) return;
+
+						add_tailwind_candidates(this.parse(code));
+					}
+				}
 			],
 			onwarn(warning) {
 				all_warnings.push({
@@ -527,6 +603,7 @@ async function get_bundle(
 
 		return {
 			bundle,
+			tailwind: tailwind.build(tailwind_candidates),
 			imports: Array.from(imports),
 			cache: new_cache,
 			error: null,
@@ -656,6 +733,7 @@ async function bundle({
 			uid,
 			client: client_result,
 			server: server_result,
+			tailwind: client.tailwind,
 			imports: client.imports,
 			// Svelte 5 returns warnings as error objects with a toJSON method, prior versions return a POJO
 			warnings: client.warnings.map((w: any) => w.toJSON?.() ?? w),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d68dce3e53..565ad85b01 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -376,6 +376,9 @@ importers:
       svelte:
         specifier: 5.23.0
         version: 5.23.0
+      tailwindcss:
+        specifier: ^4.0.15
+        version: 4.0.15
       tarparser:
         specifier: ^0.0.4
         version: 0.0.4
@@ -3082,6 +3085,9 @@ packages:
     resolution: {integrity: sha512-v0lL3NuKontiCxholEiAXCB+BYbndlKbwlDMK0DS86WgGELMJSpyqCSbJeMEMBDwOglnS7Ar2Rq0wwa/z2L8Vg==}
     engines: {node: '>=18'}
 
+  tailwindcss@4.0.15:
+    resolution: {integrity: sha512-6ZMg+hHdMJpjpeCCFasX7K+U615U9D+7k5/cDK/iRwl6GptF24+I/AbKgOnXhVKePzrEyIXutLv36n4cRsq3Sg==}
+
   tar@7.4.3:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
@@ -5964,6 +5970,8 @@ snapshots:
       magic-string: 0.30.12
       zimmerframe: 1.1.2
 
+  tailwindcss@4.0.15: {}
+
   tar@7.4.3:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1

From 82148b87ae31ad0fd432ee6517927efdd13d5dd2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 15:18:56 -0700
Subject: [PATCH 4/7] more

---
 packages/editor/src/lib/Workspace.svelte.ts   | 10 +++
 packages/repl/src/lib/Bundler.ts              |  2 +-
 .../src/lib/Input/ComponentSelector.svelte    |  5 ++
 packages/repl/src/lib/Output/Viewer.svelte    |  3 +-
 packages/repl/src/lib/Repl.svelte             |  4 +-
 .../repl/src/lib/workers/bundler/index.ts     | 78 ++++++++++++-------
 packages/repl/src/lib/workers/workers.d.ts    |  6 +-
 7 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 17e1e2f65b..e8ec12d208 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -113,6 +113,7 @@ export class Workspace {
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
 	#vim = $state(false);
+	#tailwind = $state(false);
 
 	#handlers = {
 		hover: new Set<(pos: number | null) => void>(),
@@ -464,6 +465,15 @@ export class Workspace {
 		}
 	}
 
+	get tailwind() {
+		return this.#tailwind;
+	}
+
+	set tailwind(value) {
+		this.#tailwind = value;
+		this.#onreset(this.#files);
+	}
+
 	get vim() {
 		return this.#vim;
 	}
diff --git a/packages/repl/src/lib/Bundler.ts b/packages/repl/src/lib/Bundler.ts
index 49caae67c7..afbcfbf27c 100644
--- a/packages/repl/src/lib/Bundler.ts
+++ b/packages/repl/src/lib/Bundler.ts
@@ -58,7 +58,7 @@ export default class Bundler {
 		});
 	}
 
-	bundle(files: File[], options: CompileOptions = {}): Promise<BundleResult> {
+	bundle(files: File[], options: { tailwind: boolean }): Promise<BundleResult> {
 		return new Promise<any>((fulfil) => {
 			this.handlers.set(uid, fulfil);
 			this.worker.postMessage({
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 783600563f..b7fb95b3fa 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -170,6 +170,11 @@
 				<Checkbox bind:checked={workspace.vim}></Checkbox>
 			</label>
 
+			<label class="option">
+				<span>Toggle Tailwind</span>
+				<Checkbox bind:checked={workspace.tailwind}></Checkbox>
+			</label>
+
 			<button disabled={!can_migrate} onclick={migrate}>Migrate to Svelte 5, if possible</button>
 
 			{#if download}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index b724b6ad53..9ab087e4a3 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -8,6 +8,7 @@
 	import Console, { type Log } from './console/Console.svelte';
 	import getLocationFromStack from './get-location-from-stack';
 	import srcdoc from './srcdoc/index.html?raw';
+	import srcdoc_styles from './srcdoc/styles.css?raw';
 	import ErrorOverlay from './ErrorOverlay.svelte';
 	import type { CompileError } from 'svelte/compiler';
 	import type { Bundle } from '../types';
@@ -185,7 +186,7 @@
 					}
 					//# sourceURL=playground:output
 				`,
-					$bundle?.tailwind
+					$bundle?.tailwind ?? srcdoc_styles
 				);
 				error = null;
 			}
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 26da2bd72e..df9262cc5e 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -95,7 +95,9 @@
 
 	async function rebundle() {
 		const token = (current_token = Symbol());
-		const result = await bundler!.bundle(workspace.files as File[]);
+		const result = await bundler!.bundle(workspace.files as File[], {
+			tailwind: workspace.tailwind
+		});
 		if (token === current_token) $bundle = result as Bundle;
 	}
 
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index e76201d917..8f4fa059b8 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -14,25 +14,15 @@ import image from './plugins/image';
 import svg from './plugins/svg';
 import replace from './plugins/replace';
 import loop_protect from './plugins/loop-protect';
-import type { Plugin, TransformResult } from '@rollup/browser';
-import type { BundleMessageData } from '../workers';
+import type { Plugin, RollupCache, TransformResult } from '@rollup/browser';
+import type { BundleMessageData, BundleOptions } from '../workers';
 import type { Warning } from '../../types';
-import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
+import type { CompileError, CompileResult } from 'svelte/compiler';
 import type { File } from 'editor';
 import type { Node } from 'estree';
 import { parseTar, type FileDescription } from 'tarparser';
 import { max } from './semver';
 
-import tailwind_preflight from 'tailwindcss/preflight.css?raw';
-import tailwind_theme from 'tailwindcss/theme.css?raw';
-import tailwind_utilities from 'tailwindcss/utilities.css?raw';
-
-const tailwind_files = {
-	'tailwindcss/theme.css': tailwind_theme,
-	'tailwindcss/preflight.css': tailwind_preflight,
-	'tailwindcss/utilities.css': tailwind_utilities
-};
-
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
 self.window = self;
@@ -46,17 +36,6 @@ let inited = Promise.withResolvers<typeof svelte>();
 
 let can_use_experimental_async = false;
 
-const base = `@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/preflight.css" layer(base);
-@import "tailwindcss/utilities.css" layer(utilities);`;
-
-const tailwind = await tailwindcss.compile(base, {
-	loadStylesheet: async (id, base) => {
-		return { content: tailwind_files[id], base };
-	}
-});
-
 async function init(v: string, packages_url: string) {
 	const match = /^(pr|commit|branch)-(.+)/.exec(v);
 
@@ -276,12 +255,44 @@ async function resolve_from_pkg(
 
 const versions = Object.create(null);
 
+let previous: {
+	key: string;
+	cache: RollupCache;
+};
+
+let tailwind: Awaited<ReturnType<typeof init_tailwind>>;
+
+async function init_tailwind() {
+	const { default: tailwind_preflight } = await import('tailwindcss/preflight.css?raw');
+	const { default: tailwind_theme } = await import('tailwindcss/theme.css?raw');
+	const { default: tailwind_utilities } = await import('tailwindcss/utilities.css?raw');
+
+	const tailwind_files = {
+		'tailwindcss/theme.css': tailwind_theme,
+		'tailwindcss/preflight.css': tailwind_preflight,
+		'tailwindcss/utilities.css': tailwind_utilities
+	};
+
+	const tailwind_base = [
+		`@layer theme, base, components, utilities;`,
+		`@import "tailwindcss/theme.css" layer(theme);`,
+		`@import "tailwindcss/preflight.css" layer(base);`,
+		`@import "tailwindcss/utilities.css" layer(utilities);`
+	].join('\n');
+
+	return await tailwindcss.compile(tailwind_base, {
+		loadStylesheet: async (id, base) => {
+			return { content: tailwind_files[id], base };
+		}
+	});
+}
+
 async function get_bundle(
 	uid: number,
 	mode: 'client' | 'server',
 	cache: (typeof cached)['client'],
 	local_files_lookup: Map<string, File>,
-	options: CompileOptions
+	options: BundleOptions
 ) {
 	let bundle;
 
@@ -469,7 +480,6 @@ async function get_bundle(
 				result = cached_id.result;
 			} else if (id.endsWith('.svelte')) {
 				const compilerOptions: any = {
-					...options,
 					filename: name + '.svelte',
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
 					dev: true
@@ -543,7 +553,8 @@ async function get_bundle(
 				return null;
 			}
 
-			new_cache.set(id, { code, result });
+			// disabled because otherwise we don't recompile when options.tailwind changes
+			// new_cache.set(id, { code, result });
 
 			// @ts-expect-error
 			(result.warnings || result.stats?.warnings)?.forEach((warning) => {
@@ -565,8 +576,11 @@ async function get_bundle(
 	};
 
 	try {
+		const key = JSON.stringify(options);
+
 		bundle = await rollup({
 			input: './__entry.js',
+			cache: previous?.key === key && previous.cache,
 			plugins: [
 				repl_plugin,
 				commonjs,
@@ -579,7 +593,7 @@ async function get_bundle(
 				replace({
 					'process.env.NODE_ENV': JSON.stringify('production')
 				}),
-				{
+				options.tailwind && {
 					name: 'tailwind-extract',
 					transform(code, id) {
 						// TODO tidy this up
@@ -601,9 +615,13 @@ async function get_bundle(
 			}
 		});
 
+		previous = { key, cache: bundle.cache };
+
 		return {
 			bundle,
-			tailwind: tailwind.build(tailwind_candidates),
+			tailwind: options.tailwind
+				? (tailwind ?? (await init_tailwind())).build(tailwind_candidates)
+				: undefined,
 			imports: Array.from(imports),
 			cache: new_cache,
 			error: null,
@@ -626,7 +644,7 @@ async function bundle({
 }: {
 	uid: number;
 	files: File[];
-	options: CompileOptions;
+	options: BundleOptions;
 }) {
 	if (!DEV) {
 		console.clear();
diff --git a/packages/repl/src/lib/workers/workers.d.ts b/packages/repl/src/lib/workers/workers.d.ts
index 1515b10974..59710fa266 100644
--- a/packages/repl/src/lib/workers/workers.d.ts
+++ b/packages/repl/src/lib/workers/workers.d.ts
@@ -48,6 +48,10 @@ export interface MigrateOutput {
 	error?: string;
 }
 
+export interface BundleOptions {
+	tailwind: boolean;
+}
+
 export type BundleMessageData = {
 	uid: number;
 	type: 'init' | 'bundle' | 'status' | 'error';
@@ -55,7 +59,7 @@ export type BundleMessageData = {
 	packages_url: string;
 	svelte_version: string;
 	files: File[];
-	options: CompileOptions;
+	options: BundleOptions;
 };
 
 declare global {

From dd6e73be4ab2958d99bdf936d7ebb86d4741d5e9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 15:21:27 -0700
Subject: [PATCH 5/7] remove unused caching stuff

---
 .../repl/src/lib/workers/bundler/index.ts     | 33 +++----------------
 1 file changed, 5 insertions(+), 28 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 8f4fa059b8..be677e36e2 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -140,14 +140,6 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 	}
 });
 
-let cached: Record<
-	'client' | 'server',
-	Map<string, { code: string; result: ReturnType<typeof svelte.compile> }>
-> = {
-	client: new Map(),
-	server: new Map()
-};
-
 const ABORT = { aborted: true };
 
 const FETCH_CACHE: Map<string, Promise<{ url: string; body: string }>> = new Map();
@@ -290,7 +282,6 @@ async function init_tailwind() {
 async function get_bundle(
 	uid: number,
 	mode: 'client' | 'server',
-	cache: (typeof cached)['client'],
 	local_files_lookup: Map<string, File>,
 	options: BundleOptions
 ) {
@@ -300,7 +291,6 @@ async function get_bundle(
 	const imports: Set<string> = new Set();
 	const warnings: Warning[] = [];
 	const all_warnings: Array<{ message: string }> = [];
-	const new_cache: typeof cache = new Map();
 
 	const tailwind_candidates = [];
 
@@ -473,12 +463,9 @@ async function get_bundle(
 
 			const name = id.split('/').pop()?.split('.')[0];
 
-			const cached_id = cache.get(id);
 			let result: CompileResult;
 
-			if (cached_id && cached_id.code === code) {
-				result = cached_id.result;
-			} else if (id.endsWith('.svelte')) {
+			if (id.endsWith('.svelte')) {
 				const compilerOptions: any = {
 					filename: name + '.svelte',
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
@@ -553,9 +540,6 @@ async function get_bundle(
 				return null;
 			}
 
-			// disabled because otherwise we don't recompile when options.tailwind changes
-			// new_cache.set(id, { code, result });
-
 			// @ts-expect-error
 			(result.warnings || result.stats?.warnings)?.forEach((warning) => {
 				// This is required, otherwise postMessage won't work
@@ -623,13 +607,12 @@ async function get_bundle(
 				? (tailwind ?? (await init_tailwind())).build(tailwind_candidates)
 				: undefined,
 			imports: Array.from(imports),
-			cache: new_cache,
 			error: null,
 			warnings,
 			all_warnings
 		};
 	} catch (error) {
-		return { error, imports: null, bundle: null, cache: new_cache, warnings, all_warnings };
+		return { error, imports: null, bundle: null, warnings, all_warnings };
 	}
 }
 
@@ -704,7 +687,6 @@ async function bundle({
 	let client: Awaited<ReturnType<typeof get_bundle>> = await get_bundle(
 		uid,
 		'client',
-		cached.client,
 		lookup,
 		options
 	);
@@ -714,8 +696,6 @@ async function bundle({
 			throw client.error;
 		}
 
-		cached.client = client.cache;
-
 		const client_result = (
 			await client.bundle?.generate({
 				format: 'iife',
@@ -726,14 +706,11 @@ async function bundle({
 		)?.output[0];
 
 		const server = false // TODO how can we do SSR?
-			? await get_bundle(uid, 'server', cached.server, lookup, options)
+			? await get_bundle(uid, 'server', lookup, options)
 			: null;
 
-		if (server) {
-			cached.server = server.cache;
-			if (server.error) {
-				throw server.error;
-			}
+		if (server?.error) {
+			throw server.error;
 		}
 
 		const server_result = server

From 6c34316ad6405a12b1d2c64723adc91e357cce8b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 15:28:59 -0700
Subject: [PATCH 6/7] try this

---
 packages/repl/src/lib/workers/bundler/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index be677e36e2..9437fd2bf6 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -23,6 +23,10 @@ import type { Node } from 'estree';
 import { parseTar, type FileDescription } from 'tarparser';
 import { max } from './semver';
 
+import tailwind_preflight from 'tailwindcss/preflight.css?raw';
+import tailwind_theme from 'tailwindcss/theme.css?raw';
+import tailwind_utilities from 'tailwindcss/utilities.css?raw';
+
 // hack for magic-string and rollup inline sourcemaps
 // do not put this into a separate module and import it, would be treeshaken in prod
 self.window = self;
@@ -255,10 +259,6 @@ let previous: {
 let tailwind: Awaited<ReturnType<typeof init_tailwind>>;
 
 async function init_tailwind() {
-	const { default: tailwind_preflight } = await import('tailwindcss/preflight.css?raw');
-	const { default: tailwind_theme } = await import('tailwindcss/theme.css?raw');
-	const { default: tailwind_utilities } = await import('tailwindcss/utilities.css?raw');
-
 	const tailwind_files = {
 		'tailwindcss/theme.css': tailwind_theme,
 		'tailwindcss/preflight.css': tailwind_preflight,

From b2c74ed18258232b1cef7f987a99849c4922f696 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 24 Mar 2025 15:33:48 -0700
Subject: [PATCH 7/7] types

---
 .../src/lib/tutorial/adapters/rollup/index.svelte.ts        | 2 +-
 packages/repl/src/lib/Bundler.ts                            | 2 +-
 packages/repl/src/lib/workers/bundler/index.ts              | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
index 2907bbe4f5..53e59cfd97 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts
@@ -45,7 +45,7 @@ export async function create(): Promise<Adapter> {
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
 				.map((f) => ({ ...f, name: f.name.slice(9) })),
 			{
-				runes: true
+				// TODO support Tailwind here?
 			}
 		);
 	}
diff --git a/packages/repl/src/lib/Bundler.ts b/packages/repl/src/lib/Bundler.ts
index afbcfbf27c..0a0ca2d25d 100644
--- a/packages/repl/src/lib/Bundler.ts
+++ b/packages/repl/src/lib/Bundler.ts
@@ -58,7 +58,7 @@ export default class Bundler {
 		});
 	}
 
-	bundle(files: File[], options: { tailwind: boolean }): Promise<BundleResult> {
+	bundle(files: File[], options: { tailwind?: boolean }): Promise<BundleResult> {
 		return new Promise<any>((fulfil) => {
 			this.handlers.set(uid, fulfil);
 			this.worker.postMessage({
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 9437fd2bf6..77baccd678 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -253,13 +253,13 @@ const versions = Object.create(null);
 
 let previous: {
 	key: string;
-	cache: RollupCache;
+	cache: RollupCache | undefined;
 };
 
 let tailwind: Awaited<ReturnType<typeof init_tailwind>>;
 
 async function init_tailwind() {
-	const tailwind_files = {
+	const tailwind_files: Record<string, string> = {
 		'tailwindcss/theme.css': tailwind_theme,
 		'tailwindcss/preflight.css': tailwind_preflight,
 		'tailwindcss/utilities.css': tailwind_utilities
@@ -292,7 +292,7 @@ async function get_bundle(
 	const warnings: Warning[] = [];
 	const all_warnings: Array<{ message: string }> = [];
 
-	const tailwind_candidates = [];
+	const tailwind_candidates: string[] = [];
 
 	function add_tailwind_candidates(ast: Node | undefined) {
 		if (!ast) return;