diff --git a/lib/music_library_web/components/add_record.ex b/lib/music_library_web/components/add_record.ex
index 2e8c2b58..2e0ac244 100644
--- a/lib/music_library_web/components/add_record.ex
+++ b/lib/music_library_web/components/add_record.ex
@@ -31,7 +31,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
     ~H"""
     <div>
       <div class="grid grid-cols-1 md:grid-cols-5">
-        <section class="md:col-span-3 md:p-4 md:border-r md:border-zinc-200 md:dark:border-zinc-800">
+        <section class="md:col-span-3 md:border-r md:border-zinc-200 md:p-4 md:dark:border-zinc-800">
           <.simple_form
             for={@form}
             id={:import_form}
@@ -135,7 +135,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
             class="flex gap-3 px-4 py-3"
           >
             <img
-              class="w-12 h-12 rounded-md object-cover"
+              class="size-12 rounded-md object-cover"
               alt={item.title}
               src={item.thumb_url}
               onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
@@ -153,7 +153,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
                   <select
                     name="format"
                     aria-label={gettext("Format")}
-                    class="rounded-md border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-xs px-1.5 py-0.5"
+                    class="rounded-md border border-zinc-300 bg-white px-1.5 py-0.5 text-xs dark:border-zinc-700 dark:bg-zinc-950"
                   >
                     <option
                       :for={format <- Records.Record.formats()}
@@ -193,11 +193,11 @@ defmodule MusicLibraryWeb.Components.AddRecord do
     ~H"""
     <li
       id={@id}
-      class="flex justify-between gap-x-6 py-5 md:px-4 hover:bg-zinc-100 dark:hover:bg-zinc-700"
+      class="flex justify-between gap-x-6 py-5 hover:bg-zinc-100 md:px-4 dark:hover:bg-zinc-700"
     >
       <div class="flex w-full shrink-0 items-center justify-between">
         <img
-          class="mr-4 w-12 md:w-20 flex-none rounded-lg"
+          class="mr-4 w-12 flex-none rounded-lg md:w-20"
           alt={@release_group.title}
           src={ReleaseGroupSearchResult.thumb_url(@release_group)}
           onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
@@ -218,7 +218,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
 
         <span
           :if={@in_cart?}
-          class="mr-2 inline-flex items-center gap-1 rounded-full bg-emerald-100 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 text-xs font-medium px-2 py-0.5"
+          class="mr-2 inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300"
         >
           <.icon name="hero-check" class="size-3" aria-hidden="true" data-slot="icon" />
           <span :if={length(@cart_formats) > 1}>{length(@cart_formats)}</span>
diff --git a/lib/music_library_web/components/barcode_scanner.ex b/lib/music_library_web/components/barcode_scanner.ex
index 9d9bf727..5b19f7d3 100644
--- a/lib/music_library_web/components/barcode_scanner.ex
+++ b/lib/music_library_web/components/barcode_scanner.ex
@@ -25,7 +25,7 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
     ~H"""
     <div id="barcode-scanner" phx-hook=".BarcodeScanner" phx-target={@myself}>
       <div class="grid grid-cols-1 md:grid-cols-5">
-        <section class="md:col-span-3 md:p-4 md:border-r md:border-zinc-200 md:dark:border-zinc-800">
+        <section class="md:col-span-3 md:border-r md:border-zinc-200 md:p-4 md:dark:border-zinc-800">
           <header>
             <h1 class="text-sm/6 font-medium text-zinc-700 dark:text-zinc-400">
               {gettext("Scan one or more barcodes")}
@@ -357,7 +357,7 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
 
   defp cart_item(%{result: %{status: :not_found}} = assigns) do
     ~H"""
-    <.barcode_icon class="w-12 h-12 flex-none rounded-md p-2 bg-red-50 text-red-400 dark:bg-red-950" />
+    <.barcode_icon class="size-12 flex-none rounded-md bg-red-50 p-2 text-red-400 dark:bg-red-950" />
     <div class="min-w-0 flex-1">
       <p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
         {@result.number}
