diff --git a/apps/site/components/Blog/BlogPostCard/index.module.css b/apps/site/components/Blog/BlogPostCard/index.module.css
index 166f694e85505..53ec2686369f0 100644
--- a/apps/site/components/Blog/BlogPostCard/index.module.css
+++ b/apps/site/components/Blog/BlogPostCard/index.module.css
@@ -6,8 +6,8 @@
 }
 
 .subtitle {
-  @apply mb-2
-    mt-6
+  @apply mt-6
+    mb-2
     inline-block
     text-xs
     font-semibold
diff --git a/apps/site/components/Common/Turtle/index.module.css b/apps/site/components/Common/Turtle/index.module.css
index 6bbeefdbd9bb2..82bacb8ee7d5e 100644
--- a/apps/site/components/Common/Turtle/index.module.css
+++ b/apps/site/components/Common/Turtle/index.module.css
@@ -8,20 +8,20 @@
     translate-x-0
     translate-y-0
     after:absolute
-    after:-left-full
     after:top-[20%]
+    after:-left-full
     after:-z-10
     after:block
     after:h-36
     after:w-36
     after:-rotate-90
-    after:select-none
     after:bg-[url('/static/images/smoke.gif')]
     after:opacity-[0.15]
     after:content-['']
+    after:select-none
     motion-reduce:animate-none
-    after:md:-left-1/2
-    after:md:top-1/2;
+    after:md:top-1/2
+    after:md:-left-1/2;
 }
 
 .image {
diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
index 63b9f57256d61..a3792cd7c0135 100644
--- a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
+++ b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
@@ -128,7 +128,7 @@ const ReleaseCodeBox: FC = () => {
   const isLoading = context.os === 'LOADING' || context.installMethod === '';
 
   return (
-    <div className="mb-6 mt-4 flex flex-col gap-2">
+    <div className="mt-4 mb-6 flex flex-col gap-2">
       {/* NoScript warning */}
       <noscript>
         <AlertBox
diff --git a/apps/site/styles/locales.css b/apps/site/styles/locales.css
index 2ce0fe2afecd9..a78674db1d9b8 100644
--- a/apps/site/styles/locales.css
+++ b/apps/site/styles/locales.css
@@ -4,7 +4,7 @@
  * managed to avoid disrupting the layout.
  */
 html[lang='ko'] {
-  @apply break-words
-    break-keep
-    leading-7;
+  @apply leading-7
+    break-words
+    break-keep;
 }
diff --git a/packages/ui-components/src/Common/Badge/index.module.css b/packages/ui-components/src/Common/Badge/index.module.css
index e66c7ef94f282..eb5d8a97ff116 100644
--- a/packages/ui-components/src/Common/Badge/index.module.css
+++ b/packages/ui-components/src/Common/Badge/index.module.css
@@ -1,9 +1,9 @@
 @reference "../../styles/index.css";
 
 .badge {
-  @apply whitespace-nowrap
-    rounded-full
+  @apply rounded-full
     text-center
+    whitespace-nowrap
     text-white;
 
   &.small {
diff --git a/packages/ui-components/src/Common/BadgeGroup/index.module.css b/packages/ui-components/src/Common/BadgeGroup/index.module.css
index e29c6c9cb9aab..2304c408078a0 100644
--- a/packages/ui-components/src/Common/BadgeGroup/index.module.css
+++ b/packages/ui-components/src/Common/BadgeGroup/index.module.css
@@ -7,8 +7,8 @@
     rounded-full
     border
     py-1
-    pl-1
     pr-2.5
+    pl-1
     text-sm
     font-medium;
 
diff --git a/packages/ui-components/src/Common/BaseButton/index.module.css b/packages/ui-components/src/Common/BaseButton/index.module.css
index 55e850ca06100..c45b71abfca60 100644
--- a/packages/ui-components/src/Common/BaseButton/index.module.css
+++ b/packages/ui-components/src/Common/BaseButton/index.module.css
@@ -1,12 +1,12 @@
 @reference "../../styles/index.css";
 
 .button {
-  @apply px-4.5
-    relative
+  @apply relative
     inline-flex
     items-center
     justify-center
     gap-2
+    px-4.5
     py-2.5
     text-center
     font-semibold
@@ -47,12 +47,12 @@
   }
 
   &.primary {
-    @apply shadow-xs
-      rounded-sm
+    @apply rounded-sm
       border
       border-green-600
       bg-green-600
-      text-white;
+      text-white
+      shadow-xs;
 
     &:hover:not([aria-disabled='true']) {
       @apply border-green-700
@@ -101,16 +101,16 @@
 
   &.special {
     @apply before:bg-gradient-glow-backdrop
-      shadow-xs
       rounded-lg
       border
       border-green-600/30
       bg-green-600/10
       text-white
+      shadow-xs
       before:absolute
-      before:left-0
-      before:right-0
       before:top-0
+      before:right-0
+      before:left-0
       before:-z-10
       before:mx-auto
       before:h-full
@@ -119,8 +119,8 @@
       before:content-['']
       after:absolute
       after:-top-px
-      after:left-0
       after:right-0
+      after:left-0
       after:mx-auto
       after:h-px
       after:w-2/5
@@ -144,12 +144,12 @@
   }
 
   &.warning {
-    @apply shadow-xs
-      border-warning-600
+    @apply border-warning-600
       bg-warning-600
       rounded-sm
       border
-      text-white;
+      text-white
+      shadow-xs;
 
     &:hover:not([aria-disabled='true']) {
       @apply border-warning-700
@@ -169,12 +169,12 @@
   }
 
   &.info {
-    @apply shadow-xs
-      border-info-600
+    @apply border-info-600
       bg-info-600
       rounded-sm
       border
-      text-white;
+      text-white
+      shadow-xs;
 
     &:hover:not([aria-disabled='true']) {
       @apply border-info-700
diff --git a/packages/ui-components/src/Common/BaseCodeBox/index.module.css b/packages/ui-components/src/Common/BaseCodeBox/index.module.css
index 81be3797f71de..6b0c781557865 100644
--- a/packages/ui-components/src/Common/BaseCodeBox/index.module.css
+++ b/packages/ui-components/src/Common/BaseCodeBox/index.module.css
@@ -36,11 +36,11 @@
 
         &:not(:empty:last-child)::after {
           @apply font-ibm-plex-mono
-            w-4.5
             absolute
-            left-0
             top-0
+            left-0
             mr-4
+            w-4.5
             text-right
             text-neutral-600
             [content:counter(line)]
diff --git a/packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css b/packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css
index 0c6f09479add1..6304b2a03580f 100644
--- a/packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css
+++ b/packages/ui-components/src/Common/BasePagination/PaginationListItem/index.module.css
@@ -3,10 +3,7 @@
 .listItem,
 .listItem:link,
 .listItem:active {
-  @apply aria-current:bg-green-600
-    aria-current:text-white
-    aria-current:cursor-default
-    flex
+  @apply flex
     size-10
     cursor-pointer
     items-center
@@ -15,6 +12,9 @@
     px-3
     py-2.5
     text-neutral-800
+    aria-current:cursor-default
+    aria-current:bg-green-600
+    aria-current:text-white
     motion-safe:transition-colors
     dark:text-neutral-200;
 
diff --git a/packages/ui-components/src/Common/ChangeHistory/index.module.css b/packages/ui-components/src/Common/ChangeHistory/index.module.css
index c69d0e91896fa..3f6225b555c48 100644
--- a/packages/ui-components/src/Common/ChangeHistory/index.module.css
+++ b/packages/ui-components/src/Common/ChangeHistory/index.module.css
@@ -1,11 +1,9 @@
 @reference "../../styles/index.css";
 
 .summary {
-  @apply outline-hidden
-    flex
+  @apply flex
     h-9
     cursor-pointer
-    select-none
     items-center
     gap-2
     rounded-md
@@ -14,6 +12,8 @@
     p-2
     text-sm
     text-neutral-700
+    outline-hidden
+    select-none
     motion-safe:transition-colors
     dark:border-neutral-900
     dark:text-neutral-300;
@@ -27,8 +27,8 @@
 
 .dropdownContentWrapper {
   @apply absolute
-    right-0
     top-full
+    right-0
     z-50
     mt-1
     max-h-80
@@ -50,14 +50,14 @@
 }
 
 .dropdownItem {
-  @apply outline-hidden
-    block
+  @apply block
     px-2.5
     py-1.5
     text-sm
     font-medium
     text-neutral-800
     no-underline
+    outline-hidden
     motion-safe:transition-colors
     dark:text-white;
 
@@ -71,8 +71,8 @@
 .dropdownLabel {
   @apply block
     text-sm
-    font-medium
-    leading-tight;
+    leading-tight
+    font-medium;
 }
 
 .dropdownVersions {
diff --git a/packages/ui-components/src/Common/GlowingBackdrop/index.module.css b/packages/ui-components/src/Common/GlowingBackdrop/index.module.css
index af072146f6a9a..75f47615984c0 100644
--- a/packages/ui-components/src/Common/GlowingBackdrop/index.module.css
+++ b/packages/ui-components/src/Common/GlowingBackdrop/index.module.css
@@ -2,8 +2,8 @@
 
 .glowingBackdrop {
   @apply absolute
-    left-0
     top-0
+    left-0
     -z-10
     size-full
     opacity-50
diff --git a/packages/ui-components/src/Common/LanguageDropDown/index.module.css b/packages/ui-components/src/Common/LanguageDropDown/index.module.css
index 1d96a9417b943..8cbcf1b574796 100644
--- a/packages/ui-components/src/Common/LanguageDropDown/index.module.css
+++ b/packages/ui-components/src/Common/LanguageDropDown/index.module.css
@@ -35,13 +35,13 @@
 }
 
 .dropDownItem {
-  @apply outline-hidden
-    cursor-pointer
+  @apply cursor-pointer
     px-2.5
     py-1.5
     text-sm
     font-medium
     text-neutral-800
+    outline-hidden
     data-[highlighted]:bg-green-600
     data-[highlighted]:text-white
     dark:text-white;
diff --git a/packages/ui-components/src/Common/Modal/index.module.css b/packages/ui-components/src/Common/Modal/index.module.css
index 0ab884d4f99f7..577ad45a1fe3c 100644
--- a/packages/ui-components/src/Common/Modal/index.module.css
+++ b/packages/ui-components/src/Common/Modal/index.module.css
@@ -35,17 +35,17 @@
 
   .close {
     @apply absolute
-      right-3
       top-3
+      right-3
       block
       size-7
       cursor-pointer
       rounded-sm
       p-1
       hover:bg-neutral-100
-      focus:outline-none
       focus:ring-2
       focus:ring-neutral-200
+      focus:outline-none
       dark:hover:bg-neutral-900
       dark:focus:ring-neutral-900;
   }
diff --git a/packages/ui-components/src/Common/Preview/index.module.css b/packages/ui-components/src/Common/Preview/index.module.css
index 9674a3c9580e0..e70cfb4ca3bb5 100644
--- a/packages/ui-components/src/Common/Preview/index.module.css
+++ b/packages/ui-components/src/Common/Preview/index.module.css
@@ -33,15 +33,7 @@
   }
 
   .container {
-    @apply @sm/preview:text-base
-      @md/preview:gap-6
-      @md/preview:text-lg
-      @lg/preview:gap-8
-      @lg/preview:text-xl
-      @xl/preview:gap-12
-      @xl/preview:text-2xl
-      @2xl/preview:text-3xl
-      z-10
+    @apply z-10
       mx-auto
       flex
       w-2/3
@@ -51,29 +43,37 @@
       text-center
       text-xs
       font-semibold
-      text-white;
+      text-white
+      @sm/preview:text-base
+      @md/preview:gap-6
+      @md/preview:text-lg
+      @lg/preview:gap-8
+      @lg/preview:text-xl
+      @xl/preview:gap-12
+      @xl/preview:text-2xl
+      @2xl/preview:text-3xl;
 
     .hexagon {
-      @apply @md/preview:h-3/5
+      @apply absolute
+        inset-0
+        m-auto
+        size-full
+        @md/preview:h-3/5
         @md/preview:w-3/5
         @lg/preview:h-2/3
         @lg/preview:w-2/3
         @xl/preview:h-3/5
         @xl/preview:w-3/5
         @2xl/preview:h-2/3
-        @2xl/preview:w-2/3
-        absolute
-        inset-0
-        m-auto
-        size-full;
+        @2xl/preview:w-2/3;
     }
 
     .logo {
-      @apply @md/preview:size-14
+      @apply mx-auto
+        size-6
+        @md/preview:size-14
         @lg/preview:size-16
-        @xl/preview:size-20
-        mx-auto
-        size-6;
+        @xl/preview:size-20;
     }
   }
 }
diff --git a/packages/ui-components/src/Common/Skeleton/index.module.css b/packages/ui-components/src/Common/Skeleton/index.module.css
index 53ff68b53af9a..6eaac97a33d51 100644
--- a/packages/ui-components/src/Common/Skeleton/index.module.css
+++ b/packages/ui-components/src/Common/Skeleton/index.module.css
@@ -1,19 +1,19 @@
 @reference "../../styles/index.css";
 
 .skeleton {
-  @apply outline-hidden
-    dark:animate-pulse-dark
+  @apply dark:animate-pulse-dark
     pointer-events-none
     inline-flex
     animate-pulse
     cursor-default
-    select-none
     rounded-md
     border-none
     bg-clip-border
     align-middle
     text-transparent
-    shadow-none;
+    shadow-none
+    outline-hidden
+    select-none;
 }
 
 .skeleton[data-inline-skeleton] {
diff --git a/packages/ui-components/src/Common/Tabs/index.module.css b/packages/ui-components/src/Common/Tabs/index.module.css
index 8ca9744bca766..f49c61cd7cc9f 100644
--- a/packages/ui-components/src/Common/Tabs/index.module.css
+++ b/packages/ui-components/src/Common/Tabs/index.module.css
@@ -12,13 +12,13 @@
       overflow-x-auto;
 
     .tabsTrigger {
-      @apply whitespace-nowrap
-        border-b-2
+      @apply border-b-2
         border-b-transparent
         px-1
         pb-[11px]
         text-sm
         font-semibold
+        whitespace-nowrap
         text-neutral-800
         dark:text-neutral-200;
 
diff --git a/packages/ui-components/src/Containers/Article/index.module.css b/packages/ui-components/src/Containers/Article/index.module.css
index 3073bf8f91e7c..21c58515f0aa3 100644
--- a/packages/ui-components/src/Containers/Article/index.module.css
+++ b/packages/ui-components/src/Containers/Article/index.module.css
@@ -30,12 +30,12 @@
     > *:first-child {
       @apply sm:bg-gradient-subtle
         sm:dark:bg-gradient-subtle-dark
-        xl:px-18
         p-4
         [grid-area:main]
         motion-safe:scroll-smooth
         sm:bg-fixed
-        sm:p-12;
+        sm:p-12
+        xl:px-18;
     }
 
     > *:last-child {
@@ -46,8 +46,8 @@
         lg:sticky
         lg:top-0
         lg:max-w-xs
-        lg:border-l
-        lg:border-t-0;
+        lg:border-t-0
+        lg:border-l;
     }
   }
 
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
index ef254be7796fb..30fb5aba48436 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
@@ -40,8 +40,8 @@
         flex-col
         gap-px
         after:absolute
-        after:left-[0.45rem]
         after:top-0
+        after:left-[0.45rem]
         after:z-10
         after:h-full
         after:w-px
@@ -58,8 +58,8 @@
           first:before:bg-white
           first:before:content-['']
           last:after:absolute
-          last:after:left-0
           last:after:top-[calc(50%+0.25rem)]
+          last:after:left-0
           last:after:h-20
           last:after:w-4
           last:after:bg-white
diff --git a/packages/ui-components/src/Providers/NotificationProvider/index.module.css b/packages/ui-components/src/Providers/NotificationProvider/index.module.css
index 9a3e6fa8c950c..d0f47443f906c 100644
--- a/packages/ui-components/src/Providers/NotificationProvider/index.module.css
+++ b/packages/ui-components/src/Providers/NotificationProvider/index.module.css
@@ -2,7 +2,7 @@
 
 .viewport {
   @apply fixed
-    bottom-0
     right-0
+    bottom-0
     list-none;
 }
diff --git a/packages/ui-components/src/styles/markdown.css b/packages/ui-components/src/styles/markdown.css
index 53176317a4007..3313facc29f1c 100644
--- a/packages/ui-components/src/styles/markdown.css
+++ b/packages/ui-components/src/styles/markdown.css
@@ -99,8 +99,8 @@ main {
 
   ul {
     @apply list-disc
-      pl-9
       pr-5
+      pl-9
       leading-6
       text-neutral-900
       dark:text-white;
@@ -123,11 +123,11 @@ main {
   }
 
   table {
-    @apply rounded-xs
-      mb-1
+    @apply mb-1
       w-full
       border-separate
       border-spacing-0
+      rounded-xs
       border
       border-neutral-200
       text-left
@@ -137,13 +137,13 @@ main {
     /* Common border and text styles */
     th,
     td {
-      @apply break-words
-        border
-        border-r-0
+      @apply border
         border-t-0
+        border-r-0
         border-neutral-200
         px-4
         py-2
+        break-words
         text-neutral-900
         dark:border-neutral-800
         dark:text-white;
@@ -187,8 +187,8 @@ main {
       }
 
       tr {
-        @apply rounded-xs
-          block
+        @apply block
+          rounded-xs
           border
           border-neutral-200
           p-4
@@ -212,13 +212,13 @@ main {
           text-right
           text-neutral-600
           before:absolute
-          before:left-0
           before:top-1/2
+          before:left-0
           before:w-1/3
           before:-translate-y-1/2
-          before:break-words
           before:text-left
           before:font-medium
+          before:break-words
           before:text-neutral-700
           before:content-[attr(data-label)]
           last:border-0