fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

## Summary

Enable `better-tailwindcss/enforce-consistent-class-order` lint rule and
auto-fix all 1027 violations across 263 files. Stacked on #9427.

## Changes

- **What**: Sort Tailwind classes into consistent order via `eslint
--fix`
- Enable `enforce-consistent-class-order` as `'error'` in eslint config
- Purely cosmetic reordering — no behavioral or visual changes

## Review Focus

Mechanical auto-fix PR — all changes are class reordering only. This is
the largest diff but lowest risk since it changes no class names, only
their order.

**Stack:** #9417 → #9427 → **this PR**

Fixes #9300 (partial — 3 of 3 rules)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9428-fix-enable-enforce-consistent-class-order-tailwind-lint-rule-31a6d73d3650811c9065f5178ba3e724)
by [Unito](https://www.unito.io)

src/platform/cloud/onboarding/CloudAuthTimeoutView.vue

@@ -28,7 +28,7 @@
       <!-- Technical Details (Collapsible) -->
       <div v-if="errorMessage" class="mb-4 text-left">
         <button
-          class="flex w-full items-center justify-between rounded-sm bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
+          class="flex w-full items-center justify-between rounded-sm border-0 bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover"
           @click="showTechnicalDetails = !showTechnicalDetails"
         >
           <span>{{ $t('cloudOnboarding.authTimeout.technicalDetails') }}</span>
@@ -41,7 +41,7 @@
         </button>
         <div
           v-if="showTechnicalDetails"
-          class="mt-2 rounded-sm border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
+          class="mt-2 rounded-sm border border-muted-background p-4 font-mono text-xs break-all text-muted-foreground"
         >
           {{ errorMessage }}
         </div>

src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue

@@ -97,7 +97,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex size-full items-center justify-center bg-comfy-menu-secondary-bg"
+    class="bg-comfy-menu-secondary-bg flex size-full items-center justify-center"
   >
     <div class="flex flex-col items-center gap-4">
       <img

src/platform/cloud/subscription/components/FreeTierDialogContent.vue

@@ -4,7 +4,7 @@
     <Button
       size="icon"
       variant="muted-textonly"
-      class="rounded-full absolute top-2.5 right-2.5 z-10 size-8 p-0 text-white hover:bg-white/20"
+      class="absolute top-2.5 right-2.5 z-10 size-8 rounded-full p-0 text-white hover:bg-white/20"
       :aria-label="$t('g.close')"
       @click="$emit('close', false)"
     >

src/platform/cloud/subscription/components/PricingTable.vue

@@ -30,7 +30,7 @@
             <span>{{ option.label }}</span>
             <div
               v-if="option.value === 'yearly'"
-              class="bg-primary-background text-white text-[11px] px-1 py-0.5 rounded-full flex items-center font-bold"
+              class="flex items-center rounded-full bg-primary-background px-1 py-0.5 text-[11px] font-bold text-white"
             >
               -20%
             </div>
@@ -38,19 +38,19 @@
         </template>
       </SelectButton>
     </div>
-    <div class="flex flex-col xl:flex-row items-stretch gap-6">
+    <div class="flex flex-col items-stretch gap-6 xl:flex-row">
       <div
         v-for="tier in tiers"
         :key="tier.id"
         :class="
           cn(
-            'flex-1 flex flex-col rounded-2xl border border-border-default bg-base-background shadow-[0_0_12px_rgba(0,0,0,0.1)]',
+            'flex flex-1 flex-col rounded-2xl border border-border-default bg-base-background shadow-[0_0_12px_rgba(0,0,0,0.1)]',
             tier.isPopular ? 'border-muted-foreground' : ''
           )
         "
       >
-        <div class="p-8 pb-0 flex flex-col gap-8">
-          <div class="flex flex-row items-center gap-2 justify-between">
+        <div class="flex flex-col gap-8 p-8 pb-0">
+          <div class="flex flex-row items-center justify-between gap-2">
             <span
               class="font-inter text-base/normal font-bold text-base-foreground"
             >
@@ -58,7 +58,7 @@
             </span>
             <div
               v-if="tier.isPopular"
-              class="rounded-full bg-base-foreground px-1.5 text-[11px] font-bold uppercase text-base-background h-5 tracking-tight flex items-center"
+              class="flex h-5 items-center rounded-full bg-base-foreground px-1.5 text-[11px] font-bold tracking-tight text-base-background uppercase"
             >
               {{ t('subscription.mostPopular') }}
             </div>
@@ -67,11 +67,11 @@
             <div class="flex flex-col gap-2">
               <div class="flex flex-row items-baseline gap-2">
                 <span
-                  class="font-inter text-[32px] font-semibold leading-normal text-base-foreground"
+                  class="font-inter text-[32px] leading-normal font-semibold text-base-foreground"
                 >
                   <span
                     v-show="currentBillingCycle === 'yearly'"
-                    class="line-through text-2xl text-muted-foreground"
+                    class="text-2xl text-muted-foreground line-through"
                   >
                     ${{ tier.pricing.monthly }}
                   </span>
@@ -95,10 +95,10 @@
             </div>
           </div>
 
-          <div class="flex flex-col gap-4 pb-0 flex-1">
+          <div class="flex flex-1 flex-col gap-4 pb-0">
             <div class="flex flex-row items-center justify-between">
               <span
-                class="font-inter text-sm/normal font-normal text-foreground"
+                class="text-foreground font-inter text-sm/normal font-normal"
               >
                 {{
                   currentBillingCycle === 'yearly'
@@ -107,7 +107,7 @@
                 }}
               </span>
               <div class="flex flex-row items-center gap-1">
-                <i class="icon-[lucide--component] text-amber-400 text-sm" />
+                <i class="icon-[lucide--component] text-sm text-amber-400" />
                 <span
                   class="font-inter text-sm/normal font-bold text-base-foreground"
                 >
@@ -117,7 +117,7 @@
             </div>
 
             <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.maxDurationLabel') }}
               </span>
               <span
@@ -128,42 +128,42 @@
             </div>
 
             <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.gpuLabel') }}
               </span>
-              <i class="pi pi-check text-xs text-success-foreground" />
+              <i class="pi pi-check text-success-foreground text-xs" />
             </div>
 
             <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.addCreditsLabel') }}
               </span>
-              <i class="pi pi-check text-xs text-success-foreground" />
+              <i class="pi pi-check text-success-foreground text-xs" />
             </div>
 
             <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.customLoRAsLabel') }}
               </span>
               <i
                 v-if="tier.customLoRAs"
-                class="pi pi-check text-xs text-success-foreground"
+                class="pi pi-check text-success-foreground text-xs"
               />
-              <i v-else class="pi pi-times text-xs text-foreground" />
+              <i v-else class="pi pi-times text-foreground text-xs" />
             </div>
 
             <div class="flex flex-col gap-2">
               <div class="flex flex-row items-start justify-between">
                 <div class="flex flex-col gap-2">
-                  <span class="text-sm/relaxed font-normal text-foreground">
+                  <span class="text-foreground text-sm/relaxed font-normal">
                     {{ t('subscription.videoEstimateLabel') }}
                   </span>
-                  <div class="flex flex-row items-center gap-2 group pt-2">
+                  <div class="group flex flex-row items-center gap-2 pt-2">
                     <i
                       class="pi pi-question-circle text-xs text-muted-foreground group-hover:text-base-foreground"
                     />
                     <span
-                      class="text-sm font-normal text-muted-foreground cursor-pointer group-hover:text-base-foreground"
+                      class="cursor-pointer text-sm font-normal text-muted-foreground group-hover:text-base-foreground"
                       @click="togglePopover"
                     >
                       {{ t('subscription.videoEstimateHelp') }}
@@ -189,8 +189,8 @@
                 'h-10 w-full',
                 getButtonTextClass(tier),
                 tier.key === 'creator'
-                  ? 'bg-base-foreground border-transparent hover:bg-inverted-background-hover'
-                  : 'bg-secondary-background border-transparent hover:bg-secondary-background-hover focus:bg-secondary-background-selected'
+                  ? 'border-transparent bg-base-foreground hover:bg-inverted-background-hover'
+                  : 'border-transparent bg-secondary-background hover:bg-secondary-background-hover focus:bg-secondary-background-selected'
               )
             "
             @click="() => handleSubscribe(tier.key)"