@@ -384,7 +384,7 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
   defp cart_item(assigns) do
     ~H"""
     <img
-      class="w-12 h-12 rounded-md flex-none object-cover"
+      class="size-12 flex-none rounded-md object-cover"
       alt={@result.release.release_group.title}
       src={ReleaseGroupSearchResult.thumb_url(@result.release.release_group)}
       onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
diff --git a/lib/music_library_web/components/cart_components.ex b/lib/music_library_web/components/cart_components.ex
index 81097e47..d1031225 100644
--- a/lib/music_library_web/components/cart_components.ex
+++ b/lib/music_library_web/components/cart_components.ex
@@ -55,7 +55,7 @@ defmodule MusicLibraryWeb.CartComponents do
       "border-t md:border-t-0 md:border-l md:border-zinc-200 md:dark:border-zinc-800",
       "flex flex-col"
     ]}>
-      <div class="px-4 py-3 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
+      <div class="flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
         <div class="flex items-center gap-2">
           <p class="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
             {gettext("Cart")}
@@ -78,7 +78,7 @@ defmodule MusicLibraryWeb.CartComponents do
             type="button"
             phx-click={@on_toggle}
             phx-target={@target}
-            class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 dark:hover:bg-zinc-800 md:hidden"
+            class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 md:hidden dark:hover:bg-zinc-800"
             aria-label={gettext("Toggle cart")}
           >
             <.icon
@@ -91,7 +91,7 @@ defmodule MusicLibraryWeb.CartComponents do
         </div>
       </div>
 
-      <div class={["md:!block", not @expanded? && "hidden"]}>
+      <div class={["md:block!", not @expanded? && "hidden"]}>
         <div
           :if={@count == 0}
           id="cart-empty"
@@ -109,14 +109,14 @@ defmodule MusicLibraryWeb.CartComponents do
         <ul
           :if={@count > 0}
           id="cart-items"
-          class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
+          class="divide-y divide-zinc-200 overflow-y-auto md:max-h-[calc(100vh-20rem)] dark:divide-zinc-800"
         >
           {render_slot(@inner_block)}
         </ul>
 
         <div
           :if={@count > 0 and @action != []}
-          class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
+          class="border-t border-zinc-200 px-4 py-3 dark:border-zinc-800"
         >
           {render_slot(@action)}
         </div>
diff --git a/lib/music_library_web/components/chart_components.ex b/lib/music_library_web/components/chart_components.ex
index 69858b81..6d9ada16 100644
--- a/lib/music_library_web/components/chart_components.ex
+++ b/lib/music_library_web/components/chart_components.ex
@@ -42,7 +42,7 @@ defmodule MusicLibraryWeb.ChartComponents do
 
           <%= if @datum_click do %>
             <div
-              class="group col-span-3 grid grid-cols-subgrid cursor-pointer items-center"
+              class="group col-span-3 grid cursor-pointer grid-cols-subgrid items-center"
               phx-click={@datum_click.(datum)}
             >
               <.bar_row
diff --git a/lib/music_library_web/components/chat.ex b/lib/music_library_web/components/chat.ex
index daaef3f4..993d2225 100644
--- a/lib/music_library_web/components/chat.ex
+++ b/lib/music_library_web/components/chat.ex
@@ -226,7 +226,7 @@ defmodule MusicLibraryWeb.Components.Chat do
         >
           {raw(Markdown.to_html(message.content, link_target: "_blank"))}
         </div>
-        <div :if={message.role == "assistant"} class="flex justify-end -mb-1 -mr-2">
+        <div :if={message.role == "assistant"} class="-mr-2 -mb-1 flex justify-end">
           <.copy_to_clipboard
             target_id={"#{@id}-msg-#{index}"}
             label={gettext("Copy message")}
diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex
index 5f5ab554..2472b1d0 100644
--- a/lib/music_library_web/components/record_components.ex
+++ b/lib/music_library_web/components/record_components.ex
@@ -129,7 +129,7 @@ defmodule MusicLibraryWeb.RecordComponents do
             <h2 class="mt-1 text-sm/5 font-semibold text-wrap text-zinc-700 sm:text-base dark:text-zinc-300">
               {record.title}
             </h2>
-            <p class="flex items-center gap-1 mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+            <p class="mt-1 flex items-center gap-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
               <.release_status_tooltip record={record} />
               {Records.Record.format_release_date(record.release_date)}
               <span :if={@current_date && !Records.Record.released?(record, @current_date)}>
@@ -302,7 +302,7 @@ defmodule MusicLibraryWeb.RecordComponents do
               {record.title}
             </p>
           </div>
-          <p class="flex items-center gap-1 pointer-events-none text-sm font-medium text-zinc-500">
+          <p class="pointer-events-none flex items-center gap-1 text-sm font-medium text-zinc-500">
             <.release_status_tooltip record={record} />
             {format_label(record.format)} · {type_label(record.type)}
           </p>
diff --git a/lib/music_library_web/components/release.ex b/lib/music_library_web/components/release.ex
index 4934eb60..610d5d5a 100644
--- a/lib/music_library_web/components/release.ex
+++ b/lib/music_library_web/components/release.ex
@@ -301,7 +301,7 @@ defmodule MusicLibraryWeb.Components.Release do
     <ul id={"disc-#{@medium_number}"} class="table w-full table-auto">
       <li
         :for={track <- @tracks}
-        class="list-none leading-5 text-zinc-700 dark:text-zinc-300 md:mt-4"
+        class="list-none leading-5 text-zinc-700 md:mt-4 dark:text-zinc-300"
       >
         <label class="contents cursor-pointer">
           <div class="table-row">
diff --git a/lib/music_library_web/components/scrobble_components.ex b/lib/music_library_web/components/scrobble_components.ex
index 41052621..6e02c455 100644
--- a/lib/music_library_web/components/scrobble_components.ex
+++ b/lib/music_library_web/components/scrobble_components.ex
@@ -158,7 +158,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
       class={[
         "cursor-pointer",
         @status == :mixed &&
-          "bg-linear-50 from-success/10 to-warning/30 dark:from-success/20 dark:to-warning/60 text-foreground-success-soft"
+          "dark:from-success/20 dark:to-warning/60 from-success/10 text-foreground-success-soft to-warning/30 bg-linear-50"
       ]}
     >
       {ngettext("1 record", "%{count} records", @count)}
diff --git a/lib/music_library_web/components/scrobble_rule_picker.ex b/lib/music_library_web/components/scrobble_rule_picker.ex
index b6bc7a45..9cf80ef5 100644
--- a/lib/music_library_web/components/scrobble_rule_picker.ex
+++ b/lib/music_library_web/components/scrobble_rule_picker.ex
@@ -114,7 +114,7 @@ defmodule MusicLibraryWeb.ScrobbleRulePicker do
         <p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
           {Record.artist_names(@record)}
         </p>
-        <p class="flex items-center gap-1 mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+        <p class="mt-1 flex items-center gap-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
           <.release_status_tooltip record={@record} />
           {Record.format_release_date(@record.release_date)} · {format_label(@record.format)} · {type_label(
             @record.type
diff --git a/lib/music_library_web/components/search_components.ex b/lib/music_library_web/components/search_components.ex
index f3a1847d..7cd6b3a6 100644
--- a/lib/music_library_web/components/search_components.ex
+++ b/lib/music_library_web/components/search_components.ex
@@ -296,7 +296,7 @@ defmodule MusicLibraryWeb.SearchComponents do
     ~H"""
     <div class="rounded-b-lg border-t border-zinc-200 bg-zinc-50 p-2 dark:border-zinc-700 dark:bg-zinc-900">
       <div class="flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400">
