Upgrade to Tailwind 4

.prettierrc

@@ -11,5 +11,6 @@
 				"parser": "svelte"
 			}
 		}
-	]
+	],
+	"tailwindStylesheet": "./src/app.css"
 }

package.json

@@ -24,12 +24,12 @@
 		"@sveltejs/kit": "^2.17.1",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.16",
+		"@tailwindcss/vite": "^4.0.4",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/eslint-config-prettier": "^6.11.3",
 		"@types/semver": "^7.5.8",
 		"@vercel/speed-insights": "^1.1.0",
 		"arctic": "^3.2.4",
-		"autoprefixer": "^10.4.20",
 		"bits-ui": "1.0.0-next.89",
 		"clsx": "^2.1.1",
 		"eslint": "^9.20.0",
@@ -39,8 +39,6 @@
 		"lucide-svelte": "^0.475.0",
 		"mode-watcher": "^0.5.1",
 		"octokit": "^4.1.1",
-		"postcss": "^8.5.1",
-		"postcss-load-config": "^6.0.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
@@ -54,9 +52,9 @@
 		"svelte-persisted-store": "^0.12.0",
 		"svelte-sonner": "^0.3.28",
 		"sveltekit-search-params": "^3.0.0",
-		"tailwind-merge": "^2.6.0",
+		"tailwind-merge": "^3.0.1",
 		"tailwind-variants": "^0.3.1",
-		"tailwindcss": "^3.4.17",
+		"tailwindcss": "^4.0.4",
 		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.3",

src/app.css

@@ -0,0 +1,162 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-animate";
+
+@variant dark (&:is(.dark *));
+
+@theme {
+	--breakpoint-xs: 475px;
+	--breakpoint-2xl: 1400px;
+
+	--color-background: hsl(var(--background));
+	--color-foreground: hsl(var(--foreground));
+
+	--color-card: hsl(var(--card));
+	--color-card-foreground: hsl(var(--card-foreground));
+
+	--color-popover: hsl(var(--popover));
+	--color-popover-foreground: hsl(var(--popover-foreground));
+
+	--color-primary: hsl(var(--primary));
+	--color-primary-foreground: hsl(var(--primary-foreground));
+
+	--color-secondary: hsl(var(--secondary));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
+
+	--color-muted: hsl(var(--muted));
+	--color-muted-foreground: hsl(var(--muted-foreground));
+
+	--color-accent: hsl(var(--accent));
+	--color-accent-foreground: hsl(var(--accent-foreground));
+
+	--color-destructive: hsl(var(--destructive));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
+
+	--color-border: hsl(var(--border));
+	--color-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
+
+	/*
+	--color-sidebar: hsl(var(--sidebar-background));
+	--color-sidebar-foreground: hsl(var(--sidebar-foreground));
+	--color-sidebar-primary: hsl(var(--sidebar-primary));
+	--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+	--color-sidebar-accent: hsl(var(--sidebar-accent));
+	--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+	--color-sidebar-border: hsl(var(--sidebar-border));
+	--color-sidebar-ring: hsl(var(--sidebar-ring));
+	 */
+
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-lg: var(--radius);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 4px);
+
+	--animate-accordion-down: accordion-down 0.2s ease-out;
+	--animate-accordion-up: accordion-up 0.2s ease-out;
+	--animate-caret-blink: caret-blink 1.25s ease-out infinite;
+
+	@keyframes accordion-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--bits-accordion-content-height);
+		}
+	}
+
+	@keyframes accordion-up {
+		from {
+			height: var(--bits-accordion-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
+
+	@keyframes caret-blink {
+		0%,
+		70%,
+		100% {
+			opacity: 1;
+		}
+
+		20%,
+		50% {
+			opacity: 0;
+		}
+	}
+}
+
+@utility container {
+	margin-inline: auto;
+	padding-inline: 2rem;
+	/* Cancels the undocumented default breakpoint-driven max-width */
+	max-width: var(--breakpoint-2xl);
+}
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 20 14.3% 4.1%;
+		--card: 0 0% 100%;
+		--card-foreground: 20 14.3% 4.1%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 20 14.3% 4.1%;
+		--primary: 24.6 95% 53.1%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 60 4.8% 95.9%;
+		--secondary-foreground: 24 9.8% 10%;
+		--muted: 60 4.8% 95.9%;
+		--muted-foreground: 25 5.3% 44.7%;
+		--accent: 60 4.8% 95.9%;
+		--accent-foreground: 24 9.8% 10%;
+		--destructive: 0 72.22% 50.59%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 20 5.9% 90%;
+		--input: 20 5.9% 90%;
+		--ring: 24.6 95% 53.1%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 20 14.3% 4.1%;
+		--foreground: 60 9.1% 97.8%;
+		--card: 20 14.3% 4.1%;
+		--card-foreground: 60 9.1% 97.8%;
+		--popover: 20 14.3% 4.1%;
+		--popover-foreground: 60 9.1% 97.8%;
+		--primary: 20.5 90.2% 48.2%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 12 6.5% 15.1%;
+		--secondary-foreground: 60 9.1% 97.8%;
+		--muted: 12 6.5% 15.1%;
+		--muted-foreground: 24 5.4% 63.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 60 9.1% 97.8%;
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 12 6.5% 15.1%;
+		--input: 12 6.5% 15.1%;
+		--ring: 20.5 90.2% 48.2%;
+	}
+}
+
+@layer base {
+	::selection {
+		@apply bg-primary text-primary-foreground;
+	}
+
+	* {
+		@apply border-border;
+	}
+
+	body {
+		@apply flex min-h-screen flex-col bg-background text-foreground;
+	}
+
+	/* I like pointer cursors on buttons */
+	button:not(:disabled),
+	[role="button"]:not(:disabled) {
+		cursor: pointer;
+	}
+}

src/lib/components/BlinkingBadge.svelte

@@ -36,7 +36,7 @@
 {#if show && shouldShowPulse}
 	<div class="relative inline-flex">
 		{@render children?.()}
-		<span class="absolute right-0 top-0 -mr-0.5 -mt-0.5 flex size-2.5">
+		<span class="absolute top-0 right-0 -mt-0.5 -mr-0.5 flex size-2.5">
 			<span
 				class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75"
 			></span>

src/lib/components/MarkdownRenderer.svelte

@@ -31,7 +31,7 @@
 <svelte:element
 	this={inline ? "span" : "div"}
 	class={cn(
-		"prose dark:prose-invert prose-a:no-underline prose-a:underline-offset-4 prose-a:[overflow-wrap:_anywhere] hover:prose-a:underline prose-code:[overflow-wrap:_anywhere] prose-li:my-1",
+		"prose dark:prose-invert prose-a:[overflow-wrap:_anywhere] prose-a:text-primary prose-a:no-underline prose-a:underline-offset-4 prose-a:hover:underline prose-code:[overflow-wrap:_anywhere] prose-li:my-1",
 		"prose-pre:text-wrap", // remove with TODO
 		inline && "*:inline",
 		className