diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte
index 57ec47ebcf..85276916a0 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/+assets/app-b/src/lib/App.svelte
@@ -5,8 +5,7 @@
 <div class="container">
 	Flip the card
 	<button
-		class="card"
-		class:flipped={flipped}
+		class={["card", { flipped }]}
 		onclick={() => flipped = !flipped}
 	>
 		<div class="front">
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md
index ee1c65b364..4b4b073b46 100644
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/01-classes/index.md
@@ -1,5 +1,5 @@
 ---
-title: The class directive
+title: The class attribute
 ---
 
 Like any other attribute, you can specify classes with a JavaScript attribute. Here, we could add a `flipped` class to the card:
@@ -14,15 +14,16 @@ Like any other attribute, you can specify classes with a JavaScript attribute. H
 
 This works as expected — if you click on the card now, it'll flip.
 
-We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte includes a special directive to simplify it:
+We can make it nicer though. Adding or removing a class based on some condition is such a common pattern in UI development that Svelte allows you to pass an object or array that is converted to a string by [clsx](https://github.com/lukeed/clsx).
 
 ```svelte
 /// file: App.svelte
 <button
-	class="card"
-	+++class:flipped={flipped}+++
+	+++class={["card", { flipped }]}+++
 	onclick={() => flipped = !flipped}
 >
 ```
 
-This directive means 'add the `flipped` class whenever `flipped` is truthy'.
+This means 'always add the `card` class, and add the `flipped` class whenever `flipped` is truthy'.
+
+For more examples of how to combine conditional classes, [consult the `class` documentation](/docs/svelte/class).
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte
deleted file mode 100644
index 5ef956edfe..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/+assets/app-b/src/lib/App.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script>
-	let flipped = $state(false);
-</script>
-
-<div class="container">
-	Flip the card
-	<button
-		class="card"
-		class:flipped
-		onclick={() => flipped = !flipped}
-	>
-		<div class="front">
-			<span class="symbol">♠</span>
-		</div>
-		<div class="back">
-			<div class="pattern"></div>
-		</div>
-	</button>
-</div>
-
-<style>
-	.container {
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-		height: 100%;
-		align-items: center;
-		justify-content: center;
-		perspective: 100vh;
-	}
-
-	.card {
-		position: relative;
-		aspect-ratio: 2.5 / 3.5;
-		font-size: min(1vh, 0.25rem);
-		height: 80em;
-		background: var(--bg-1);
-		border-radius: 2em;
-		transform: rotateY(180deg);
-		transition: transform 0.4s;
-		transform-style: preserve-3d;
-		padding: 0;
-		user-select: none;
-		cursor: pointer;
-	}
-
-	.card.flipped {
-		transform: rotateY(0);
-	}
-
-	.front, .back {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		top: 0;
-		backface-visibility: hidden;
-		border-radius: 2em;
-		border: 1px solid var(--fg-2);
-		box-sizing: border-box;
-		padding: 2em;
-	}
-
-	.front {
-		background: url(./svelte-logo.svg) no-repeat 5em 5em, url(./svelte-logo.svg) no-repeat calc(100% - 5em) calc(100% - 5em);
-		background-size: 8em 8em, 8em 8em;
-	}
-
-	.back {
-		transform: rotateY(180deg);
-	}
-
-	.symbol {
-		font-size: 30em;
-		color: var(--fg-1);
-	}
-
-	.pattern {
-		width: 100%;
-		height: 100%;
-		background-color: var(--bg-2);
-		/* pattern from https://projects.verou.me/css3patterns/#marrakesh */
-		background-image:
-		radial-gradient(var(--bg-3) 0.9em, transparent 1em),
-		repeating-radial-gradient(var(--bg-3) 0, var(--bg-3) 0.4em, transparent 0.5em, transparent 2em, var(--bg-3) 2.1em, var(--bg-3) 2.5em, transparent 2.6em, transparent 5em);
-		background-size: 3em 3em, 9em 9em;
-		background-position: 0 0;
-		border-radius: 1em;
-	}
-</style>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md
deleted file mode 100644
index 4852f1d176..0000000000
--- a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-class-shorthand/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Shorthand class directive
----
-
-Often, the name of the class will be the same as the name of the value it depends on:
-
-```svelte
-<button
-	class="card"
-	class:flipped={flipped}
-	onclick={() => flipped = !flipped}
->
-```
-
-In those cases we can use a shorthand form:
-
-```svelte
-/// file: App.svelte
-<button
-	class="card"
-	+++class:flipped+++
-	onclick={() => flipped = !flipped}
->
-```
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-styles/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-styles/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-styles/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-styles/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/02-styles/index.md
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-a/src/lib/Box.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/Box.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-a/src/lib/Box.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-a/src/lib/Box.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-b/src/lib/Box.svelte b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/Box.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/+assets/app-b/src/lib/Box.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/+assets/app-b/src/lib/Box.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/index.md b/apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/04-component-styles/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/07-classes-and-styles/03-component-styles/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
index bb9e235320..c0decfa0bb 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
@@ -24,7 +24,7 @@
 
 	<ul class="todos">
 		{#each todos as todo}
-			<li class:done={todo.done}>
+			<li class={{ done: todo.done }}>
 				<input
 					type="checkbox"
 					checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
index 2845e2fd22..d80df80e23 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
@@ -24,7 +24,7 @@
 
 	<ul class="todos">
 		{#each todos as todo}
-			<li class:done={todo.done}>
+			<li class={{ done: todo.done }}>
 				<input
 					type="checkbox"
 					bind:checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
index b5efd3ea20..3d9d41ec05 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
@@ -7,7 +7,7 @@ You can bind to properties inside an `each` block.
 ```svelte
 /// file: App.svelte
 {#each todos as todo}
-	<li class:done={todo.done}>
+	<li class={{ done: todo.done }}>
 		<input
 			type="checkbox"
 			+++bind:+++checked={todo.done}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
index e556a56646..9d44e7144f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
index 47ba2148a5..1a8e910919 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
index 8ae0e5cd6c..1023927307 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
@@ -8,7 +8,7 @@ First, add the `<audio>` element along with its bindings (we'll use the shorthan
 
 ```svelte
 /// file: AudioPlayer.svelte
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 +++	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
index bee5ab9dc2..dfb54f127e 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
@@ -5,7 +5,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 		>
 			<label>
 				<input type="checkbox" bind:checked={todo.done}/>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
index 6639712f63..ed353a8fa3 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
@@ -7,7 +7,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 		>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
index c5fc3d8d30..b4febee21b 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
@@ -24,7 +24,7 @@ Then, add them to the `<li>` element, using the `todo.id` property as a key to m
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	+++in:receive={{ key: todo.id }}+++
 	+++out:send={{ key: todo.id }}+++
 >
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
index e213d2717c..2f70529ddb 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
@@ -8,7 +8,7 @@
 <ul class="todos">
 	{#each todos as todo (todo)}
 		<li
-			class:done={todo.done}
+			class={{ done: todo.done }}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 			animate:flip={{ duration: 200 }}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
index 8e6d78fd75..3a5ce32ebb 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
@@ -23,7 +23,7 @@ Then add it to the `<li>` elements:
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	+++animate:flip+++
@@ -35,7 +35,7 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done={todo.done}
+	class={{ done: todo.done }}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	animate:flip+++={{ duration: 200 }}+++
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
index 8585df6463..00d0c63ff9 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
@@ -8,7 +8,7 @@
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
-	class:curious={hereKitty}
+	class={{ curious: hereKitty }}
 	alt="Kitten wants to know what's going on"
 	src={kitten}
 />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
index 5bd3e3cbd8..43be26bf0a 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
@@ -11,7 +11,7 @@
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
-	class:curious={hereKitty}
+	class={{ curious: hereKitty }}
 	alt="Kitten wants to know what's going on"
 	src={kitten}
 />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
index 47ba2148a5..1a8e910919 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
index fb06db4d32..c3239748af 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
index 30bdad76f8..0407b34137 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -23,7 +23,7 @@
 	}
 </script>
 
-<div class="player" class:paused>
+<div class={['player', { paused }]}>
 	<audio
 		{src}
 		bind:currentTime={time}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
index ca58b19403..721ee9f09c 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
@@ -8,7 +8,7 @@
 	}
 </script>
 
-<button class:expanded onclick={toggle}>{name}</button>
+<button class={{ expanded }} onclick={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
index 5de935c96f..97e9750fc5 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
@@ -9,7 +9,7 @@
 	}
 </script>
 
-<button class:expanded onclick={toggle}>{name}</button>
+<button class={{ expanded }} onclick={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
index f12a97415b..a08174e5d6 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-a/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="/">home</a>
@@ -21,4 +21,4 @@
 	nav.has-color a {
 		color: white;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
index 45d876bb40..4db65194be 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/+assets/app-b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="/">home</a>
diff --git a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
index b4c2473686..834bf19f41 100644
--- a/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
+++ b/apps/svelte.dev/content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/index.md
@@ -20,7 +20,7 @@ We can now use the `component` returned from these `load` functions like any oth
 ```svelte
 /// file: src/routes/+layout.svelte
 <nav
-	class:has-color={!!page.data.color}
+	class={[page.data.color && 'has-color']}
 	style:background={page.data.color ?? 'var(--bg-2)'}
 >
 	<a href="/">home</a>