Upgrade tailwindcss to version 3.4 (#664)

* Upgrade tailwindcss to version 3.4

* lint

Author: nsarrazin

package-lock.json

@@ -64,7 +64,7 @@
 		"postcss": "^8.4.31",
 		"serpapi": "^1.1.1",
 		"tailwind-scrollbar": "^3.0.0",
-		"tailwindcss": "^3.3.1",
+		"tailwindcss": "^3.4.0",
 		"zod": "^3.22.3"
 	},
 	"optionalDependencies": {

package.json

@@ -30,7 +30,7 @@
 </script>
 
 <nav
-	class="flex h-12 items-center justify-between border-b bg-gray-50 px-4 dark:border-gray-800 dark:bg-gray-800/70 md:hidden"
+	class="flex h-12 items-center justify-between border-b bg-gray-50 px-4 md:hidden dark:border-gray-800 dark:bg-gray-800/70"
 >
 	<button
 		type="button"

src/lib/components/MobileNav.svelte

@@ -61,7 +61,7 @@
 	</a>
 </div>
 <div
-	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
+	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 max-sm:bg-gradient-to-t md:bg-gradient-to-l dark:from-gray-800/30"
 >
 	{#each Object.entries(groupedConversations) as [group, convs]}
 		{#if convs.length}
@@ -89,7 +89,7 @@
 			>
 			<button
 				type="submit"
-				class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
+				class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none md:hidden dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
 			>
 				Sign Out
 			</button>

src/lib/components/NavMenu.svelte

@@ -78,7 +78,7 @@
 				{#each currentModelMetadata.promptExamples as example}
 					<button
 						type="button"
-						class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
+						class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 sm:p-4 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
 						on:click={() => dispatch("message", example.prompt)}
 					>
 						{example.title}

src/lib/components/chat/ChatIntroduction.svelte

@@ -158,7 +158,7 @@
 			{/if}
 
 			<div
-				class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+				class="prose max-w-none max-sm:prose-sm dark:prose-invert prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
 				bind:this={contentEl}
 			>
 				{#each tokens as token}
@@ -266,7 +266,7 @@
 				<div class="absolute right-0 top-3.5 flex gap-2 lg:-right-2">
 					{#if downloadLink}
 						<a
-							class="rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
+							class="rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 md:hidden dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
 							title="Download prompt and parameters"
 							type="button"
 							target="_blank"
@@ -277,7 +277,7 @@
 					{/if}
 					{#if !readOnly}
 						<button
-							class="cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
+							class="cursor-pointer rounded-lg border border-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 md:hidden lg:-right-2 dark:border-gray-800 dark:text-gray-400 dark:hover:text-gray-300"
 							title="Retry"
 							type="button"
 							on:click={() => dispatch("retry", { content: message.content, id: message.id })}