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.2",
     "@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.2",
     "vite": "^6.3.5",
     "vitest": "^4.1.8"
   },

src/app.css

@@ -1,3 +1,31 @@
-@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);
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  ::placeholder {
+    color: var(--color-gray-400, #9ca3af);
+  }
+}
+
+@theme {
+  --default-ring-width: 3px;
+  --default-ring-color: var(--color-blue-500);
+}

src/lib/components/Questions.svelte

@@ -26,7 +26,7 @@
 
 <div class="space-y-6">
   {#each questions as question, i}
-    <div class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 transition-all duration-300">
+    <div class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-xs border border-slate-100 dark:border-slate-800 transition-all duration-300">
       <div class="flex items-start gap-4 mb-4">
         <span class="inline-flex items-center justify-center bg-indigo-50 dark:bg-indigo-950/50 text-indigo-600 dark:text-indigo-400 font-bold w-8 h-8 rounded-lg text-sm shrink-0">
           {i + 1}

src/lib/components/Result.svelte

@@ -21,7 +21,7 @@
   $: percentage = result.total > 0 ? Math.round((result.score / result.total) * 100) : 0;
 </script>
 
-<div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 transition-all duration-300">
+<div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-xs border border-slate-100 dark:border-slate-800 transition-all duration-300">
   <div class="text-center mb-8">
     <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2">Quiz Completed!</h2>
     <div class="inline-flex flex-col items-center justify-center p-6 bg-slate-50 dark:bg-slate-950 rounded-full w-32 h-32 border-4 border-indigo-500/30 mb-4">

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,15 +193,15 @@
     {#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">
           Select topics from your Knowledge Base and configure your quiz settings.
         </p>
       </header>
 
-      <div class="space-y-8 bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-3xl p-6 sm:p-10 shadow-sm transition duration-300">
+      <div class="space-y-8 bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-3xl p-6 sm:p-10 shadow-xs transition duration-300">
         <!-- Error Alert -->
         {#if errorMsg}
           <div class="bg-rose-50 dark:bg-rose-950/20 border-2 border-rose-200 dark:border-rose-900/40 p-5 rounded-2xl flex items-start gap-3 text-rose-800 dark:text-rose-450">
@@ -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>
@@ -354,7 +354,7 @@
       </header>
 
       <div class="space-y-8">
-        <div class="flex justify-between items-center bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm">
+        <div class="flex justify-between items-center bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-xs">
           <span class="text-sm font-semibold text-slate-500 dark:text-slate-400">
             Total Questions: <strong class="text-slate-850 dark:text-slate-200">{questions.length}</strong>
           </span>
@@ -395,7 +395,7 @@
         </div>
 
         {#if showSaveForm}
-          <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-4 shadow-sm flex flex-col gap-3">
+          <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-4 shadow-xs flex flex-col gap-3">
             <div class="flex justify-between items-center">
               <span class="text-sm font-bold text-slate-800 dark:text-slate-200">Save Quiz Details</span>
               <button onclick={() => { showSaveForm = false; saveError = ''; }} class="text-slate-400 hover:text-slate-655 text-lg">&times;</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>
@@ -452,7 +452,7 @@
             <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
               <button
                 onclick={retakeQuiz}
-                class="w-full sm:w-auto bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 font-bold px-8 py-3.5 rounded-xl shadow-sm active:scale-95 transition"
+                class="w-full sm:w-auto bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 font-bold px-8 py-3.5 rounded-xl shadow-xs active:scale-95 transition"
               >
                 Retake 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">
@@ -159,7 +159,7 @@
 
     {#if documents.length === 0}
       <!-- Empty state -->
-      <div class="bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-16 text-center shadow-sm">
+      <div class="bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800/80 rounded-3xl p-16 text-center shadow-xs">
         <div class="w-16 h-16 bg-indigo-50 dark:bg-indigo-950/30 text-indigo-650 dark:text-indigo-400 rounded-2xl flex items-center justify-center mx-auto mb-6">
           <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
@@ -180,7 +180,7 @@
       <!-- Document List Grid -->
       <div class="grid gap-6 md:grid-cols-1">
         {#each documents as doc (doc.id)}
-          <div class="bg-white dark:bg-slate-900 border border-slate-250/50 dark:border-slate-800/80 rounded-3xl p-6 flex flex-col md:flex-row md:items-center justify-between gap-6 shadow-sm hover:shadow-md transition duration-200">
+          <div class="bg-white dark:bg-slate-900 border border-slate-250/50 dark:border-slate-800/80 rounded-3xl p-6 flex flex-col md:flex-row md:items-center justify-between gap-6 shadow-xs hover:shadow-md transition duration-200">
             <div class="flex items-start gap-4 min-w-0">
               <div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-950/30 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

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

@@ -68,7 +68,7 @@
     {/if}
 
     {#if quizzes.length === 0}
-      <div class="bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-3xl p-10 text-center shadow-sm">
+      <div class="bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-3xl p-10 text-center shadow-xs">
         <div class="inline-flex items-center justify-center bg-slate-50 dark:bg-slate-950 text-slate-400 dark:text-slate-600 w-16 h-16 rounded-full mb-4">
           <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
@@ -91,7 +91,7 @@
     {:else}
       <div class="grid gap-6">
         {#each quizzes as q (q.id)}
-          <div class="bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-2xl p-6 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-6 transition hover:shadow-md duration-200">
+          <div class="bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-2xl p-6 shadow-xs flex flex-col md:flex-row md:items-center justify-between gap-6 transition hover:shadow-md duration-200">
             <div class="space-y-2">
               <div class="flex items-center flex-wrap gap-2">
                 <h3 class="text-xl font-bold text-slate-900 dark:text-white">{q.title}</h3>

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

@@ -76,7 +76,7 @@
     </header>
 
     <div class="space-y-8">
-      <div class="flex justify-between items-center bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm">
+      <div class="flex justify-between items-center bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-xs">
         <a
           href="/quizzes"
           class="text-sm font-semibold text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 flex items-center gap-1.5 active:scale-95 transition"
@@ -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>
@@ -120,7 +120,7 @@
           <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
             <button
               onclick={retakeQuiz}
-              class="w-full sm:w-auto bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 font-bold px-8 py-3.5 rounded-xl shadow-sm active:scale-95 transition"
+              class="w-full sm:w-auto bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-200 font-bold px-8 py-3.5 rounded-xl shadow-xs active:scale-95 transition"
             >
               Retake Quiz
             </button>

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

@@ -198,7 +198,7 @@
     </div>
 
     <!-- Editable Title Header -->
-    <div class="bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-2xl p-6 shadow-sm mb-8">
+    <div class="bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-2xl p-6 shadow-xs mb-8">
       <h2 class="text-sm font-bold text-slate-450 dark:text-slate-400 uppercase tracking-wider mb-2">Quiz Title</h2>
       <div class="flex flex-col sm:flex-row gap-3">
         <input
@@ -232,7 +232,7 @@
         <button
           onclick={saveOrder}
           disabled={isSavingOrder}
-          class="bg-white text-indigo-650 hover:bg-indigo-50 font-extrabold px-5 py-2 rounded-xl text-sm transition active:scale-95 shadow"
+          class="bg-white text-indigo-650 hover:bg-indigo-50 font-extrabold px-5 py-2 rounded-xl text-sm transition active:scale-95 shadow-sm"
         >
           {isSavingOrder ? 'Saving...' : 'Save Order Now'}
         </button>
@@ -242,7 +242,7 @@
     <!-- Questions list -->
     <div class="space-y-6">
       {#each questions as q, index (q.id)}
-        <div class="bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-2xl p-6 shadow-sm transition duration-300">
+        <div class="bg-white dark:bg-slate-900 border border-slate-200/50 dark:border-slate-800/80 rounded-2xl p-6 shadow-xs transition duration-300">
 
           {#if editingQuestionId === q.id}
             <!-- Inline Edit Form -->
@@ -313,7 +313,7 @@
                 </button>
                 <button
                   onclick={() => saveQuestion(q.id)}
-                  class="bg-indigo-600 hover:bg-indigo-550 text-white font-bold px-5 py-2 rounded-xl text-sm transition shadow"
+                  class="bg-indigo-600 hover:bg-indigo-550 text-white font-bold px-5 py-2 rounded-xl text-sm transition shadow-sm"
                 >
                   Save Changes
                 </button>
@@ -336,7 +336,7 @@
                 <button
                   onclick={() => moveQuestion(index, 'up')}
                   disabled={index === 0}
-                  class="p-1 rounded hover:bg-slate-200 dark:hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none text-slate-500"
+                  class="p-1 rounded-sm hover:bg-slate-200 dark:hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none text-slate-500"
                   title="Move Up"
                 >
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -346,7 +346,7 @@
                 <button
                   onclick={() => moveQuestion(index, 'down')}
                   disabled={index === questions.length - 1}
-                  class="p-1 rounded hover:bg-slate-200 dark:hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none text-slate-500"
+                  class="p-1 rounded-sm hover:bg-slate-200 dark:hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none text-slate-500"
                   title="Move Down"
                 >
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

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">
@@ -198,7 +198,7 @@
           >
             <!-- Overlay Loader/Progress -->
             {#if status === 'extracting' || status === 'uploading'}
-              <div class="absolute inset-0 bg-white/95 dark:bg-slate-900/95 flex flex-col items-center justify-center p-6 space-y-4 z-20 backdrop-blur-sm">
+              <div class="absolute inset-0 bg-white/95 dark:bg-slate-900/95 flex flex-col items-center justify-center p-6 space-y-4 z-20 backdrop-blur-xs">
                 <div class="relative w-14 h-14">
                   <div class="absolute inset-0 border-4 border-slate-100 dark:border-slate-800 rounded-full"></div>
                   <div class="absolute inset-0 border-4 border-indigo-600 dark:border-indigo-400 border-t-transparent rounded-full animate-spin"></div>
@@ -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>