-        <div class="hidden sm:flex items-center space-x-4">
+        <div class="hidden items-center space-x-4 sm:flex">
           <div :if={@show_nav_hints} class="flex items-center gap-1">
             <kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↑</kbd>
             <kbd class="rounded bg-zinc-200 px-2 py-1 dark:bg-zinc-700">↓</kbd>
diff --git a/lib/music_library_web/components/stats_components.ex b/lib/music_library_web/components/stats_components.ex
index 0eef8f83..51fa64b8 100644
--- a/lib/music_library_web/components/stats_components.ex
+++ b/lib/music_library_web/components/stats_components.ex
@@ -52,7 +52,7 @@ defmodule MusicLibraryWeb.StatsComponents do
       class={[
         "flex items-center rounded-md bg-white px-4 py-5 shadow-sm sm:px-6 sm:pt-6 dark:bg-zinc-800",
         "border border-dashed border-zinc-300 dark:border-zinc-600",
-        "group hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors",
+        "group transition-colors hover:border-zinc-400 dark:hover:border-zinc-500",
         @class
       ]}
     >
@@ -204,7 +204,7 @@ defmodule MusicLibraryWeb.StatsComponents do
                   <li
                     :for={record <- records}
                     phx-click={JS.navigate(@record_show_path.(record))}
-                    class="flex items-center cursor-pointer rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-700"
+                    class="flex cursor-pointer items-center rounded-md px-2 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-700"
                     id={record.id}
                   >
                     <div class="w-6 flex-none">
diff --git a/lib/music_library_web/live/collection_live/index.ex b/lib/music_library_web/live/collection_live/index.ex
index a718dd5e..08caf182 100644
--- a/lib/music_library_web/live/collection_live/index.ex
+++ b/lib/music_library_web/live/collection_live/index.ex
@@ -68,7 +68,7 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
                 data-slot="icon"
               />
               <span class="sr-only sm:not-sr-only">{gettext("Chat")}</span>
-              <span :if={@chat_count > 0} class="sr-only sm:not-sr-only text-xs font-medium">
+              <span :if={@chat_count > 0} class="sr-only text-xs font-medium sm:not-sr-only">
                 {@chat_count}
               </span>
             </.button>
