sveltejs · Rich-Harris · Mar 24, 2025 · Mar 24, 2025 · Mar 24, 2025 · Mar 24, 2025
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
@@ -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/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/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/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/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
@@ -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/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
@@ -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';
@@ -107,7 +108,8 @@
 			clear_logs();
 
 			if (!$bundle.error) {
-				await proxy?.eval(`
+				await proxy?.eval(
+					`
 					${injectedJS}
 
 					if (!window.__setup_focus_handling) {
@@ -183,7 +185,9 @@
 						}
 					}
 					//# sourceURL=playground:output
-				`);
+				`,
+					$bundle?.tailwind ?? srcdoc_styles
+				);
 				error = null;
 			}
 		} catch (e) {

diff --git 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';

diff --git 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
@@ -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/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/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[];
 };