feat: upgrade to Tailwind v4 (#29)

* build: update to Tailwind v4

* format: run Prettier

package.json

@@ -32,25 +32,24 @@
     "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/kit": "^2.5.27",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.6",
     "@types/eslint": "^8.56.0",
     "@types/matter-js": "^0.19.6",
     "@types/node": "^20.12.12",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.45.1",
     "eslint-plugin-tailwindcss": "^3.15.1",
     "phosphor-svelte": "^2.0.1",
-    "postcss": "^8.4.38",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.6.4",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.6",
     "tslib": "^2.4.1",
     "typescript": "^5.5.0",
     "vite": "^5.4.4",

src/app.css

@@ -1,3 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+@layer base {
+  /* https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

src/lib/components/Balance.svelte

@@ -15,9 +15,9 @@
 
 <div class="flex overflow-hidden rounded-md">
   <div
-    class="flex gap-2 bg-slate-900 px-3 py-2 text-sm font-semibold tabular-nums text-white sm:text-base"
+    class="flex gap-2 bg-slate-900 px-3 py-2 text-sm font-semibold text-white tabular-nums sm:text-base"
   >
-    <span class="select-none text-gray-500">$</span>
+    <span class="text-gray-500 select-none">$</span>
     <span class="min-w-16 text-right">
       {balanceFormatted}
     </span>

src/lib/components/LiveStatsWindow/LiveStatsWindow.svelte

@@ -18,7 +18,7 @@
 {#if $isLiveStatsOpen}
   <DraggableWindow
     onClose={() => ($isLiveStatsOpen = false)}
-    class="fixed bottom-8 right-8 w-[20rem]"
+    class="fixed right-8 bottom-8 w-[20rem]"
   >
     {#snippet title()}
       <ChartLine weight="bold" class="text-xl text-slate-300" />

src/lib/components/LiveStatsWindow/Profit.svelte

@@ -24,11 +24,11 @@
   <div class="flex-1 space-y-2">
     <div>
       <p class="font-medium text-slate-400">Wins</p>
-      <p class="font-semibold tabular-nums text-green-400">{winsFormatted}</p>
+      <p class="font-semibold text-green-400 tabular-nums">{winsFormatted}</p>
     </div>
     <div>
       <p class="font-medium text-slate-400">Losses</p>
-      <p class="font-semibold tabular-nums text-red-400">{lossesFormatted}</p>
+      <p class="font-semibold text-red-400 tabular-nums">{lossesFormatted}</p>
     </div>
   </div>
 </div>

src/lib/components/Plinko/BinsRow.svelte

@@ -59,7 +59,7 @@
          -->
         <div
           use:initAnimation
-          class="flex min-w-0 flex-1 items-center justify-center rounded-sm text-[clamp(6px,2.784px+0.87vw,8px)] font-bold text-gray-950 shadow-[0_2px_var(--shadow-color)] lg:rounded-md lg:text-[clamp(10px,-16.944px+2.632vw,12px)] lg:shadow-[0_3px_var(--shadow-color)]"
+          class="flex min-w-0 flex-1 items-center justify-center rounded-xs text-[clamp(6px,2.784px+0.87vw,8px)] font-bold text-gray-950 shadow-[0_2px_var(--shadow-color)] lg:rounded-md lg:text-[clamp(10px,-16.944px+2.632vw,12px)] lg:shadow-[0_3px_var(--shadow-color)]"
           style:background-color={binColorsByRowCount[$rowCount].background[binIndex]}
           style:--shadow-color={binColorsByRowCount[$rowCount].shadow[binIndex]}
         >

src/lib/components/Plinko/LastWins.svelte

@@ -19,7 +19,7 @@
       - Font size: From 8px at 340px viewport width to 10px at 620px viewport width
  -->
 <div
-  class="flex w-[clamp(1.5rem,0.893rem+2.857vw,2rem)] flex-col overflow-hidden rounded-sm text-[clamp(8px,5.568px+0.714vw,10px)] md:rounded-md lg:w-12 lg:text-sm"
+  class="flex w-[clamp(1.5rem,0.893rem+2.857vw,2rem)] flex-col overflow-hidden rounded-xs text-[clamp(8px,5.568px+0.714vw,10px)] md:rounded-md lg:w-12 lg:text-sm"
   style:aspect-ratio={`1 / ${winCount}`}
 >
   {#each lastWins as { binIndex, rowCount, payout: { multiplier } }}

src/lib/components/Plinko/Plinko.svelte

@@ -24,7 +24,7 @@
   <div class="mx-auto flex h-full flex-col px-4 pb-4" style:max-width={`${WIDTH}px`}>
     <div class="relative w-full" style:aspect-ratio={`${WIDTH} / ${HEIGHT}`}>
       {#if $plinkoEngine === null}
-        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
           <CircleNotch class="size-20 animate-spin text-slate-600" weight="bold" />
         </div>
       {/if}
@@ -34,7 +34,7 @@
     </div>
     <BinsRow />
   </div>
-  <div class="absolute right-[5%] top-1/2 -translate-y-1/2">
+  <div class="absolute top-1/2 right-[5%] -translate-y-1/2">
     <LastWins />
   </div>
 </div>

src/lib/components/Sidebar/Sidebar.svelte

@@ -127,7 +127,7 @@
         disabled={autoBetInterval !== null}
         onclick={() => (betMode = value)}
         class={twMerge(
-          'flex-1 rounded-full py-2 text-sm font-medium text-white transition disabled:cursor-not-allowed disabled:opacity-50 hover:[&:not(:disabled)]:bg-slate-600 active:[&:not(:disabled)]:bg-slate-500',
+          'flex-1 rounded-full py-2 text-sm font-medium text-white transition hover:not-disabled:bg-slate-600 active:not-disabled:bg-slate-500 disabled:cursor-not-allowed disabled:opacity-50',
           betMode === value && 'bg-slate-600',
         )}
       >
@@ -150,19 +150,19 @@
           step="0.01"
           inputmode="decimal"
           class={twMerge(
-            'w-full rounded-l-md border-2 border-slate-600 bg-slate-900 py-2 pl-7 pr-2 text-sm text-white transition-colors hover:cursor-pointer focus:border-slate-500 focus:outline-none disabled:cursor-not-allowed  disabled:opacity-50 hover:[&:not(:disabled)]:border-slate-500',
+            'w-full rounded-l-md border-2 border-slate-600 bg-slate-900 py-2 pr-2 pl-7 text-sm text-white transition-colors hover:cursor-pointer hover:not-disabled:border-slate-500 focus:border-slate-500 focus:outline-hidden  disabled:cursor-not-allowed disabled:opacity-50',
             (isBetAmountNegative || isBetExceedBalance) &&
-              'border-red-500 focus:border-red-400 hover:[&:not(:disabled)]:border-red-400',
+              'border-red-500 hover:not-disabled:border-red-400 focus:border-red-400',
           )}
         />
-        <div class="absolute left-3 top-2 select-none text-slate-500" aria-hidden="true">$</div>
+        <div class="absolute top-2 left-3 text-slate-500 select-none" aria-hidden="true">$</div>
       </div>
       <button
         disabled={autoBetInterval !== null}
         onclick={() => {
           $betAmount = parseFloat(($betAmount / 2).toFixed(2));
         }}
-        class="touch-manipulation bg-slate-600 px-4 font-bold diagonal-fractions text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50 hover:[&:not(:disabled)]:bg-slate-500 active:[&:not(:disabled)]:bg-slate-400"
+        class="touch-manipulation bg-slate-600 px-4 font-bold text-white diagonal-fractions transition-colors hover:not-disabled:bg-slate-500 active:not-disabled:bg-slate-400 disabled:cursor-not-allowed disabled:opacity-50"
       >
         1/2
       </button>
@@ -171,7 +171,7 @@
         onclick={() => {
           $betAmount = parseFloat(($betAmount * 2).toFixed(2));
         }}
-        class="relative touch-manipulation rounded-r-md bg-slate-600 px-4 text-sm font-bold text-white transition-colors after:absolute after:left-0 after:inline-block after:h-1/2 after:w-[2px] after:bg-slate-800 after:content-[''] disabled:cursor-not-allowed disabled:opacity-50 hover:[&:not(:disabled)]:bg-slate-500 active:[&:not(:disabled)]:bg-slate-400"
+        class="relative touch-manipulation rounded-r-md bg-slate-600 px-4 text-sm font-bold text-white transition-colors after:absolute after:left-0 after:inline-block after:h-1/2 after:w-[2px] after:bg-slate-800 after:content-[''] hover:not-disabled:bg-slate-500 active:not-disabled:bg-slate-400 disabled:cursor-not-allowed disabled:opacity-50"
       >
         2×
       </button>
@@ -232,12 +232,12 @@
           min="0"
           inputmode="numeric"
           class={twMerge(
-            'w-full rounded-md border-2 border-slate-600 bg-slate-900 py-2 pl-3 pr-8 text-sm text-white transition-colors hover:cursor-pointer focus:border-slate-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 hover:[&:not(:disabled)]:border-slate-500',
+            'w-full rounded-md border-2 border-slate-600 bg-slate-900 py-2 pr-8 pl-3 text-sm text-white transition-colors hover:cursor-pointer hover:not-disabled:border-slate-500 focus:border-slate-500 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
             isAutoBetInputNegative && 'border-red-500 hover:border-red-400 focus:border-red-400',
           )}
         />
         {#if autoBetInput === 0}
-          <Infinity class="absolute right-3 top-3 size-4 text-slate-400" weight="bold" />
+          <Infinity class="absolute top-3 right-3 size-4 text-slate-400" weight="bold" />
         {/if}
       </div>
       {#if isAutoBetInputNegative}

src/lib/components/ui/Select.svelte

@@ -13,12 +13,12 @@
 <div class="relative">
   <select
     bind:value
-    class="block w-full appearance-none rounded-md border-2 border-slate-600 bg-slate-900 py-2 pl-3 pr-8 text-sm text-white transition hover:cursor-pointer focus:border-slate-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 hover:[&:not(:disabled)]:border-slate-500"
+    class="block w-full appearance-none rounded-md border-2 border-slate-600 bg-slate-900 py-2 pr-8 pl-3 text-sm text-white transition hover:cursor-pointer hover:not-disabled:border-slate-500 focus:border-slate-500 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
     {...props}
   >
     {#each items as { value, label }}
       <option {value}>{label}</option>
     {/each}
   </select>
-  <CaretDown class="absolute right-3 top-3 text-slate-500" weight="bold" />
+  <CaretDown class="absolute top-3 right-3 text-slate-500" weight="bold" />
 </div>

src/lib/components/ui/Switch.svelte

@@ -13,12 +13,12 @@
 <Switch.Root
   bind:checked
   class={twMerge(
-    'h-6 w-11 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-slate-900',
+    'h-6 w-11 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-1 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-slate-900',
     className,
   )}
   {...props}
 >
   <Switch.Thumb
-    class="pointer-events-none block size-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+    class="pointer-events-none block size-5 rounded-full bg-white ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
   />
 </Switch.Root>

src/routes/+page.svelte

@@ -26,7 +26,7 @@
   </nav>
 
   <div class="flex-1 px-5">
-    <div class="mx-auto mt-5 min-w-[300px] max-w-xl drop-shadow-xl md:mt-10 lg:max-w-7xl">
+    <div class="mx-auto mt-5 max-w-xl min-w-[300px] drop-shadow-xl md:mt-10 lg:max-w-7xl">
       <div class="flex flex-col-reverse overflow-hidden rounded-lg lg:w-full lg:flex-row">
         <Sidebar />
         <div class="flex-1">
@@ -39,7 +39,7 @@
   <SettingsWindow />
   <LiveStatsWindow />
 
-  <footer class="px-5 pb-4 pt-16">
+  <footer class="px-5 pt-16 pb-4">
     <div class="mx-auto max-w-[40rem]">
       <div aria-hidden="true" class="h-[1px] bg-slate-700"></div>
       <div class="flex items-center justify-between p-2">
@@ -68,7 +68,9 @@
   </footer>
 </div>
 
-<style>
+<style lang="postcss">
+  @reference "../app.css";
+
   :global(body) {
     @apply bg-gray-800;
   }

vite.config.ts

@@ -1,8 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [tailwindcss(), sveltekit()],
   test: {
     include: ['src/**/*.{test,spec}.{js,ts}'],
     restoreMocks: true,