chore(deps-major): migrate tailwindcss to 4.3.1 2026-06-24

package.json

@@ -13,13 +13,12 @@
     "@sveltejs/adapter-cloudflare": "^7.2.8",
     "@sveltejs/kit": "^2.65.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/vite": "^4.3.1",
     "@testing-library/svelte": "^5.3.1",
-    "autoprefixer": "^10.5.0",
     "drizzle-kit": "^0.31.10",
     "jsdom": "^29.1.1",
-    "postcss": "^8.5.15",
     "svelte": "^5.56.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.3.1",
     "vite": "^6.3.5",
     "vitest": "^4.1.8"
   },

src/app.css

@@ -1,3 +1,22 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/*
+  Preserve Tailwind v3 default behavior across the v4 migration:
+  bare `border-*`/`divide-*` defaulted to gray-200 (now currentColor) and
+  the `ring` utility was a 3px blue-500 ring (now 1px currentColor).
+  These shims keep the existing UI visually unchanged.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@theme {
+  --default-ring-width: 3px;
+  --default-ring-color: var(--color-blue-500);
+}

src/routes/(protected)/+layout.svelte

@@ -25,7 +25,7 @@
   <header class="border-b border-slate-200 dark:border-slate-800 bg-white/70 dark:bg-slate-900/70 backdrop-blur-md sticky top-0 z-50">
     <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
       <div class="flex items-center gap-6">
-        <span class="text-xl font-bold bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">QuizGenerator</span>
+        <span class="text-xl font-bold bg-linear-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">QuizGenerator</span>
         {#if data.user}
           <nav class="flex items-center gap-4">
             <a href="/" class="text-sm font-semibold text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Generate Quiz</a>

src/routes/(protected)/+page.svelte

@@ -193,7 +193,7 @@
     {#if currentStage === 'setup' && !isGenerating}
       <!-- SETUP STAGE -->
       <header class="text-center mb-12">
-        <h1 class="text-4xl font-extrabold tracking-tight bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent sm:text-5xl mb-3">
+        <h1 class="text-4xl font-extrabold tracking-tight bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent sm:text-5xl mb-3">
           Generate a Practice Quiz
         </h1>
         <p class="text-slate-600 dark:text-slate-400 text-lg font-medium">
@@ -324,7 +324,7 @@
             type="button"
             onclick={generateNewQuiz}
             disabled={isGenerating || selectedTopicIds.length === 0}
-            class="w-full sm:w-auto bg-gradient-to-r from-indigo-600 to-purple-650 hover:from-indigo-550 hover:to-purple-550 text-white font-bold px-12 py-4 rounded-2xl shadow-lg shadow-indigo-550/20 active:scale-95 transition-all duration-200 text-lg disabled:opacity-50 disabled:pointer-events-none"
+            class="w-full sm:w-auto bg-linear-to-r from-indigo-600 to-purple-650 hover:from-indigo-550 hover:to-purple-550 text-white font-bold px-12 py-4 rounded-2xl shadow-lg shadow-indigo-550/20 active:scale-95 transition-all duration-200 text-lg disabled:opacity-50 disabled:pointer-events-none"
           >
             Generate Quiz
           </button>
@@ -437,7 +437,7 @@
           <div class="flex justify-center py-6">
             <button
               onclick={submitQuiz}
-              class="w-full sm:w-auto bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold px-12 py-4 rounded-2xl shadow-lg shadow-indigo-500/20 active:scale-95 transition-all duration-200 text-lg"
+              class="w-full sm:w-auto bg-linear-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold px-12 py-4 rounded-2xl shadow-lg shadow-indigo-500/20 active:scale-95 transition-all duration-200 text-lg"
             >
               Submit Quiz
             </button>

src/routes/(protected)/documents/+page.svelte

@@ -136,7 +136,7 @@
     <!-- Header banner -->
     <header class="mb-10 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
       <div>
-        <h1 class="text-3xl font-extrabold tracking-tight bg-gradient-to-r from-indigo-500 via-purple-505 to-pink-500 bg-clip-text text-transparent sm:text-4xl mb-2">
+        <h1 class="text-3xl font-extrabold tracking-tight bg-linear-to-r from-indigo-500 via-purple-505 to-pink-500 bg-clip-text text-transparent sm:text-4xl mb-2">
           Knowledge Base Documents
         </h1>
         <p class="text-slate-500 dark:text-slate-400 font-medium">

src/routes/(protected)/quizzes/[id]/+page.svelte

@@ -105,7 +105,7 @@
         <div class="flex justify-center py-6">
           <button
             onclick={submitQuiz}
-            class="w-full sm:w-auto bg-gradient-to-r from-indigo-600 to-purple-650 hover:from-indigo-550 hover:to-purple-555 text-white font-bold px-12 py-4 rounded-2xl shadow-lg shadow-indigo-500/20 active:scale-95 transition-all duration-200 text-lg"
+            class="w-full sm:w-auto bg-linear-to-r from-indigo-600 to-purple-650 hover:from-indigo-550 hover:to-purple-555 text-white font-bold px-12 py-4 rounded-2xl shadow-lg shadow-indigo-500/20 active:scale-95 transition-all duration-200 text-lg"
           >
             Submit Quiz
           </button>

src/routes/(protected)/upload/+page.svelte

@@ -116,7 +116,7 @@
 <main class="min-h-[calc(100vh-4rem)] flex items-center justify-center p-6 bg-slate-50 dark:bg-slate-950 transition-colors duration-300">
   <div class="w-full max-w-xl">
     <div class="text-center mb-8">
-      <h1 class="text-3xl font-extrabold tracking-tight bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent sm:text-4xl mb-3">
+      <h1 class="text-3xl font-extrabold tracking-tight bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent sm:text-4xl mb-3">
         Upload Document
       </h1>
       <p class="text-slate-600 dark:text-slate-400 text-sm font-medium">
@@ -266,7 +266,7 @@
               <button
                 type="button"
                 onclick={handleUpload}
-                class="flex-1 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-3 px-6 rounded-2xl shadow-lg shadow-indigo-500/20 active:scale-95 transition"
+                class="flex-1 bg-linear-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-3 px-6 rounded-2xl shadow-lg shadow-indigo-500/20 active:scale-95 transition"
               >
                 Extract & Upload
               </button>

src/routes/login/+page.svelte

@@ -134,7 +134,7 @@
   <div class="max-w-md w-full space-y-8 relative z-10">
     <!-- Brand / Title -->
     <div class="text-center">
-      <h1 class="text-4xl font-extrabold tracking-tight bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent sm:text-5xl">
+      <h1 class="text-4xl font-extrabold tracking-tight bg-linear-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent sm:text-5xl">
         QuizGenerator
       </h1>
       <p class="mt-3 text-slate-400 font-medium">
@@ -189,7 +189,7 @@
               bind:value={name}
               placeholder="Alex Johnson"
               required
-              class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition duration-200"
+              class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-hidden focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition duration-200"
             />
           </div>
         {/if}
@@ -202,7 +202,7 @@
             bind:value={email}
             placeholder="name@example.com"
             required
-            class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition duration-200"
+            class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-hidden focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition duration-200"
           />
         </div>
 
@@ -214,7 +214,7 @@
             bind:value={password}
             placeholder="••••••••"
             required
-            class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition duration-200"
+            class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-hidden focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition duration-200"
           />
 
           <!-- Password strength indicators for Sign Up -->
@@ -259,7 +259,7 @@
               bind:value={confirmPassword}
               placeholder="••••••••"
               required
-              class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition duration-200 {confirmPassword && !passwordsMatch ? 'border-rose-500 focus:border-rose-500 focus:ring-rose-500' : ''}"
+              class="w-full bg-slate-900/60 border border-slate-700/80 rounded-xl px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-hidden focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition duration-200 {confirmPassword && !passwordsMatch ? 'border-rose-500 focus:border-rose-500 focus:ring-rose-500' : ''}"
             />
             {#if confirmPassword && !passwordsMatch}
               <p class="text-[11px] text-rose-400 font-semibold mt-1">Passwords do not match</p>
@@ -270,7 +270,7 @@
         <button
           type="submit"
           disabled={isLoading || (isSignUp && (!lengthValid || !passwordsMatch))}
-          class="w-full mt-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg shadow-indigo-950/40 active:scale-95 disabled:opacity-50 disabled:active:scale-100 transition duration-200 flex items-center justify-center gap-2"
+          class="w-full mt-2 bg-linear-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg shadow-indigo-950/40 active:scale-95 disabled:opacity-50 disabled:active:scale-100 transition duration-200 flex items-center justify-center gap-2"
         >
           {#if isLoading}
             <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>

vite.config.js

@@ -1,3 +1,4 @@
+import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
 import { existsSync } from 'fs';
@@ -11,7 +12,7 @@ if (existsSync('./vite.config.local.js')) {
 }
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [tailwindcss(), sveltekit()],
   ...(process.env.VITEST ? {
     resolve: {
       conditions: ['browser']