chore: synchronizing styles with the new version of prettier-plugin-tailwindcss

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

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 {

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

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;
 }

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 {

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;
 

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

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)]

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;
 

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 {

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

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;

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;
   }

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;
     }
   }
 }