diff --git a/packages/react/src/components/about/Heading.tsx b/packages/react/src/components/about/Heading.tsx
index 60248bf16..fb53caea0 100644
--- a/packages/react/src/components/about/Heading.tsx
+++ b/packages/react/src/components/about/Heading.tsx
@@ -11,7 +11,7 @@ export function AboutHeading(
     <h3
       {...props}
       className={cn(
-        "text-2xl font-bold tracking-wide mt-3 mb-2",
+        "mb-2 mt-3 text-2xl font-bold tracking-wide",
         props.className,
       )}
     />
diff --git a/packages/react/src/components/chat/ChatModal.tsx b/packages/react/src/components/chat/ChatModal.tsx
index c7bfaa247..d1fbc1fa5 100644
--- a/packages/react/src/components/chat/ChatModal.tsx
+++ b/packages/react/src/components/chat/ChatModal.tsx
@@ -16,7 +16,7 @@ export function ChatModal({ tlOpen, chatOpen, ...data }: ChatModalProps) {
   return (
     <div
       className={cn(
-        "flex @screen-lg:hidden w-full bg-base rounded-t-lg will-change-transform",
+        "flex w-full rounded-t-lg bg-base will-change-transform @screen-lg:hidden",
         // use top-[...] and h-[...] for fixed chat modal
         // since container query disables fixed element on screen (cannot use bottom-0)
         // Top position: top padding (1rem) + video height ((100cqw - x padding) * 0.5625) + controlbar height (4rem?)
diff --git a/packages/react/src/components/common/DatePicker.tsx b/packages/react/src/components/common/DatePicker.tsx
index 3185920fa..a462e3721 100644
--- a/packages/react/src/components/common/DatePicker.tsx
+++ b/packages/react/src/components/common/DatePicker.tsx
@@ -26,7 +26,7 @@ export function DatePicker(
           variant="outline"
           size="lg"
           className={cn(
-            "w-full justify-start text-left font-normal border-base-6 focus:border-blue-6",
+            "w-full justify-start border-base-6 text-left font-normal focus:border-blue-6",
             !date && "text-base-11",
           )}
         >
diff --git a/packages/react/src/components/common/Loading.tsx b/packages/react/src/components/common/Loading.tsx
index 857ff18ca..05d5a51fe 100644
--- a/packages/react/src/components/common/Loading.tsx
+++ b/packages/react/src/components/common/Loading.tsx
@@ -31,7 +31,7 @@ export function Loading(
     <div
       {...props}
       className={cn(
-        "flex w-full h-full justify-center items-center",
+        "flex h-full w-full items-center justify-center",
         props.className,
       )}
     >
diff --git a/packages/react/src/components/edit/ItunesSearchDropdown.tsx b/packages/react/src/components/edit/ItunesSearchDropdown.tsx
index e87740570..477629fb4 100644
--- a/packages/react/src/components/edit/ItunesSearchDropdown.tsx
+++ b/packages/react/src/components/edit/ItunesSearchDropdown.tsx
@@ -47,7 +47,7 @@ export function ItunesSearchDropdown({
   };
   return (
     <Command
-      className={cn("overflow-visible bg-transparent relative", className)}
+      className={cn("relative overflow-visible bg-transparent", className)}
       shouldFilter={false}
     >
       <CommandInput
diff --git a/packages/react/src/components/edit/SongSearch.tsx b/packages/react/src/components/edit/SongSearch.tsx
index 7dbceec9e..1cf7d5066 100644
--- a/packages/react/src/components/edit/SongSearch.tsx
+++ b/packages/react/src/components/edit/SongSearch.tsx
@@ -58,7 +58,7 @@ export function SongSearch({
           ref={buttonRef}
           role="combobox"
           aria-expanded={open}
-          className="border-base hover:bg-base-4 flex min-h-[3rem] w-full cursor-pointer items-center justify-center gap-2 rounded-md border px-4 py-2"
+          className="flex min-h-[3rem] w-full cursor-pointer items-center justify-center gap-2 rounded-md border border-base px-4 py-2 hover:bg-base-4"
         >
           {value ? (
             <SongItem {...value} />
@@ -69,7 +69,7 @@ export function SongSearch({
             <Button
               size="icon"
               variant="ghost-secondary"
-              className="text-red-11 ml-auto"
+              className="ml-auto text-red-11"
               onClick={() => onSelect()}
             >
               <X />
@@ -140,7 +140,7 @@ function SongItem({
       <img className="h-10 w-10 rounded-sm" src={artworkUrl100} />
       <div className="flex flex-col">
         <span className="font-bold">{trackName}</span>
-        <span className="text-base-11 text-xs">
+        <span className="text-xs text-base-11">
           {artistName} / {collectionName} /{" "}
           {dayjs(releaseDate).format("YYYY-MM")}
         </span>
diff --git a/packages/react/src/components/layout/InlayContainer.tsx b/packages/react/src/components/layout/InlayContainer.tsx
index c4011f4ca..f72f792c0 100644
--- a/packages/react/src/components/layout/InlayContainer.tsx
+++ b/packages/react/src/components/layout/InlayContainer.tsx
@@ -19,7 +19,7 @@ export function InlayContainer({ routes }: InlayContainerProps) {
     <div className="flex justify-center gap-4 p-4 md:p-8">
       <div
         className={cn(
-          "bg-base-2 flex h-fit w-full md:w-72 xl:w-80 shrink-0 flex-col gap-2 rounded-lg p-2",
+          "flex h-fit w-full shrink-0 flex-col gap-2 rounded-lg bg-base-2 p-2 md:w-72 xl:w-80",
           { "hidden md:flex": itemSelected },
         )}
       >
@@ -39,7 +39,7 @@ export function InlayContainer({ routes }: InlayContainerProps) {
         ))}
       </div>
       <div
-        className={cn("hidden md:block w-full max-w-screen-lg", {
+        className={cn("hidden w-full max-w-screen-lg md:block", {
           "flex flex-col gap-4": itemSelected,
         })}
       >
diff --git a/packages/react/src/components/org/OrgPicker.tsx b/packages/react/src/components/org/OrgPicker.tsx
index edc27603d..36f2e436a 100644
--- a/packages/react/src/components/org/OrgPicker.tsx
+++ b/packages/react/src/components/org/OrgPicker.tsx
@@ -44,10 +44,10 @@ export function OrgSelectorCombobox() {
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "inline-flex min-h-8 w-full items-center justify-between rounded-md bg-base-3 pl-4 pr-2 py-1",
-            "text-lg font-medium text-left text-base-12 transition",
+            "inline-flex min-h-8 w-full items-center justify-between rounded-md bg-base-3 py-1 pl-4 pr-2",
+            "text-left text-lg font-medium text-base-12 transition",
             "hover:bg-primary-5 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-7 active:scale-[97%] active:bg-primaryA-7 disabled:pointer-events-none disabled:opacity-50",
-            open && "ring-2 ring-primary-9 hover:bg-base-5 bg-base-4",
+            open && "bg-base-4 ring-2 ring-primary-9 hover:bg-base-5",
           )}
         >
           {orgs.find((org) => org.name === currentOrg.name)?.name ||
diff --git a/packages/react/src/components/player/PlayerDescription.tsx b/packages/react/src/components/player/PlayerDescription.tsx
index bd087a380..e44b67f2e 100644
--- a/packages/react/src/components/player/PlayerDescription.tsx
+++ b/packages/react/src/components/player/PlayerDescription.tsx
@@ -14,7 +14,7 @@ export function PlayerDescription({
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   return (
-    <div className="align-start bg-base-3 flex flex-col gap-2 rounded-lg p-4">
+    <div className="align-start flex flex-col gap-2 rounded-lg bg-base-3 p-4">
       <div
         className={cn("whitespace-pre-wrap break-all text-sm", {
           "line-clamp-3": !isExpanded,
diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
index e4e3d8209..8352bffab 100644
--- a/packages/react/src/components/sidebar/sidebar.tsx
+++ b/packages/react/src/components/sidebar/sidebar.tsx
@@ -20,7 +20,7 @@ export function Sidebar({ className, id, onClose }: SidebarProps) {
   const org = useAtomValue(orgAtom);
   const isLgAndUp = useIsLgAndUp();
   return (
-    <div className={cn("pb-12 border-r-base-5 border-r", className)} id={id}>
+    <div className={cn("border-r border-r-base-5 pb-12", className)} id={id}>
       <div className="min-h-[100dvh] space-y-2 bg-base-2">
         <div className="flex items-center gap-2 px-4 pb-2 pt-4">
           <Logo className="ml-1.5 h-8 w-8" />
diff --git a/packages/react/src/components/tldex/TLChat.tsx b/packages/react/src/components/tldex/TLChat.tsx
index 0cd96a599..b60e800a8 100644
--- a/packages/react/src/components/tldex/TLChat.tsx
+++ b/packages/react/src/components/tldex/TLChat.tsx
@@ -41,7 +41,7 @@ const TLChatItem = forwardRef<
 >((props, ref) => (
   <div
     {...props}
-    className={cn(props.className, "border-base-4 border-b-0 last:border-b-0")}
+    className={cn(props.className, "border-b-0 border-base-4 last:border-b-0")}
     ref={ref}
   />
 ));
diff --git a/packages/react/src/components/video/VideoCard.tsx b/packages/react/src/components/video/VideoCard.tsx
index 2b4e4b1fb..e861bc56b 100644
--- a/packages/react/src/components/video/VideoCard.tsx
+++ b/packages/react/src/components/video/VideoCard.tsx
@@ -187,7 +187,7 @@ export function VideoCard({
           <VideoCardDuration className="" {...video} />
         </div>
       </Link>
-      <div className="@sm:gap-1 relative flex grow gap-2">
+      <div className="relative flex grow gap-2 @sm:gap-1">
         {(size == "lg" || size == "md") && video.channel && (
           <Link
             to={`/channel/${video.channel.id}`}
@@ -245,7 +245,7 @@ export function VideoCard({
           {size != "xs" && (
             <div className={videoCardClasses.scheduleText}>
               {status === "live" && (
-                <div className="text-base-11 flex gap-1">
+                <div className="flex gap-1 text-base-11">
                   <span className="text-red-500">
                     {t("component.videoCard.liveNow")}
                   </span>
@@ -323,7 +323,7 @@ function VideoCardDuration({
   return durationMs ?? status === "upcoming" ? (
     <span
       className={cn(
-        "flex justify-center items-center gap-1 bg-black/80 px-1 text-white/80 rounded-sm text-sm whitespace-nowrap group-hover:text-white",
+        "flex items-center justify-center gap-1 whitespace-nowrap rounded-sm bg-black/80 px-1 text-sm text-white/80 group-hover:text-white",
         { "bg-red-700/80": status === "live" },
         className,
       )}
diff --git a/packages/react/src/routes/about/placeholder.tsx b/packages/react/src/routes/about/placeholder.tsx
index 3da4557ea..75ccbf3ed 100644
--- a/packages/react/src/routes/about/placeholder.tsx
+++ b/packages/react/src/routes/about/placeholder.tsx
@@ -117,7 +117,7 @@ export default function AboutPlaceholder() {
 
   const typeCN = (typeId: string) =>
     cn(
-      "border-blue-6 hover:bg-blue-3 flex w-full cursor-pointer items-center justify-center rounded-md border-2 py-2 text-lg transition-all active:scale-[97%] select-none",
+      "flex w-full cursor-pointer select-none items-center justify-center rounded-md border-2 border-blue-6 py-2 text-lg transition-all hover:bg-blue-3 active:scale-[97%]",
       {
         "bg-blue-7  border-blue-8 hover:bg-blue-6": type === typeId,
       },
diff --git a/packages/react/src/routes/about/request.tsx b/packages/react/src/routes/about/request.tsx
index d21769b15..26ebb1653 100644
--- a/packages/react/src/routes/about/request.tsx
+++ b/packages/react/src/routes/about/request.tsx
@@ -64,7 +64,7 @@ function RequestTypeRadioButton({
   return (
     <div
       className={cn(
-        "w-full p-4 border-2 border-primary rounded-md transition-colors cursor-pointer",
+        "w-full cursor-pointer rounded-md border-2 border-primary p-4 transition-colors",
         {
           "bg-primary-6 border-primary-8": isSelected,
         },
diff --git a/packages/react/src/routes/channel.tsx b/packages/react/src/routes/channel.tsx
index cf57a15b0..8e9eae15c 100644
--- a/packages/react/src/routes/channel.tsx
+++ b/packages/react/src/routes/channel.tsx
@@ -55,7 +55,7 @@ export default function Channel() {
             tab !== "music" && navigate(`/channel/${channel?.id}/${tab}`)
           }
         >
-          <div className="bg-base-3 border-b-base-5 sticky top-0 z-20 flex flex-col gap-2 border-b-[1px] pt-4 shadow-lg md:gap-6">
+          <div className="sticky top-0 z-20 flex flex-col gap-2 border-b-[1px] border-b-base-5 bg-base-3 pt-4 shadow-lg md:gap-6">
             <div className="container flex items-start gap-4 px-4 max-sm:flex-col md:items-center md:px-8">
               <div className="flex items-center gap-4">
                 <ChannelImg
@@ -63,14 +63,14 @@ export default function Channel() {
                   channelId={channel?.id}
                 />
                 <div className="flex flex-col overflow-hidden">
-                  <div className="text-base-11 text-xs">
+                  <div className="text-xs text-base-11">
                     {channel?.org}
                     {channel?.group && ` / ${channel?.group}`}
                   </div>
                   <div className="line-clamp-1 text-lg font-bold">
                     {channel?.name}
                   </div>
-                  <div className="text-base-11 text-sm">
+                  <div className="text-sm text-base-11">
                     {t("component.channelInfo.subscriberCount", {
                       n: formatCount(channel?.subscriber_count ?? "0"),
                     })}
diff --git a/packages/react/src/routes/channel/ChannelAbout.tsx b/packages/react/src/routes/channel/ChannelAbout.tsx
index 9b12101aa..306b2f977 100644
--- a/packages/react/src/routes/channel/ChannelAbout.tsx
+++ b/packages/react/src/routes/channel/ChannelAbout.tsx
@@ -8,10 +8,10 @@ export default function ChannelAbout() {
 
   return (
     <div className="container flex gap-4 py-4 max-sm:flex-col-reverse">
-      <div className="bg-base-3 w-full whitespace-pre-wrap rounded-lg p-4">
+      <div className="w-full whitespace-pre-wrap rounded-lg bg-base-3 p-4">
         {channel.description}
       </div>
-      <div className="bg-base-3 divide-base-5 h-fit w-full shrink-0 flex-col divide-y-2 rounded-lg p-4 md:w-80 [&>p]:py-2">
+      <div className="h-fit w-full shrink-0 flex-col divide-y-2 divide-base-5 rounded-lg bg-base-3 p-4 md:w-80 [&>p]:py-2">
         <h3 className="pb-2 text-xl font-bold">
           {t("component.channelInfo.stats")}
         </h3>
diff --git a/packages/react/src/routes/orgChannels.tsx b/packages/react/src/routes/orgChannels.tsx
index 17bc9a1ed..7ec2467ca 100644
--- a/packages/react/src/routes/orgChannels.tsx
+++ b/packages/react/src/routes/orgChannels.tsx
@@ -54,7 +54,7 @@ export default function ChannelsOrg() {
           >
             <Label
               className={cn(
-                "bg-base-4 border-base border-r-2 px-4 py-2 text-lg first:rounded-l-lg last:rounded-r-lg last:border-r-0 hover:cursor-pointer",
+                "border-r-2 border-base bg-base-4 px-4 py-2 text-lg first:rounded-l-lg last:rounded-r-lg last:border-r-0 hover:cursor-pointer",
                 { "bg-secondary-9": displayStyle == "grid" },
               )}
             >
@@ -63,7 +63,7 @@ export default function ChannelsOrg() {
             </Label>
             <Label
               className={cn(
-                "bg-base-4 border-base border-r-2 px-4 py-2 text-lg first:rounded-l-lg last:rounded-r-lg last:border-r-0 hover:cursor-pointer",
+                "border-r-2 border-base bg-base-4 px-4 py-2 text-lg first:rounded-l-lg last:rounded-r-lg last:border-r-0 hover:cursor-pointer",
                 { "bg-secondary-9": displayStyle == "list" },
               )}
             >
diff --git a/packages/react/src/routes/settings/homepage.tsx b/packages/react/src/routes/settings/homepage.tsx
index bc5db72ba..cb8722709 100644
--- a/packages/react/src/routes/settings/homepage.tsx
+++ b/packages/react/src/routes/settings/homepage.tsx
@@ -82,7 +82,7 @@ export function SettingsHomepage() {
         >
           {defaultPages.map(({ label, value }) => (
             <div
-              className={cn("flex items-center text-primary-12 space-x-2 p-4", {
+              className={cn("flex items-center space-x-2 p-4 text-primary-12", {
                 "bg-primaryA-4": value === defaultOpen,
                 "text-base-11": value !== defaultOpen,
               })}
@@ -108,7 +108,7 @@ export function SettingsHomepage() {
           {gridSizes.map(({ label, value, icon }) => (
             <Label
               className={cn(
-                "bg-base-4 border-base border-r-2 px-4 py-2 text-lg first:rounded-l-lg last:rounded-r-lg last:border-r-0 hover:cursor-pointer",
+                "border-r-2 border-base bg-base-4 px-4 py-2 text-lg first:rounded-l-lg last:rounded-r-lg last:border-r-0 hover:cursor-pointer",
                 { "bg-secondary-9": value === size },
               )}
             >
@@ -145,7 +145,7 @@ export function SettingsHomepage() {
           {hideFeatures.map(({ label, value, onChange }, index) => (
             <Label
               className={cn(
-                "flex min-w-[18rem] w-full justify-between items-center gap-4 px-4 py-4 hover:cursor-pointer",
+                "flex w-full min-w-[18rem] items-center justify-between gap-4 p-4 hover:cursor-pointer",
                 {
                   "bg-base-4": index % 2,
                 },
diff --git a/packages/react/src/routes/settings/lang.tsx b/packages/react/src/routes/settings/lang.tsx
index 5c9e2502e..e4b8d78f0 100644
--- a/packages/react/src/routes/settings/lang.tsx
+++ b/packages/react/src/routes/settings/lang.tsx
@@ -35,10 +35,10 @@ export function SettingsLang() {
                 role="combobox"
                 aria-expanded={langOpen}
                 className={cn(
-                  "inline-flex min-h-8 min-w-48 w-full items-center justify-between rounded-md bg-base-3 pl-4 pr-2 py-1",
-                  "text-lg font-medium text-left text-base-12 transition",
+                  "inline-flex min-h-8 w-full min-w-48 items-center justify-between rounded-md bg-base-3 py-1 pl-4 pr-2",
+                  "text-left text-lg font-medium text-base-12 transition",
                   "hover:bg-primary-5 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-7 active:scale-[97%] active:bg-primaryA-7 disabled:pointer-events-none disabled:opacity-50",
-                  langOpen && "ring-2 ring-primary-9 hover:bg-base-5 bg-base-4",
+                  langOpen && "bg-base-4 ring-2 ring-primary-9 hover:bg-base-5",
                 )}
               >
                 {langs.find(({ val }) => i18n.language === val)?.display}
diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
index 024d66fa3..2bcb8f0c8 100644
--- a/packages/react/src/routes/watch.tsx
+++ b/packages/react/src/routes/watch.tsx
@@ -74,15 +74,15 @@ export default function Watch() {
         >
           <div className={cn("flex w-full flex-col gap-4")}>
             <div
-              className={cn("bg-base-3 flex w-full flex-col", [
+              className={cn("flex w-full flex-col bg-base-3", [
                 theaterMode
                   ? "aspect-video @screen-lg:h-[calc(100dvh_-_var(--header-height))]"
-                  : "rounded-lg overflow-hidden",
+                  : "overflow-hidden rounded-lg",
               ])}
             >
               {!miniPlayer && currentVideo && (
                 <div
-                  className={cn("w-full h-full flex", {
+                  className={cn("flex h-full w-full", {
                     "flex-row-reverse": chatPos === "left",
                   })}
                 >
@@ -136,7 +136,7 @@ export default function Watch() {
                 currentVideo?.status === "live") && (
                 <div
                   className={cn(
-                    "border-base rounded-lg border overflow-hidden",
+                    "overflow-hidden rounded-lg border border-base",
                     {
                       "h-[80vh] max-h-[80vh]": chatOpen || tlOpen,
                     },