refactor: extract constants into consts.ts, add prettier tailwind plugin for class sorting

src/components/DeprecatedIcon.astro

@@ -5,7 +5,7 @@ import { Icon } from "@astrojs/starlight/components";
 <span class="group">
   <span class="group-hover:hidden">
     <div
-      class="p-1 h-8 w-8 flex items-center justify-center rounded bg-[var(--sl-color-orange-low)] border border-[var(--sl-color-orange)] text-gray-900 dark:text-white"
+      class="flex h-8 w-8 items-center justify-center rounded border border-[var(--sl-color-orange)] bg-[var(--sl-color-orange-low)] p-1 text-gray-900 dark:text-white"
     >
       <Icon name="warning" />
     </div>

src/components/Modal.astro

@@ -14,10 +14,10 @@ const modalId = `modal-${Math.random().toString(36).slice(2)}`;
 <div>
   <label
     for={modalId}
-    class="flex items-center justify-center px-4 py-2 text-white rounded-lg cursor-pointer bg-accent-600 dark:bg-accent-200 dark:text-gray-900"
+    class="flex cursor-pointer items-center justify-center rounded-lg bg-accent-600 px-4 py-2 text-white dark:bg-accent-200 dark:text-gray-900"
   >
     <b>{button}</b>
-    <Icon name={icon} class="w-6 h-6" />
+    <Icon name={icon} class="h-6 w-6" />
   </label>
 </div>
 
@@ -25,15 +25,15 @@ const modalId = `modal-${Math.random().toString(36).slice(2)}`;
   <input
     type="checkbox"
     id={modalId}
-    class="fixed opacity-0 appearance-none peer"
+    class="peer fixed appearance-none opacity-0"
   />
 
   <label
     for={modalId}
-    class="pointer-events-none invisible fixed inset-0 flex cursor-pointer items-center justify-center overflow-hidden overscroll-contain backdrop-blur-md bg-gray-800/90 opacity-0 transition-all duration-200 ease-in-out peer-checked:pointer-events-auto peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:translate-y-0 peer-checked:[&>*]:scale-100 z-50"
+    class="pointer-events-none invisible fixed inset-0 z-50 flex cursor-pointer items-center justify-center overflow-hidden overscroll-contain bg-white/70 opacity-0 backdrop-blur-md transition-all duration-200 ease-in-out peer-checked:pointer-events-auto peer-checked:visible peer-checked:opacity-100 dark:bg-gray-800/70 peer-checked:[&>*]:translate-y-0 peer-checked:[&>*]:scale-100"
   >
     <div
-      class="w-5/6 p-4 bg-white border border-gray-300 shadow-lg dark:bg-gray-900 dark:border-gray-700 transform -translate-y-4 scale-95 transition-all duration-200 ease-in-out"
+      class="w-5/6 -translate-y-4 scale-95 transform border border-gray-300 bg-white p-4 shadow-lg transition-all duration-200 ease-in-out dark:border-gray-700 dark:bg-gray-900"
     >
       <h2 class="mb-4 text-xl font-bold">{title}</h2>
       <slot />

src/components/PackageManagers.astro

@@ -40,7 +40,7 @@ const packageManagerCode = (
       Yarn: `yarn create ${text}`,
       PNPM: `pnpm create ${text}`,
       Bun: `bun create ${text}`,
-    }
+    },
   };
 
   return commands[command][manager];

src/components/PluginCard.astro

@@ -17,9 +17,9 @@ const deprecated = plugin.description.includes("[DEPRECATED]");
 ---
 
 <div
-  class="relative p-4 border border-gray-300 dark:border-gray-700 not-content"
+  class="not-content relative border border-gray-300 p-4 dark:border-gray-700"
 >
-  <div class="flex items-center justify-between mb-4">
+  <div class="mb-4 flex items-center justify-between">
     <h3>{plugin.name}</h3>
     {deprecated && <DeprecatedIcon />}
   </div>

src/components/PluginModal.astro

@@ -34,7 +34,7 @@ const authors = new Intl.ListFormat("en", {
 <Modal button="View" icon="right-arrow" title={`${name} by ${authors}`}>
   {
     deprecated && (
-      <div class="mb-4 p-2 rounded-md bg-[var(--sl-color-orange-low)] border border-[var(--sl-color-orange)] text-gray-900 dark:text-white">
+      <div class="mb-4 rounded-md border border-[var(--sl-color-orange)] bg-[var(--sl-color-orange-low)] p-2 text-gray-900 dark:text-white">
         This plugin is deprecated and should not be used in new projects.
       </div>
     )

src/components/SponsorCard.astro

@@ -14,22 +14,22 @@ const {
 ---
 
 <a
-  class="relative flex flex-col items-center p-4 no-underline border border-gray-300 dark:border-gray-700 not-content text-inherit hover:bg-gray-200 dark:hover:bg-gray-800"
+  class="not-content relative flex flex-col items-center border border-gray-300 p-4 text-inherit no-underline hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-gray-800"
   href={`https://opencollective.com/${collectiveSlug}`}
 >
   <div class="flex flex-col items-center text-center">
-    <img class="w-16 h-16 rounded-full" src={image} alt={name} />
+    <img class="h-16 w-16 rounded-full" src={image} alt={name} />
     {
       isAdmin && (
-        <div class="px-2 py-1 mt-2 text-xs font-semibold text-white rounded-full bg-accent-600 dark:bg-accent-200 dark:text-gray-900">
+        <div class="mt-2 rounded-full bg-accent-600 px-2 py-1 text-xs font-semibold text-white dark:bg-accent-200 dark:text-gray-900">
           Admin
         </div>
       )
     }
     <p class="font-semibold">{name}</p>
   </div>
-  <p class="mb-8 text-sm text-center">{publicMessage}</p>
-  <p class="absolute font-semibold text-center bottom-2">
+  <p class="mb-8 text-center text-sm">{publicMessage}</p>
+  <p class="absolute bottom-2 text-center font-semibold">
     ${totalAmountDonated / 100}
   </p>
 </a>