diff --git a/.prettierrc b/.prettierrc
index ae088267..98f9af1e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,7 +3,7 @@
   "trailingComma": "all",
   "useTabs": false,
   "printWidth": 120,
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "plugins": ["prettier-plugin-svelte"],
   "overrides": [
     { "files": "*.svelte", "options": { "parser": "svelte" } },
     { "files": "wrangler.jsonc", "options": { "trailingComma": "none" } }
diff --git a/apps/api.immich.app/src/lib/components/ApiAdminRouteBadge.svelte b/apps/api.immich.app/src/lib/components/ApiAdminRouteBadge.svelte
index 46526094..1d1ac6ae 100644
--- a/apps/api.immich.app/src/lib/components/ApiAdminRouteBadge.svelte
+++ b/apps/api.immich.app/src/lib/components/ApiAdminRouteBadge.svelte
@@ -1,4 +1,4 @@
 <span
-  class="text-dark rounded-lg bg-yellow-200 px-2 py-0.5 text-sm dark:bg-yellow-900 dark:text-yellow-50"
+  class="rounded-lg bg-yellow-200 px-2 py-0.5 text-sm text-dark dark:bg-yellow-900 dark:text-yellow-50"
   title="Endpoint can only be used by Administrators">Auth: Admin</span
 >
diff --git a/apps/api.immich.app/src/lib/components/ApiPageContent.svelte b/apps/api.immich.app/src/lib/components/ApiPageContent.svelte
index 71d5fe9d..9b28ae80 100644
--- a/apps/api.immich.app/src/lib/components/ApiPageContent.svelte
+++ b/apps/api.immich.app/src/lib/components/ApiPageContent.svelte
@@ -21,7 +21,7 @@
     </div>
   </div>
 
-  <hr class="border-subtle border" />
+  <hr class="border border-subtle" />
 
   {@render children?.()}
 
diff --git a/apps/api.immich.app/src/lib/components/ApiParamsInternal.svelte b/apps/api.immich.app/src/lib/components/ApiParamsInternal.svelte
index 91737531..0604e026 100644
--- a/apps/api.immich.app/src/lib/components/ApiParamsInternal.svelte
+++ b/apps/api.immich.app/src/lib/components/ApiParamsInternal.svelte
@@ -53,7 +53,7 @@
 
 <div class="hidden lg:block">
   <Card color="secondary">
-    <div class="bg-subtle text-dark mb-2 grid grid-cols-12 border-b px-4 py-2 font-bold">
+    <div class="mb-2 grid grid-cols-12 border-b bg-subtle px-4 py-2 font-bold text-dark">
       <div class="col-span-3">Property</div>
       <div class="col-span-3">Type</div>
       <div class="col-span-2">Status</div>
diff --git a/apps/api.immich.app/src/lib/components/ApiPermission.svelte b/apps/api.immich.app/src/lib/components/ApiPermission.svelte
index f0644783..80488113 100644
--- a/apps/api.immich.app/src/lib/components/ApiPermission.svelte
+++ b/apps/api.immich.app/src/lib/components/ApiPermission.svelte
@@ -7,6 +7,6 @@
 </script>
 
 <span
-  class="text-dark rounded-lg bg-purple-200 px-2 py-0.5 text-sm dark:bg-purple-900 dark:text-purple-50"
+  class="rounded-lg bg-purple-200 px-2 py-0.5 text-sm text-dark dark:bg-purple-900 dark:text-purple-50"
   title="The {value} permission">Permission: {value}</span
 >
diff --git a/apps/api.immich.app/src/lib/components/ApiPublicRouteBadge.svelte b/apps/api.immich.app/src/lib/components/ApiPublicRouteBadge.svelte
index 0dd4cb4f..a7385253 100644
--- a/apps/api.immich.app/src/lib/components/ApiPublicRouteBadge.svelte
+++ b/apps/api.immich.app/src/lib/components/ApiPublicRouteBadge.svelte
@@ -1,4 +1,4 @@
 <span
-  class="text-dark rounded-lg bg-blue-200 px-2 py-0.5 text-sm dark:bg-blue-900 dark:text-blue-50"
+  class="rounded-lg bg-blue-200 px-2 py-0.5 text-sm text-dark dark:bg-blue-900 dark:text-blue-50"
   title="Endpoint can be accessed without any authentication">Public Endpoint</span
 >
diff --git a/apps/api.immich.app/src/lib/components/ApiSchemaType.svelte b/apps/api.immich.app/src/lib/components/ApiSchemaType.svelte
index 7d2197db..b7bed29a 100644
--- a/apps/api.immich.app/src/lib/components/ApiSchemaType.svelte
+++ b/apps/api.immich.app/src/lib/components/ApiSchemaType.svelte
@@ -92,7 +92,7 @@
   {/if}
 
   {#if schema.nullable}
-    <span class="text-dark font-thin">|</span>
+    <span class="font-thin text-dark">|</span>
     <span class={cleanClass(badgeClasses, Colors.Gray)}>Null</span>
   {/if}
 </div>
diff --git a/apps/api.immich.app/src/lib/components/ApiSharedLinkRouteBadge.svelte b/apps/api.immich.app/src/lib/components/ApiSharedLinkRouteBadge.svelte
index f8f7acbb..c1d46b20 100644
--- a/apps/api.immich.app/src/lib/components/ApiSharedLinkRouteBadge.svelte
+++ b/apps/api.immich.app/src/lib/components/ApiSharedLinkRouteBadge.svelte
@@ -1,4 +1,4 @@
 <span
-  class="text-dark rounded-lg bg-yellow-200 px-2 py-0.5 text-sm dark:bg-yellow-900 dark:text-yellow-50"
+  class="rounded-lg bg-yellow-200 px-2 py-0.5 text-sm text-dark dark:bg-yellow-900 dark:text-yellow-50"
   title="Endpoint can be accessed by shared link authentication">Auth: Shared Link</span
 >
diff --git a/apps/api.immich.app/src/lib/components/ApiState.svelte b/apps/api.immich.app/src/lib/components/ApiState.svelte
index 07bcfc53..73b8f9d3 100644
--- a/apps/api.immich.app/src/lib/components/ApiState.svelte
+++ b/apps/api.immich.app/src/lib/components/ApiState.svelte
@@ -10,14 +10,14 @@
   const { state, short }: Props = $props();
 
   const styles = tv({
-    base: 'text-dark rounded-lg px-2 py-0.5 text-sm',
+    base: 'rounded-lg px-2 py-0.5 text-sm text-dark',
     variants: {
       state: {
-        Stable: 'text-dark bg-green-200 dark:bg-green-900',
-        Beta: 'text-dark bg-yellow-200 dark:bg-yellow-900 ',
-        Deprecated: 'bg-red-200 dark:bg-red-900 ',
-        Alpha: 'bg-purple-200 dark:bg-purple-900 ',
-        Internal: 'bg-gray-300 dark:bg-gray-600 ',
+        Stable: 'bg-green-200 text-dark dark:bg-green-900',
+        Beta: 'bg-yellow-200 text-dark dark:bg-yellow-900',
+        Deprecated: 'bg-red-200 dark:bg-red-900',
+        Alpha: 'bg-purple-200 dark:bg-purple-900',
+        Internal: 'bg-gray-300 dark:bg-gray-600',
       },
     },
   });
diff --git a/apps/api.immich.app/src/lib/components/ErrorLayout.svelte b/apps/api.immich.app/src/lib/components/ErrorLayout.svelte
index 78ebe09d..63c635e2 100644
--- a/apps/api.immich.app/src/lib/components/ErrorLayout.svelte
+++ b/apps/api.immich.app/src/lib/components/ErrorLayout.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <Container size="full" center class="h-dvh">
-  <div class="border-subtle border-b p-2">
+  <div class="border-b border-subtle p-2">
     <a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">
       <Logo variant="inline" />
     </a>
diff --git a/apps/api.immich.app/src/routes/(docs)/endpoints/[tag]/[operationId]/+page.svelte b/apps/api.immich.app/src/routes/(docs)/endpoints/[tag]/[operationId]/+page.svelte
index 4c091e34..0428a06e 100644
--- a/apps/api.immich.app/src/routes/(docs)/endpoints/[tag]/[operationId]/+page.svelte
+++ b/apps/api.immich.app/src/routes/(docs)/endpoints/[tag]/[operationId]/+page.svelte
@@ -126,7 +126,7 @@
         </span>
       </Text>
     </div>
-    <hr class="border-subtle mt-4 border" />
+    <hr class="mt-4 border border-subtle" />
   </section>
 
   {#if endpoint.deprecated}
diff --git a/apps/buy.immich.app/src/lib/components/LicenseKey.svelte b/apps/buy.immich.app/src/lib/components/LicenseKey.svelte
index 61d17c9a..2779817f 100644
--- a/apps/buy.immich.app/src/lib/components/LicenseKey.svelte
+++ b/apps/buy.immich.app/src/lib/components/LicenseKey.svelte
@@ -33,7 +33,7 @@
   <CardBody>
     <Stack gap={4}>
       <div>
-        <div class="bg-primary/10 rounded-lg px-6 py-2">
+        <div class="rounded-lg bg-primary/10 px-6 py-2">
           <Text color="primary">{productKey}</Text>
         </div>
       </div>
diff --git a/apps/buy.immich.app/src/routes/+page.svelte b/apps/buy.immich.app/src/routes/+page.svelte
index 8690643a..ed241554 100644
--- a/apps/buy.immich.app/src/routes/+page.svelte
+++ b/apps/buy.immich.app/src/routes/+page.svelte
@@ -23,7 +23,7 @@
           >
             <div class="flex flex-col gap-4 sm:flex-row sm:items-start lg:flex-col lg:items-start">
               <div class="w-full shrink-0 sm:w-32 md:w-48 lg:w-full">
-                <div class="text-primary flex flex-col items-start gap-1">
+                <div class="flex flex-col items-start gap-1 text-primary">
                   <Icon icon={mdiServer} size="56" />
                   <Text fontWeight="bold" size="large">Server</Text>
                 </div>
@@ -55,7 +55,7 @@
           >
             <div class="flex flex-col gap-4 sm:flex-row sm:items-start lg:flex-col lg:items-start">
               <div class="w-full shrink-0 sm:w-32 md:w-48 lg:w-full">
-                <div class="text-primary flex flex-col items-start gap-1">
+                <div class="flex flex-col items-start gap-1 text-primary">
                   <Icon icon={mdiAccount} size="56" />
                   <Text fontWeight="bold" size="large">Individual</Text>
                 </div>
diff --git a/apps/datasets.immich.app/src/lib/components/DragAndDropUpload.svelte b/apps/datasets.immich.app/src/lib/components/DragAndDropUpload.svelte
index d5835fe7..a10719da 100644
--- a/apps/datasets.immich.app/src/lib/components/DragAndDropUpload.svelte
+++ b/apps/datasets.immich.app/src/lib/components/DragAndDropUpload.svelte
@@ -157,7 +157,7 @@
 {#if dragStartTarget}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="text-immich-dark-gray dark:text-immich-gray fixed inset-0 z-10 flex h-full w-full flex-col items-center justify-center bg-gray-100/90 dark:bg-neutral-900/90"
+    class="text-immich-dark-gray dark:text-immich-gray fixed inset-0 z-10 flex size-full flex-col items-center justify-center bg-gray-100/90 dark:bg-neutral-900/90"
     transition:fade={{ duration: 250 }}
     ondragover={onDragOver}
   >
diff --git a/apps/datasets.immich.app/src/routes/projects/exif/+page.svelte b/apps/datasets.immich.app/src/routes/projects/exif/+page.svelte
index fece810d..63a4d159 100644
--- a/apps/datasets.immich.app/src/routes/projects/exif/+page.svelte
+++ b/apps/datasets.immich.app/src/routes/projects/exif/+page.svelte
@@ -115,7 +115,7 @@
   <button onclick={() => exifUploaderManager.openFilePicker()} class="w-full">
     <Card color="secondary">
       <CardBody>
-        <div class="flex h-full min-h-[25vh] w-full flex-col justify-center gap-2 text-center align-middle">
+        <div class="flex size-full min-h-[25vh] flex-col justify-center gap-2 text-center align-middle">
           <Heading size="large">Ready to add some photos?</Heading>
           <Text size="small">Drag photos anywhere to upload</Text>
           <div class="flex justify-center">
@@ -173,10 +173,10 @@
               >
                 {#if selected}
                   <div
-                    class="bg-primary light absolute start-2 top-2 rounded-full p-1 shadow"
+                    class="light absolute inset-s-2 top-2 rounded-full bg-primary p-1 shadow-sm"
                     transition:scale={{ duration: 100 }}
                   >
-                    <Icon icon={mdiCheck} class="text-light h-4 w-4" />
+                    <Icon icon={mdiCheck} class="size-4 text-light" />
                   </div>
                 {/if}
 
@@ -196,7 +196,7 @@
                   class="flex h-48 w-full flex-col items-center justify-center bg-neutral-900/10 p-4"
                   id={`error-${asset.metadata.assetId}`}
                 >
-                  <Icon icon={mdiCameraOff} class="mb-2 h-8 w-8" />
+                  <Icon icon={mdiCameraOff} class="mb-2 size-8" />
                   <Text class="text-center">This file cannot be viewed on the web.</Text>
                 </div>
 
@@ -206,18 +206,18 @@
                   <Text size="medium" color={asset.metadata.captureType ? 'primary' : 'danger'}>
                     <Icon
                       icon={AssetTypeIcons[asset.metadata.captureType as AssetType] || mdiHelp}
-                      class="mb-0.5 inline-block h-4 w-4 align-middle"
+                      class="mb-0.5 inline-block size-4 align-middle"
                     />
                     {AssetTypeNames[asset.metadata.captureType as AssetType] || 'Missing type'}
                   </Text>
 
                   <Text size="medium" color={asset.metadata.cameraMake ? 'primary' : 'danger'}>
-                    <Icon icon={mdiDomain} class="mb-0.5 inline-block h-4 w-4 align-middle" />
+                    <Icon icon={mdiDomain} class="mb-0.5 inline-block size-4 align-middle" />
                     {asset.metadata.cameraMake || 'Missing brand'}
                   </Text>
 
                   <Text size="medium" color={asset.metadata.cameraModel ? 'primary' : 'danger'}>
-                    <Icon icon={mdiCamera} class="mb-0.5 inline-block h-4 w-4 align-middle" />
+                    <Icon icon={mdiCamera} class="mb-0.5 inline-block size-4 align-middle" />
                     {asset.metadata.cameraModel || 'Missing model'}
                   </Text>
                 </div>
diff --git a/apps/futo-backups-survey.immich.app/src/lib/components/EmailSignupQuestion.svelte b/apps/futo-backups-survey.immich.app/src/lib/components/EmailSignupQuestion.svelte
index 38eb27a8..4b702e3a 100644
--- a/apps/futo-backups-survey.immich.app/src/lib/components/EmailSignupQuestion.svelte
+++ b/apps/futo-backups-survey.immich.app/src/lib/components/EmailSignupQuestion.svelte
@@ -75,7 +75,7 @@
       onclick={() => toggleOption(option.value)}
     >
       <span
-        class="flex h-6 w-6 shrink-0 items-center justify-center rounded {selected.has(option.value)
+        class="flex size-6 shrink-0 items-center justify-center rounded-sm {selected.has(option.value)
           ? 'bg-immich-primary text-white'
           : 'border-2 border-gray-300 dark:border-gray-500'}"
       >
diff --git a/apps/futo-backups-survey.immich.app/src/lib/components/QuestionCard.svelte b/apps/futo-backups-survey.immich.app/src/lib/components/QuestionCard.svelte
index 773defe4..e36fff12 100644
--- a/apps/futo-backups-survey.immich.app/src/lib/components/QuestionCard.svelte
+++ b/apps/futo-backups-survey.immich.app/src/lib/components/QuestionCard.svelte
@@ -57,7 +57,7 @@
   {/if}
 </div>
 
-<div class="bg-light fixed bottom-0 left-0 z-40 flex w-full justify-center px-4 pt-4 pb-6">
+<div class="fixed bottom-0 left-0 z-40 flex w-full justify-center bg-light px-4 pt-4 pb-6">
   <div class="flex w-full max-w-[640px] items-center gap-3">
     {#if canGoBack}
       <Button variant="outline" onclick={onBack}>Back</Button>
diff --git a/apps/futo-backups-survey.immich.app/src/lib/components/RadioQuestion.svelte b/apps/futo-backups-survey.immich.app/src/lib/components/RadioQuestion.svelte
index 6ea993ef..6ee113ce 100644
--- a/apps/futo-backups-survey.immich.app/src/lib/components/RadioQuestion.svelte
+++ b/apps/futo-backups-survey.immich.app/src/lib/components/RadioQuestion.svelte
@@ -38,7 +38,7 @@
       onclick={() => select(option.value)}
     >
       <span
-        class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full {answer?.value === option.value
+        class="flex size-6 shrink-0 items-center justify-center rounded-full {answer?.value === option.value
           ? 'bg-immich-primary text-white'
           : 'border-2 border-gray-300 dark:border-gray-500'}"
       >
@@ -58,7 +58,7 @@
         : 'border-gray-200 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-400'}"
     >
       <span
-        class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full {answer?.value === 'Other'
+        class="flex size-6 shrink-0 items-center justify-center rounded-full {answer?.value === 'Other'
           ? 'bg-immich-primary text-white'
           : 'border-2 border-gray-300 dark:border-gray-500'}"
       >
diff --git a/apps/futo-backups-survey.immich.app/src/routes/+page.svelte b/apps/futo-backups-survey.immich.app/src/routes/+page.svelte
index c88133c8..7cf02591 100644
--- a/apps/futo-backups-survey.immich.app/src/routes/+page.svelte
+++ b/apps/futo-backups-survey.immich.app/src/routes/+page.svelte
@@ -79,7 +79,7 @@
 </script>
 
 {#if error && !showWelcome && !alreadyCompleted && !surveyFinished}
-  <div class="fixed top-2 left-1/2 z-[100] w-full max-w-lg -translate-x-1/2 px-4">
+  <div class="fixed top-2 left-1/2 z-100 w-full max-w-lg -translate-x-1/2 px-4">
     <div class="flex items-center justify-between gap-3 rounded-lg bg-red-600 px-4 py-3 text-sm text-white shadow-lg">
       <p>{error}</p>
       <button onclick={() => (error = null)} class="shrink-0 font-semibold hover:underline">Dismiss</button>
diff --git a/apps/get.immich.app/src/routes/+page.svelte b/apps/get.immich.app/src/routes/+page.svelte
index acb4f43f..4984c89a 100644
--- a/apps/get.immich.app/src/routes/+page.svelte
+++ b/apps/get.immich.app/src/routes/+page.svelte
@@ -52,7 +52,7 @@
                 <img class="mx-auto h-24" alt="Get it on Google Play" src={playStoreBadge} />
               </a>
               <a href={Constants.Get.FDroid}>
-                <img class="border-dark mx-auto h-16 rounded-xl border" alt="Get it on F-Droid" src={fdroidBadge} />
+                <img class="mx-auto h-16 rounded-xl border border-dark" alt="Get it on F-Droid" src={fdroidBadge} />
               </a>
               <Button
                 class="mx-auto mt-4 h-16 dark:bg-black dark:text-white"
@@ -92,7 +92,7 @@
             <CardTitle>Docker Compose</CardTitle>
             <CardDescription>Run Immich on <Link href="https://www.docker.com/">Docker</Link></CardDescription>
           </CardHeader>
-          <CardBody class="flex items-center justify-center align-middle ">
+          <CardBody class="flex items-center justify-center align-middle">
             <Icon icon={mdiDocker} size="6rem" color="#0db7ed" />
           </CardBody>
           <CardFooter class="flex flex-col gap-2">
@@ -105,7 +105,7 @@
             <CardTitle>Portainer</CardTitle>
             <CardDescription>Run Immich on <Link href="https://www.portainer.io/">Portainer</Link></CardDescription>
           </CardHeader>
-          <CardBody class="flex items-center justify-center align-middle ">
+          <CardBody class="flex items-center justify-center align-middle">
             <img src={portainerIcon} class="w-20" alt="Portainer logo" />
           </CardBody>
           <CardFooter>
@@ -118,7 +118,7 @@
             <CardTitle>Unraid</CardTitle>
             <CardDescription>Run Immich on <Link href="https://unraid.net/">Unraid</Link></CardDescription>
           </CardHeader>
-          <CardBody class="flex items-center justify-center align-middle ">
+          <CardBody class="flex items-center justify-center align-middle">
             <img src={unraidIcon} class="w-24" alt="UnRaid logo" />
           </CardBody>
           <CardFooter>
@@ -133,7 +133,7 @@
               >Run Immich on <Link href="https://www.truenas.com/truenas-scale/">TrueNAS SCALE</Link></CardDescription
             >
           </CardHeader>
-          <CardBody class="flex items-center justify-center align-middle ">
+          <CardBody class="flex items-center justify-center align-middle">
             <img src={truenasIcon} class="w-24" alt="TrueNAS SCALE logo" />
           </CardBody>
           <CardFooter>
diff --git a/apps/root.immich.app/src/lib/components/BlogPage.svelte b/apps/root.immich.app/src/lib/components/BlogPage.svelte
index 703b1c11..f74149f5 100644
--- a/apps/root.immich.app/src/lib/components/BlogPage.svelte
+++ b/apps/root.immich.app/src/lib/components/BlogPage.svelte
@@ -19,7 +19,7 @@
 <SiteMetadata site={blogMetadata} page={{ title, description }} />
 
 <div>
-  <ul class="text-muted flex place-items-center gap-1">
+  <ul class="flex place-items-center gap-1 text-muted">
     <li class="flex place-items-center">
       <Link href="/blog" underline={false}><span class="hover:underline">Blog</span></Link>
       <Icon icon={mdiChevronRight} size="1rem" />
@@ -47,7 +47,7 @@
         class="aspect-21/9 w-full rounded-lg border object-cover"
       />
       {#if post.coverAttribution}
-        <figcaption class="text-muted mt-2 text-center text-sm">
+        <figcaption class="mt-2 text-center text-sm text-muted">
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           {@html post.coverAttribution}
         </figcaption>
diff --git a/apps/root.immich.app/src/lib/components/Timeline.svelte b/apps/root.immich.app/src/lib/components/Timeline.svelte
index e24b7b67..597e2977 100644
--- a/apps/root.immich.app/src/lib/components/Timeline.svelte
+++ b/apps/root.immich.app/src/lib/components/Timeline.svelte
@@ -28,13 +28,13 @@
       </div>
 
       <div
-        class="-z-1 flex h-full w-[12px] -translate-x-[25px] flex-col items-center overflow-hidden"
+        class="-z-1 flex h-full w-[12px] translate-x-[-25px] flex-col items-center overflow-hidden"
         class:justify-end={isFirst}
       >
         <div
           class:rounded-t-full={isFirst}
           class:rounded-b-full={isLast}
-          class="bg-subtle w-full {isFirst || isLast ? 'h-1/2' : 'h-full'}"
+          class="w-full bg-subtle {isFirst || isLast ? 'h-1/2' : 'h-full'}"
         ></div>
       </div>
 
diff --git a/apps/root.immich.app/src/routes/+page.svelte b/apps/root.immich.app/src/routes/+page.svelte
index 7aa298ae..20e872e7 100644
--- a/apps/root.immich.app/src/routes/+page.svelte
+++ b/apps/root.immich.app/src/routes/+page.svelte
@@ -66,9 +66,9 @@
     <div class="relative -z-10">
       <img src={themeManager.value === 'dark' ? screenshotDark : screenshotLight} alt="Immich application" />
 
-      <div class="absolute -top-[55%] left-0 -z-10 h-[200%] w-full overflow-visible">
-        <Logo size="giant" class="z-10 mb-2 h-full w-full antialiased opacity-20 blur-3xl" />
-        <div class="bg-immich-bg/90 absolute top-0 left-0 h-full w-full backdrop-blur-xl dark:bg-transparent"></div>
+      <div class="absolute top-[-55%] left-0 -z-10 h-[200%] w-full overflow-visible">
+        <Logo size="giant" class="z-10 mb-2 size-full antialiased opacity-20 blur-3xl" />
+        <div class="bg-immich-bg/90 absolute top-0 left-0 size-full backdrop-blur-xl dark:bg-transparent"></div>
       </div>
     </div>
 
diff --git a/apps/root.immich.app/src/routes/download/+page.svelte b/apps/root.immich.app/src/routes/download/+page.svelte
index d7cebf20..33a21cec 100644
--- a/apps/root.immich.app/src/routes/download/+page.svelte
+++ b/apps/root.immich.app/src/routes/download/+page.svelte
@@ -50,7 +50,7 @@
           <img class="mx-auto h-16" alt="Get it on Google Play" src={playStoreBadge} />
         </a>
         <a href={Constants.Get.FDroid}>
-          <img class="border-dark mx-auto h-16 rounded-xl border" alt="Get it on F-Droid" src={fdroidBadge} />
+          <img class="mx-auto h-16 rounded-xl border border-dark" alt="Get it on F-Droid" src={fdroidBadge} />
         </a>
         <Button
           class="light mx-auto h-16 border"
@@ -89,7 +89,7 @@
       <CardTitle>Docker Compose</CardTitle>
       <CardDescription>Run Immich on <Link href="https://www.docker.com/">Docker</Link></CardDescription>
     </CardHeader>
-    <CardBody class="flex items-center justify-center align-middle ">
+    <CardBody class="flex items-center justify-center align-middle">
       <Icon icon={mdiDocker} size="6rem" color="#0db7ed" />
     </CardBody>
     <CardFooter class="flex flex-col gap-2">
@@ -102,7 +102,7 @@
       <CardTitle>Portainer</CardTitle>
       <CardDescription>Run Immich on <Link href="https://www.portainer.io/">Portainer</Link></CardDescription>
     </CardHeader>
-    <CardBody class="flex items-center justify-center align-middle ">
+    <CardBody class="flex items-center justify-center align-middle">
       <img src={portainerIcon} class="w-20" alt="Portainer logo" />
     </CardBody>
     <CardFooter>
@@ -114,7 +114,7 @@
       <CardTitle>Unraid</CardTitle>
       <CardDescription>Run Immich on <Link href="https://unraid.net/">Unraid</Link></CardDescription>
     </CardHeader>
-    <CardBody class="flex items-center justify-center align-middle ">
+    <CardBody class="flex items-center justify-center align-middle">
       <img src={unraidIcon} class="w-24" alt="UnRaid logo" />
     </CardBody>
     <CardFooter>
@@ -129,7 +129,7 @@
         >Run Immich on <Link href="https://www.truenas.com/truenas-scale/">TrueNAS SCALE</Link></CardDescription
       >
     </CardHeader>
-    <CardBody class="flex items-center justify-center align-middle ">
+    <CardBody class="flex items-center justify-center align-middle">
       <img src={truenasIcon} class="w-24" alt="TrueNAS SCALE logo" />
     </CardBody>
     <CardFooter>
diff --git a/apps/root.immich.app/src/routes/features/+page.svelte b/apps/root.immich.app/src/routes/features/+page.svelte
index a2145310..dbf1cca2 100644
--- a/apps/root.immich.app/src/routes/features/+page.svelte
+++ b/apps/root.immich.app/src/routes/features/+page.svelte
@@ -272,7 +272,7 @@
             <CardTitle>{feature.title}</CardTitle>
             <CardDescription>{feature.description}</CardDescription>
           </CardHeader>
-          <CardBody class="text-primary flex items-center justify-center align-middle">
+          <CardBody class="flex items-center justify-center align-middle text-primary">
             <Icon icon={feature.icon} size="3rem" class="m-5" />
           </CardBody>
         </Card>
diff --git a/apps/ui.immich.app/src/lib/components/ComponentCard.svelte b/apps/ui.immich.app/src/lib/components/ComponentCard.svelte
index a9e80321..995eeb21 100644
--- a/apps/ui.immich.app/src/lib/components/ComponentCard.svelte
+++ b/apps/ui.immich.app/src/lib/components/ComponentCard.svelte
@@ -13,7 +13,7 @@
   href={asComponentHref(component.name)}
   variant="outline"
   color="secondary"
-  class="border-light-300 h-24 w-44 rounded-2xl border "
+  class="h-24 w-44 rounded-2xl border border-light-300"
   size="large"
 >
   <VStack gap={2}>
diff --git a/apps/ui.immich.app/src/routes/(docs)/components/colors/AllColorsExample.svelte b/apps/ui.immich.app/src/routes/(docs)/components/colors/AllColorsExample.svelte
index 99842437..4d767acb 100644
--- a/apps/ui.immich.app/src/routes/(docs)/components/colors/AllColorsExample.svelte
+++ b/apps/ui.immich.app/src/routes/(docs)/components/colors/AllColorsExample.svelte
@@ -142,7 +142,7 @@
             <div class="h-12 w-20 rounded-lg {color.class} shrink-0 border border-gray-300 dark:border-gray-600"></div>
             <div class="grid grid-cols-1 grid-rows-2">
               <Text class="font-semibold">{color.name}</Text>
-              <Text class="text-muted text-xs">{color.class}</Text>
+              <Text class="text-xs text-muted">{color.class}</Text>
             </div>
           </HStack>
         {/each}
diff --git a/apps/ui.immich.app/src/routes/(docs)/components/supporter-badge/CustomExample.svelte b/apps/ui.immich.app/src/routes/(docs)/components/supporter-badge/CustomExample.svelte
index 21c365c9..1071a26f 100644
--- a/apps/ui.immich.app/src/routes/(docs)/components/supporter-badge/CustomExample.svelte
+++ b/apps/ui.immich.app/src/routes/(docs)/components/supporter-badge/CustomExample.svelte
@@ -17,6 +17,6 @@
 
   <Stack>
     <Heading size="tiny">Center</Heading>
-    <SupporterBadge effect="hover" center class="bg-light-200 border-0" />
+    <SupporterBadge effect="hover" center class="border-0 bg-light-200" />
   </Stack>
 </Stack>
diff --git a/eslint.config.ts b/eslint.config.ts
index 326c8b49..4da78a99 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -5,6 +5,9 @@ import { defineConfig } from 'eslint/config';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 import eslintPluginUnicorn from 'eslint-plugin-unicorn';
+import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss';
+import { readdirSync } from 'node:fs';
+import { RulesConfig } from 'eslint';
 
 export default defineConfig([
   js.configs.recommended,
@@ -33,6 +36,20 @@ export default defineConfig([
       'svelte/no-navigation-without-resolve': 'off',
     },
   },
+  ...readdirSync('apps').map((name) => ({
+    files: ['apps/**/*.svelte'],
+    extends: [eslintPluginBetterTailwindcss.configs.recommended],
+    settings: {
+      'better-tailwindcss': {
+        entryPoint: 'src/lib/app.css',
+        cwd: `apps/${name}`,
+      },
+    },
+    rules: {
+      'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
+      'better-tailwindcss/no-unknown-classes': 'off',
+    } as Partial<RulesConfig>,
+  })),
   {
     rules: {
       curly: 2,
diff --git a/package.json b/package.json
index e1224a47..6403dbcb 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "build:packages": "pnpm --filter \"./packages/**\" sync && pnpm --filter \"./packages/**\" build",
     "build:apps": "pnpm --filter \"./apps/**\" sync && pnpm --filter \"./apps/**\" build",
     "lint": "eslint --max-warnings 0",
-    "lint:fix": "pnpm lint -- --fix",
+    "lint:fix": "pnpm lint --fix",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "sync": "pnpm -r sync",
@@ -28,13 +28,13 @@
     "@types/node": "^25.6.0",
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-better-tailwindcss": "^4.5.0",
     "eslint-plugin-svelte": "^3.12.5",
     "eslint-plugin-unicorn": "^64.0.0",
     "globals": "^17.3.0",
     "jiti": "^2.6.1",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.8.0",
     "svelte": "^5.42.3",
     "typescript": "^6.0.0",
     "typescript-eslint": "^8.56.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b5ca1a02..39424658 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       eslint-config-prettier:
         specifier: ^10.1.8
         version: 10.1.8(eslint@10.3.0(jiti@2.6.1))
+      eslint-plugin-better-tailwindcss:
+        specifier: ^4.5.0
+        version: 4.5.0(eslint@10.3.0(jiti@2.6.1))(tailwindcss@4.2.4)(typescript@6.0.3)
       eslint-plugin-svelte:
         specifier: ^3.12.5
         version: 3.17.1(eslint@10.3.0(jiti@2.6.1))(svelte@5.55.5(@typescript-eslint/types@8.59.2))
@@ -41,9 +44,6 @@ importers:
       prettier-plugin-svelte:
         specifier: ^3.4.0
         version: 3.5.1(prettier@3.8.3)(svelte@5.55.5(@typescript-eslint/types@8.59.2))
-      prettier-plugin-tailwindcss:
-        specifier: ^0.8.0
-        version: 0.8.0(prettier-plugin-svelte@3.5.1(prettier@3.8.3)(svelte@5.55.5(@typescript-eslint/types@8.59.2)))(prettier@3.8.3)
       svelte:
         specifier: ^5.42.3
         version: 5.55.5(@typescript-eslint/types@8.59.2)
@@ -1135,6 +1135,10 @@ packages:
     resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@eslint/css-tree@4.0.3':
+    resolution: {integrity: sha512-lMgQJ5zg4YwsGPWtKS7Rc5Z4xqc2B9iOTtmDvhjMRa8GJ8/9zoKRtz26D7gCtWquy0J7oyeOJBwRP5M8slM/4w==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@eslint/js@10.0.1':
     resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -1419,6 +1423,10 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -1909,6 +1917,11 @@ packages:
     resolution: {integrity: sha512-LdDNl6C5iJExcM0Yh0PwAIBb9PrSiCsWamF/JyEZawm3kFDnRoaq3LGE4bpyRao/fWeGKKyw7icx0YxrLFC5Cg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@valibot/to-json-schema@1.7.0':
+    resolution: {integrity: sha512-Y3pPVibbIOHzohrlxSINvO7w/bvXkoYS3BQHoImV9ynE+bXKf171bdMucPurV2zp7gdmt0L1HCcNAsbo7cFRQw==}
+    peerDependencies:
+      valibot: ^1.4.0
+
   '@vitest/browser@4.1.5':
     resolution: {integrity: sha512-iCDGI8c4yg+xmjUg2VsygdAUSIIB4x5Rht/P68OXy1hPELKXHDkzh87lkuTcdYmemRChDkEpB426MmDjzC0ziA==}
     peerDependencies:
@@ -2169,6 +2182,10 @@ packages:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
 
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
   change-case@5.4.4:
     resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
 
@@ -2398,6 +2415,19 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
+  eslint-plugin-better-tailwindcss@4.5.0:
+    resolution: {integrity: sha512-EBNTx6OJYaWv7uUxHWTy1fhiNz2rZVkoeOHZzAJFwWaEPideBf04CMshrJ7YntG0KQzadlbRhHKYr32q5aBX4w==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+      oxlint: ^1.35.0
+      tailwindcss: ^3.3.0 || ^4.1.17
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+      oxlint:
+        optional: true
+
   eslint-plugin-es-x@7.8.0:
     resolution: {integrity: sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2749,6 +2779,11 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   jsonfile@6.2.1:
     resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
 
@@ -2912,6 +2947,9 @@ packages:
     engines: {node: '>= 20'}
     hasBin: true
 
+  mdn-data@2.28.0:
+    resolution: {integrity: sha512-uy9AS1yt+wW5eUEefgE3lOpqPghanUttycV0GXKbiXyBjwvbeE8XPj4u1C+voRfz7dEjwU4NDHTMfZ/s/JtZrQ==}
+
   mediabunny@1.43.0:
     resolution: {integrity: sha512-QGj6PcXXQvhs+29Pl25z3THv17g31k18zHUrJ25UQc5KWVN0vMKbMbB8KuHXNcseALIhbs6nh+wskimaeH/EEw==}
 
@@ -3122,61 +3160,6 @@ packages:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
 
-  prettier-plugin-tailwindcss@0.8.0:
-    resolution: {integrity: sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==}
-    engines: {node: '>=20.19'}
-    peerDependencies:
-      '@ianvs/prettier-plugin-sort-imports': '*'
-      '@prettier/plugin-hermes': '*'
-      '@prettier/plugin-oxc': '*'
-      '@prettier/plugin-pug': '*'
-      '@shopify/prettier-plugin-liquid': '*'
-      '@trivago/prettier-plugin-sort-imports': '*'
-      '@zackad/prettier-plugin-twig': '*'
-      prettier: ^3.0
-      prettier-plugin-astro: '*'
-      prettier-plugin-css-order: '*'
-      prettier-plugin-jsdoc: '*'
-      prettier-plugin-marko: '*'
-      prettier-plugin-multiline-arrays: '*'
-      prettier-plugin-organize-attributes: '*'
-      prettier-plugin-organize-imports: '*'
-      prettier-plugin-sort-imports: '*'
-      prettier-plugin-svelte: '*'
-    peerDependenciesMeta:
-      '@ianvs/prettier-plugin-sort-imports':
-        optional: true
-      '@prettier/plugin-hermes':
-        optional: true
-      '@prettier/plugin-oxc':
-        optional: true
-      '@prettier/plugin-pug':
-        optional: true
-      '@shopify/prettier-plugin-liquid':
-        optional: true
-      '@trivago/prettier-plugin-sort-imports':
-        optional: true
-      '@zackad/prettier-plugin-twig':
-        optional: true
-      prettier-plugin-astro:
-        optional: true
-      prettier-plugin-css-order:
-        optional: true
-      prettier-plugin-jsdoc:
-        optional: true
-      prettier-plugin-marko:
-        optional: true
-      prettier-plugin-multiline-arrays:
-        optional: true
-      prettier-plugin-organize-attributes:
-        optional: true
-      prettier-plugin-organize-imports:
-        optional: true
-      prettier-plugin-sort-imports:
-        optional: true
-      prettier-plugin-svelte:
-        optional: true
-
   prettier@3.8.3:
     resolution: {integrity: sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==}
     engines: {node: '>=14'}
@@ -3397,6 +3380,10 @@ packages:
     resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
     engines: {node: '>=12'}
 
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
   strip-indent@4.1.1:
     resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
     engines: {node: '>=12'}
@@ -3408,6 +3395,10 @@ packages:
     resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
     engines: {node: '>=18'}
 
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
   supports-color@8.1.1:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
@@ -3457,9 +3448,22 @@ packages:
     resolution: {integrity: sha512-2uCs/LZ9us+AktdzYJM8OcxQ8qnPS1kpaO7syGT/MgO+6Qr1Ybl+TqPq+97u7PHqmmMlye5ZkoyXONy5mjjAbw==}
     engines: {node: '>=18'}
 
+  synckit@0.11.12:
+    resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
   tabbable@6.4.0:
     resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
+  tailwind-csstree@0.3.1:
+    resolution: {integrity: sha512-v147gLOR+E+9H4dNaP9rBeS/S/CTQJMRItlX9jLOXjdBGfSRauLwiz7LBCViaQmn6URXIlOdN6iMzSzOaeoUUw==}
+    engines: {node: '>=18.18'}
+    peerDependencies:
+      '@eslint/css': '>=1.0.0'
+    peerDependenciesMeta:
+      '@eslint/css':
+        optional: true
+
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
@@ -3536,6 +3540,14 @@ packages:
     peerDependencies:
       typescript: '>=4.0.0'
 
+  tsconfig-paths-webpack-plugin@4.2.0:
+    resolution: {integrity: sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==}
+    engines: {node: '>=10.13.0'}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -3644,6 +3656,14 @@ packages:
     deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
+  valibot@1.4.0:
+    resolution: {integrity: sha512-iC/x7fVcSyOwlm/VSt7RlHnzNGLGvR9GnxdifUeWoCJo0q4ZZvrVkIHC6faTlkxG47I2Y4UrFquPuVHCrOnrLg==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   validator@13.15.23:
     resolution: {integrity: sha512-4yoz1kEWqUjzi5zsPbAS/903QXSYp0UOtHsPpp7p9rHAw/W+dkInskAE386Fat3oKRROwO98d9ZB0G4cObgUyw==}
     engines: {node: '>= 0.10'}
@@ -4050,6 +4070,11 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/css-tree@4.0.3':
+    dependencies:
+      mdn-data: 2.28.0
+      source-map-js: 1.2.1
+
   '@eslint/js@10.0.1(eslint@10.3.0(jiti@2.6.1))':
     optionalDependencies:
       eslint: 10.3.0(jiti@2.6.1)
@@ -4324,6 +4349,8 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@pkgr/core@0.2.9': {}
+
   '@polka/url@1.0.0-next.29': {}
 
   '@poppinss/colors@4.1.6':
@@ -4832,6 +4859,10 @@ snapshots:
       '@typescript-eslint/types': 8.59.1
       eslint-visitor-keys: 5.0.1
 
+  '@valibot/to-json-schema@1.7.0(valibot@1.4.0(typescript@6.0.3))':
+    dependencies:
+      valibot: 1.4.0(typescript@6.0.3)
+
   '@vitest/browser@4.1.5(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(yaml@2.8.3))(vitest@4.1.5(@types/node@24.12.2)(vite@8.0.10(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(yaml@2.8.3)))':
     dependencies:
       '@blazediff/core': 1.9.1
@@ -5128,6 +5159,11 @@ snapshots:
 
   chai@6.2.2: {}
 
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
   change-case@5.4.4: {}
 
   char-regex@1.0.2: {}
@@ -5350,6 +5386,23 @@ snapshots:
     dependencies:
       eslint: 10.3.0(jiti@2.6.1)
 
+  eslint-plugin-better-tailwindcss@4.5.0(eslint@10.3.0(jiti@2.6.1))(tailwindcss@4.2.4)(typescript@6.0.3):
+    dependencies:
+      '@eslint/css-tree': 4.0.3
+      '@valibot/to-json-schema': 1.7.0(valibot@1.4.0(typescript@6.0.3))
+      enhanced-resolve: 5.21.0
+      jiti: 2.6.1
+      synckit: 0.11.12
+      tailwind-csstree: 0.3.1
+      tailwindcss: 4.2.4
+      tsconfig-paths-webpack-plugin: 4.2.0
+      valibot: 1.4.0(typescript@6.0.3)
+    optionalDependencies:
+      eslint: 10.3.0(jiti@2.6.1)
+    transitivePeerDependencies:
+      - '@eslint/css'
+      - typescript
+
   eslint-plugin-es-x@7.8.0(eslint@10.3.0(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0(jiti@2.6.1))
@@ -5622,8 +5675,7 @@ snapshots:
 
   graph-data-structure@4.5.0: {}
 
-  has-flag@4.0.0:
-    optional: true
+  has-flag@4.0.0: {}
 
   hasown@2.0.3:
     dependencies:
@@ -5705,6 +5757,8 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json5@2.2.3: {}
+
   jsonfile@6.2.1:
     dependencies:
       universalify: 2.0.1
@@ -5824,6 +5878,8 @@ snapshots:
 
   marked@18.0.3: {}
 
+  mdn-data@2.28.0: {}
+
   mediabunny@1.43.0:
     dependencies:
       '@types/dom-mediacapture-transform': 0.1.11
@@ -6013,12 +6069,6 @@ snapshots:
       prettier: 3.8.3
       svelte: 5.55.5(@typescript-eslint/types@8.59.2)
 
-  prettier-plugin-tailwindcss@0.8.0(prettier-plugin-svelte@3.5.1(prettier@3.8.3)(svelte@5.55.5(@typescript-eslint/types@8.59.2)))(prettier@3.8.3):
-    dependencies:
-      prettier: 3.8.3
-    optionalDependencies:
-      prettier-plugin-svelte: 3.5.1(prettier@3.8.3)(svelte@5.55.5(@typescript-eslint/types@8.59.2))
-
   prettier@3.8.3: {}
 
   process-nextick-args@2.0.1: {}
@@ -6302,6 +6352,8 @@ snapshots:
     dependencies:
       ansi-regex: 6.2.2
 
+  strip-bom@3.0.0: {}
+
   strip-indent@4.1.1: {}
 
   style-to-object@1.0.14:
@@ -6310,6 +6362,10 @@ snapshots:
 
   supports-color@10.2.2: {}
 
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
   supports-color@8.1.1:
     dependencies:
       has-flag: 4.0.0
@@ -6397,8 +6453,14 @@ snapshots:
     transitivePeerDependencies:
       - '@typescript-eslint/types'
 
+  synckit@0.11.12:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
   tabbable@6.4.0: {}
 
+  tailwind-csstree@0.3.1: {}
+
   tailwind-merge@3.5.0: {}
 
   tailwind-variants@3.2.2(tailwind-merge@3.5.0)(tailwindcss@4.2.4):
@@ -6509,6 +6571,19 @@ snapshots:
       picomatch: 4.0.4
       typescript: 6.0.3
 
+  tsconfig-paths-webpack-plugin@4.2.0:
+    dependencies:
+      chalk: 4.1.2
+      enhanced-resolve: 5.21.0
+      tapable: 2.3.3
+      tsconfig-paths: 4.2.0
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.1: {}
 
   turnstile-types@1.2.3: {}
@@ -6593,6 +6668,10 @@ snapshots:
 
   uuid@10.0.0: {}
 
+  valibot@1.4.0(typescript@6.0.3):
+    optionalDependencies:
+      typescript: 6.0.3
+
   validator@13.15.23: {}
 
   vite-plugin-dts@5.0.0(@microsoft/api-extractor@7.58.7(@types/node@25.6.0))(esbuild@0.27.3)(typescript@6.0.3)(vite@8.0.10(@types/node@25.6.0)(esbuild@0.27.3)(jiti@2.6.1)(yaml@2.8.3)):
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..7f6fef18
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler",
+    "types": ["node"]
+  },
+  "include": ["./*"]
+}