diff --git a/lib/music_library_web/live/record_set_live/index.ex b/lib/music_library_web/live/record_set_live/index.ex
index 4efd7536..4b43d25c 100644
--- a/lib/music_library_web/live/record_set_live/index.ex
+++ b/lib/music_library_web/live/record_set_live/index.ex
@@ -400,7 +400,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
           <h3 class="text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
             {item.record.title}
           </h3>
-          <p class="flex gap-1 items-center pointer-events-none text-sm font-medium text-zinc-500">
+          <p class="pointer-events-none flex items-center gap-1 text-sm font-medium text-zinc-500">
             <.release_status_tooltip record={item.record} />
             {format_label(item.record.format)} · {type_label(item.record.type)}
           </p>
diff --git a/lib/music_library_web/live/record_set_live/record_picker.ex b/lib/music_library_web/live/record_set_live/record_picker.ex
index 5b7b5169..a9c4ebd3 100644
--- a/lib/music_library_web/live/record_set_live/record_picker.ex
+++ b/lib/music_library_web/live/record_set_live/record_picker.ex
@@ -99,7 +99,7 @@ defmodule MusicLibraryWeb.RecordSetLive.RecordPicker do
         <p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
           {Record.artist_names(@record)}
         </p>
-        <p class="flex items-center gap-1 mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+        <p class="mt-1 flex items-center gap-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
           <.release_status_tooltip record={@record} />
           {Record.format_release_date(@record.release_date)} · {format_label(@record.format)} · {type_label(
             @record.type
diff --git a/lib/music_library_web/live/record_set_live/show.ex b/lib/music_library_web/live/record_set_live/show.ex
index 371a899f..e6c8fdd4 100644
--- a/lib/music_library_web/live/record_set_live/show.ex
+++ b/lib/music_library_web/live/record_set_live/show.ex
@@ -134,7 +134,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
               <h3 class="text-sm/5 font-semibold text-wrap text-zinc-700 dark:text-zinc-300">
                 {item.record.title}
               </h3>
-              <p class="flex gap-1 items-center pointer-events-none text-sm font-medium text-zinc-500">
+              <p class="pointer-events-none flex items-center gap-1 text-sm font-medium text-zinc-500">
                 <.release_status_tooltip record={item.record} />
                 {format_label(item.record.format)} · {type_label(item.record.type)}
               </p>
diff --git a/lib/music_library_web/live/stats_live/index.ex b/lib/music_library_web/live/stats_live/index.ex
index 65e3f7c4..51f3412f 100644
--- a/lib/music_library_web/live/stats_live/index.ex
+++ b/lib/music_library_web/live/stats_live/index.ex
@@ -310,7 +310,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
                   <div class="relative flex items-center justify-between space-x-3">
                     <div class="flex min-w-0 items-center justify-between space-x-4">
                       <img
-                        class="size-12 object-cover rounded-md shadow-sm"
+                        class="size-12 rounded-md object-cover shadow-sm"
                         src={track_or_album_cover_url(album, cover_hash)}
                         alt={album.metadata.title}
                         onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
@@ -388,7 +388,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
                   <div class="relative flex items-center justify-between space-x-3">
                     <div class="flex min-w-0 items-center justify-between space-x-4">
                       <img
-                        class="size-12 object-cover rounded-md shadow-sm"
+                        class="size-12 rounded-md object-cover shadow-sm"
                         src={track_or_album_cover_url(track, cover_hash)}
                         alt={track.title}
                         onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
@@ -522,7 +522,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     ~H"""
     <.section>
       <:title>{gettext("Records")}</:title>
-      <div class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5 min-h-35">
+      <div class="mt-5 grid min-h-35 grid-cols-3 gap-5 sm:grid-cols-5">
         <.album_preview
           record={@latest_record}
           title={gettext("Latest purchase")}
diff --git a/lib/music_library_web/live/stats_live/top_albums.ex b/lib/music_library_web/live/stats_live/top_albums.ex
index 1cf82a2a..9e5c3229 100644
--- a/lib/music_library_web/live/stats_live/top_albums.ex
+++ b/lib/music_library_web/live/stats_live/top_albums.ex
@@ -82,7 +82,7 @@ defmodule MusicLibraryWeb.StatsLive.TopAlbums do
               class={[
                 "cursor-pointer",
                 status == :mixed &&
-                  "bg-linear-50 from-success/10 to-warning/30 dark:from-success/20 dark:to-warning/60 text-foreground-success-soft"
+                  "dark:from-success/20 dark:to-warning/60 from-success/10 text-foreground-success-soft to-warning/30 bg-linear-50"
               ]}
             >
               {@album.play_count}