@@ -225,7 +225,7 @@
           href="https://cloud.comfy.org/?template=video_wan2_2_14B_i2v"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-sm text-azure-600 hover:text-azure-400 no-underline flex gap-1"
+          class="flex gap-1 text-sm text-azure-600 no-underline hover:text-azure-400"
         >
           <span class="underline">
             {{ t('subscription.videoEstimateTryTemplate') }}

src/platform/cloud/subscription/components/SubscriptionPanel.vue

@@ -2,7 +2,7 @@
   <div class="subscription-container h-full">
     <div class="flex h-full flex-col gap-6">
       <div class="flex items-center gap-2">
-        <span class="text-2xl/tight font-inter font-semibold">
+        <span class="font-inter text-2xl/tight font-semibold">
           {{
             isActiveSubscription
               ? $t('subscription.title')
@@ -31,7 +31,7 @@
             class="text-xs text-text-secondary"
             @click="handleLearnMoreClick"
           >
-            <i class="pi pi-question-circle text-text-secondary text-xs" />
+            <i class="pi pi-question-circle text-xs text-text-secondary" />
             {{ $t('subscription.learnMore') }}
           </Button>
           <Button
@@ -39,7 +39,7 @@
             class="text-xs text-text-secondary"
             @click="handleOpenPartnerNodesInfo"
           >
-            <i class="pi pi-question-circle text-text-secondary text-xs" />
+            <i class="pi pi-question-circle text-xs text-text-secondary" />
             {{ $t('subscription.partnerNodesCredits') }}
           </Button>
           <Button
@@ -48,7 +48,7 @@
             :loading="isLoadingSupport"
             @click="handleMessageSupport"
           >
-            <i class="pi pi-comment text-text-secondary text-xs" />
+            <i class="pi pi-comment text-xs text-text-secondary" />
             {{ $t('subscription.messageSupport') }}
           </Button>
         </div>
@@ -59,7 +59,7 @@
           @click="handleInvoiceHistory"
         >
           {{ $t('subscription.invoiceHistory') }}
-          <i class="pi pi-external-link text-text-secondary text-xs" />
+          <i class="pi pi-external-link text-xs text-text-secondary" />
         </Button>
       </div>
     </div>

src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue

@@ -35,7 +35,7 @@
           <Button
             v-if="isActiveSubscription && !isFreeTier"
             variant="secondary"
-            class="ml-auto rounded-lg px-4 py-2 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+            class="ml-auto rounded-lg bg-interface-menu-component-surface-selected px-4 py-2 text-sm font-normal text-text-primary"
             @click="
               async () => {
                 await authActions.accessBillingPortal()
@@ -64,8 +64,8 @@
         </div>
       </div>
 
-      <div class="flex flex-col lg:flex-row gap-6 pt-9">
-        <div class="flex flex-col shrink-0">
+      <div class="flex flex-col gap-6 pt-9 lg:flex-row">
+        <div class="flex shrink-0 flex-col">
           <div class="flex flex-col gap-3">
             <div
               :class="
@@ -82,7 +82,7 @@
                 :loading="isLoadingBalance"
                 @click="handleRefresh"
               >
-                <i class="pi pi-sync text-text-secondary text-sm" />
+                <i class="pi pi-sync text-sm text-text-secondary" />
               </Button>
 
               <div class="flex flex-col gap-2">
@@ -99,7 +99,7 @@
               <table class="text-sm text-muted">
                 <tbody>
                   <tr>
-                    <td class="pr-4 font-bold text-left align-middle">
+                    <td class="pr-4 text-left align-middle font-bold">
                       <Skeleton
                         v-if="isLoadingBalance"
                         width="5rem"
@@ -112,7 +112,7 @@
                     </td>
                   </tr>
                   <tr>
-                    <td class="pr-4 font-bold text-left align-middle">
+                    <td class="pr-4 text-left align-middle font-bold">
                       <Skeleton
                         v-if="isLoadingBalance"
                         width="3rem"
@@ -135,14 +135,14 @@
                   href="https://platform.comfy.org/profile/usage"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="text-sm underline text-muted"
+                  class="text-sm text-muted underline"
                 >
                   {{ $t('subscription.viewUsageHistory') }}
                 </a>
                 <Button
                   v-if="isActiveSubscription && isFreeTier"
                   variant="gradient"
-                  class="p-2 min-h-8 rounded-lg text-sm font-normal w-full"
+                  class="min-h-8 w-full rounded-lg p-2 text-sm font-normal"
                   @click="handleUpgradeToAddCredits"
                 >
                   {{ $t('subscription.upgradeToAddCredits') }}
@@ -150,7 +150,7 @@
                 <Button
                   v-else-if="isActiveSubscription"
                   variant="secondary"
-                  class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                  class="min-h-8 rounded-lg bg-interface-menu-component-surface-selected p-2 text-sm font-normal text-text-primary"
                   @click="handleAddApiCredits"
                 >
                   {{ $t('subscription.addCredits') }}
@@ -197,7 +197,7 @@
         href="https://www.comfy.org/cloud/pricing"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-sm underline hover:opacity-80 text-muted"
+        class="text-sm text-muted underline hover:opacity-80"
       >
         {{ $t('subscription.viewMoreDetailsPlans') }}
       </a>

src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue

@@ -1,19 +1,19 @@
 <template>
   <div
     v-if="showCustomPricingTable"
-    class="relative flex flex-col p-4 pt-8 md:p-16 overflow-y-auto! h-full gap-8"
+    class="relative flex h-full flex-col gap-8 overflow-y-auto! p-4 pt-8 md:p-16"
   >
     <Button
       size="icon"
       variant="muted-textonly"
-      class="rounded-full shrink-0 text-text-secondary hover:bg-white/10 absolute right-2.5 top-2.5"
+      class="absolute top-2.5 right-2.5 shrink-0 rounded-full text-text-secondary hover:bg-white/10"
       :aria-label="$t('g.close')"
       @click="handleClose"
     >
       <i class="pi pi-times text-xl" />
     </Button>
     <div class="text-center">
-      <h2 class="text-xl lg:text-2xl text-muted-foreground m-0">
+      <h2 class="m-0 text-xl text-muted-foreground lg:text-2xl">
         {{ $t('subscription.description') }}
       </h2>
     </div>
@@ -22,7 +22,7 @@
 
     <!-- Contact and Enterprise Links -->
     <div class="flex flex-col items-center gap-2">
-      <p class="text-sm text-text-secondary m-0">
+      <p class="m-0 text-sm text-text-secondary">
         {{ $t('subscription.haveQuestions') }}
       </p>
       <div class="flex items-center gap-1.5">
@@ -51,7 +51,7 @@
     <Button
       size="icon"
       variant="muted-textonly"
-      class="rounded-full absolute top-2.5 right-2.5 z-10 size-8 p-0 text-white hover:bg-white/20"
+      class="absolute top-2.5 right-2.5 z-10 size-8 rounded-full p-0 text-white hover:bg-white/20"
       :aria-label="$t('g.close')"
       @click="handleClose"
     >
@@ -113,7 +113,7 @@
 
       <div class="flex flex-col pt-8">
         <SubscribeButton
-          class="py-2 px-4 rounded-lg"
+          class="rounded-lg px-4 py-2"
           :pt="{
             root: {
               style: 'background: var(--color-accent-blue, #0B8CE9);'