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/renderer/extensions/vueNodes/components/ImagePreview.vue

@@ -1,13 +1,13 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="image-preview group relative flex size-full min-h-55 min-w-16 flex-col px-2 justify-center"
+    class="image-preview group relative flex size-full min-h-55 min-w-16 flex-col justify-center px-2"
     @keydown="handleKeyDown"
   >
     <!-- Image Wrapper -->
     <div
       ref="imageWrapperEl"
-      class="min-h-0 flex-1 flex w-full overflow-hidden rounded-[5px] bg-muted-background relative"
+      class="relative flex min-h-0 w-full flex-1 overflow-hidden rounded-[5px] bg-muted-background"
       tabindex="0"
       role="img"
       :aria-label="$t('g.imagePreview')"
@@ -21,7 +21,7 @@
       <div
         v-if="imageError"
         role="alert"
-        class="flex flex-1 self-center size-full flex-col items-center justify-around bg-muted-background text-center text-base-foreground py-8"
+        class="flex size-full flex-1 flex-col items-center justify-around self-center bg-muted-background py-8 text-center text-base-foreground"
       >
         <i class="mb-2 icon-[lucide--image-off] size-12 text-base-foreground" />
         <p class="text-sm text-base-foreground">
@@ -40,7 +40,7 @@
         v-if="!imageError"
         :src="currentImageUrl"
         :alt="imageAltText"
-        class="absolute inset-0 block size-full object-contain pointer-events-none"
+        class="pointer-events-none absolute inset-0 block size-full object-contain"
         @load="handleImageLoad"
         @error="handleImageError"
       />

src/renderer/extensions/vueNodes/components/InputSlot.vue

@@ -5,7 +5,7 @@
     v-tooltip.left="tooltipConfig"
     :class="
       cn(
-        'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
+        'lg-slot lg-slot--input group m-0 flex items-center rounded-r-lg',
         'cursor-crosshair',
         dotOnly ? 'lg-slot--dot-only' : 'pr-6',
         {
@@ -22,9 +22,9 @@
       ref="connectionDotRef"
       :class="
         cn(
-          '-translate-x-1/2 w-3',
+          'w-3 -translate-x-1/2',
           hasError &&
-            'before:ring-2 before:ring-error before:ring-offset-0 before:size-4 before:absolute before:rounded-full before:pointer-events-none'
+            'before:pointer-events-none before:absolute before:size-4 before:rounded-full before:ring-2 before:ring-error before:ring-offset-0'
         )
       "
       :slot-data
@@ -34,13 +34,13 @@
     />
 
     <!-- Slot Name -->
-    <div class="h-full flex items-center min-w-0">
+    <div class="flex h-full min-w-0 items-center">
       <span
         v-if="!props.dotOnly && !hasNoLabel"
         :class="
           cn(
             'truncate text-node-component-slot-text',
-            hasError && 'text-error font-medium'
+            hasError && 'font-medium text-error'
           )
         "
       >

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -9,24 +9,24 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'group/node bg-node-component-header-surface lg-node absolute text-sm',
-        'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
+        'group/node lg-node absolute bg-node-component-header-surface text-sm',
+        'min-h-(--node-height) w-(--node-width) min-w-[225px] contain-layout contain-style',
         shapeClass,
-        'touch-none flex flex-col',
+        'flex touch-none flex-col',
         'border border-solid border-component-node-border',
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
-          'hover:ring-7 ring-node-component-ring',
-        'outline-transparent outline-3 focus-visible:outline-node-component-outline',
+          'ring-node-component-ring hover:ring-7',
+        'outline-3 outline-transparent focus-visible:outline-node-component-outline',
         borderClass,
         outlineClass,
         cursorClass,
         {
-          [`${beforeShapeClass} before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0`]:
+          [`${beforeShapeClass} before:pointer-events-none before:absolute before:inset-0 before:bg-bypass/60`]:
             bypassed,
           [`${beforeShapeClass} before:pointer-events-none before:absolute before:inset-0`]:
             muted,
-          'ring-4 ring-primary-500 bg-primary-500/10': isDraggingOver
+          'bg-primary-500/10 ring-4 ring-primary-500': isDraggingOver
         },
         shouldHandleNodePointerEvents && !nodeData.flags?.ghost
           ? 'pointer-events-auto'
@@ -58,7 +58,7 @@
     />
     <div
       v-if="displayHeader"
-      class="flex flex-col justify-center items-center relative"
+      class="relative flex flex-col items-center justify-center"
     >
       <template v-if="isCollapsed">
         <SlotConnectionDot
@@ -110,14 +110,14 @@
       </div>
 
       <div
-        class="flex flex-1 flex-col gap-1 pt-1 pb-3 bg-component-node-background rounded-b-2xl"
+        class="flex flex-1 flex-col gap-1 rounded-b-2xl bg-component-node-background pt-1 pb-3"
         :data-testid="`node-body-${nodeData.id}`"
       >
         <NodeSlots :node-data="nodeData" />
 
         <NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
 
-        <div v-if="hasCustomContent" class="min-h-0 flex-1 flex flex-col">
+        <div v-if="hasCustomContent" class="flex min-h-0 flex-1 flex-col">
           <NodeContent
             v-if="nodeMedia"
             :node-data="nodeData"
@@ -147,7 +147,7 @@
       "
       :class="
         cn(
-          'flex w-full h-7 rounded-b-2xl -z-1 text-xs rounded-t-none overflow-hidden divide-x divide-component-node-border',
+          '-z-1 flex h-7 w-full divide-x divide-component-node-border overflow-hidden rounded-t-none rounded-b-2xl text-xs',
           !isCollapsed && '-mt-5 h-12'
         )
       "
@@ -157,7 +157,7 @@
         variant="textonly"
         :class="
           cn(
-            'flex-1 rounded-none h-full',
+            'h-full flex-1 rounded-none',
             hasAnyError &&
               showErrorsTabEnabled &&
               !nodeData.color &&
@@ -181,7 +181,7 @@
         variant="textonly"
         :class="
           cn(
-            'flex-1 rounded-none h-full bg-error hover:bg-destructive-background-hover',
+            'h-full flex-1 rounded-none bg-error hover:bg-destructive-background-hover',
             isCollapsed ? 'py-2' : 'pt-7 pb-2'
           )
         "
@@ -199,7 +199,7 @@
         "
         variant="textonly"
         :class="
-          cn('flex-1 rounded-none h-full', isCollapsed ? 'py-2' : 'pt-7 pb-2')
+          cn('h-full flex-1 rounded-none', isCollapsed ? 'py-2' : 'pt-7 pb-2')
         "
         @click.stop="showAdvancedState = !showAdvancedState"
       >
@@ -238,7 +238,7 @@
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 12 12"
-          :class="cn('size-2/5 absolute', handle.svgPositionClasses)"
+          :class="cn('absolute size-2/5', handle.svgPositionClasses)"
           :style="
             handle.svgTransform ? { transform: handle.svgTransform } : undefined
           "

src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue

@@ -3,18 +3,18 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-component-node-background lg-node pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border border-solid outline-transparent outline-2 border-node-stroke',
+        'lg-node flex w-[350px] touch-none flex-col rounded-2xl border border-solid border-node-stroke bg-component-node-background pb-1 outline-2 outline-transparent contain-layout contain-style',
         position
       )
     "
   >
     <div
-      class="flex flex-col justify-center items-center relative pointer-events-none"
+      class="pointer-events-none relative flex flex-col items-center justify-center"
     >
       <NodeHeader :node-data="nodeData" />
     </div>
     <div
-      class="flex flex-1 flex-col gap-1 pb-2 pointer-events-none"
+      class="pointer-events-none flex flex-1 flex-col gap-1 pb-2"
       :data-testid="`node-body-${nodeData.id}`"
     >
       <NodeSlots :node-data="nodeData" />

src/renderer/extensions/vueNodes/components/LivePreview.vue

@@ -11,7 +11,7 @@
       v-else
       :src="imageUrl"
       :alt="$t('g.liveSamplingPreview')"
-      class="pointer-events-none w-full object-contain contain-size min-h-55 flex-1"
+      class="pointer-events-none min-h-55 w-full flex-1 object-contain contain-size"
       @load="handleImageLoad"
       @error="handleImageError"
     />

src/renderer/extensions/vueNodes/components/NodeBadge.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="text"
-    class="min-w-max rounded-sm bg-node-component-surface px-1 py-0.5 text-xs flex items-center gap-1"
+    class="flex min-w-max items-center gap-1 rounded-sm bg-node-component-surface px-1 py-0.5 text-xs"
     :style="{
       color: fgColor,
       backgroundColor: bgColor

src/renderer/extensions/vueNodes/components/NodeBadges.vue

@@ -15,18 +15,18 @@ defineProps<{
   >
     <div
       v-if="hasComfyBadge"
-      class="rounded-full bg-component-node-widget-background size-6 flex justify-center items-center"
+      class="flex size-6 items-center justify-center rounded-full bg-component-node-widget-background"
     >
       <i class="icon-[comfy--comfy-c] size-3" />
     </div>
     <div
       v-if="core.length"
-      class="rounded-full bg-component-node-widget-background h-6 flex justify-center items-center overflow-clip"
+      class="flex h-6 items-center justify-center overflow-clip rounded-full bg-component-node-widget-background"
     >
       <template v-for="(badge, index) of core" :key="badge.text">
         <div
           v-if="index !== 0"
-          class="border-muted-foreground border-r h-4 mr-0.5 pr-0.5"
+          class="mr-0.5 h-4 border-r border-muted-foreground pr-0.5"
         />
         <NodeBadge
           bg-color="transparent"
@@ -37,12 +37,12 @@ defineProps<{
     </div>
     <div
       v-if="extension.length"
-      class="rounded-full bg-component-node-widget-background h-6 flex justify-center items-center overflow-clip"
+      class="flex h-6 items-center justify-center overflow-clip rounded-full bg-component-node-widget-background"
     >
       <template v-for="(badge, index) of extension" :key="badge.text">
         <div
           v-if="index !== 0"
-          class="border-muted-foreground border-r h-4 mr-0.5 pr-0.5"
+          class="mr-0.5 h-4 border-r border-muted-foreground pr-0.5"
         />
         <NodeBadge
           bg-color="transparent"

src/renderer/extensions/vueNodes/components/NodeContent.vue

@@ -2,7 +2,7 @@
   <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ st('nodeErrors.content', 'Node Content Error') }}
   </div>
-  <div v-else class="lg-node-content flex grow flex-col flex-auto">
+  <div v-else class="lg-node-content flex flex-auto grow flex-col">
     <!-- Default slot for custom content -->
     <slot>
       <VideoPreview

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -6,7 +6,7 @@
     v-else
     :class="
       cn(
-        'lg-node-header text-sm py-2 pl-2 pr-3 w-full min-w-0',
+        'lg-node-header w-full min-w-0 py-2 pr-3 pl-2 text-sm',
         'text-node-component-header',
         headerShapeClass
       )
@@ -14,9 +14,9 @@
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
-    <div class="flex items-center justify-between gap-2.5 min-w-0">
+    <div class="flex min-w-0 items-center justify-between gap-2.5">
       <!-- Collapse/Expand Button -->
-      <div class="relative flex items-center gap-2.5 min-w-0 shrink mr-auto">
+      <div class="relative mr-auto flex min-w-0 shrink items-center gap-2.5">
         <div class="flex shrink-0 items-center px-0.5">
           <Button
             size="icon-sm"
@@ -43,7 +43,7 @@
           class="flex min-w-0 flex-1 items-center gap-2"
           data-testid="node-title"
         >
-          <div class="truncate flex-1">
+          <div class="flex-1 truncate">
             <EditableText
               :model-value="displayTitle"
               :is-editing="isEditing"
@@ -59,17 +59,17 @@
         <span
           :class="
             cn(
-              'flex h-5 bg-component-node-widget-background p-1 items-center text-xs shrink-0',
+              'flex h-5 shrink-0 items-center bg-component-node-widget-background p-1 text-xs',
               badge.rest ? 'rounded-l-full pr-1' : 'rounded-full'
             )
           "
         >
-          <i class="h-full icon-[lucide--component] bg-amber-400" />
+          <i class="icon-[lucide--component] h-full bg-amber-400" />
           <span class="truncate" v-text="badge.required" />
         </span>
         <span
           v-if="badge.rest"
-          class="truncate -ml-2.5 grow basis-0 bg-component-node-widget-background rounded-r-full max-w-max min-w-0"
+          class="-ml-2.5 max-w-max min-w-0 grow basis-0 truncate rounded-r-full bg-component-node-widget-background"
         >
           <span class="pr-2" v-text="badge.rest" />
         </span>
@@ -77,7 +77,7 @@
       <NodeBadge v-if="statusBadge" v-bind="statusBadge" />
       <i
         v-if="isPinned"
-        class="size-5 icon-[comfy--pin]"
+        class="icon-[comfy--pin] size-5"
         data-testid="node-pin-indicator"
       />
     </div>

src/renderer/extensions/vueNodes/components/NodeSlots.vue

@@ -2,10 +2,10 @@
   <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ st('nodeErrors.slots', 'Node Slots Error') }}
   </div>
-  <div v-else :class="cn('flex justify-between min-w-0', unifiedWrapperClass)">
+  <div v-else :class="cn('flex min-w-0 justify-between', unifiedWrapperClass)">
     <div
       v-if="filteredInputs.length"
-      :class="cn('flex flex-col min-w-0', unifiedDotsClass)"
+      :class="cn('flex min-w-0 flex-col', unifiedDotsClass)"
     >
       <InputSlot
         v-for="(input, index) in filteredInputs"
@@ -19,7 +19,7 @@
 
     <div
       v-if="nodeData?.outputs?.length"
-      :class="cn('ml-auto flex flex-col min-w-0', unifiedDotsClass)"
+      :class="cn('ml-auto flex min-w-0 flex-col', unifiedDotsClass)"
     >
       <OutputSlot
         v-for="(output, index) in nodeData.outputs"
@@ -68,13 +68,13 @@ const filteredInputs = computed(() => [
 const unifiedWrapperClass = computed((): string =>
   cn(
     unified &&
-      'absolute inset-0 items-center pointer-events-none opacity-0 z-30'
+      'pointer-events-none absolute inset-0 z-30 items-center opacity-0'
   )
 )
 const unifiedDotsClass = computed((): string =>
   cn(
     unified &&
-      'grid grid-cols-1 grid-rows-1 gap-0 *:row-span-full *:col-span-full place-items-center'
+      'grid grid-cols-1 grid-rows-1 place-items-center gap-0 *:col-span-full *:row-span-full'
   )
 )
 

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -33,7 +33,7 @@
         <div
           :class="
             cn(
-              'z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100 flex items-stretch',
+              'z-10 flex w-3 items-stretch opacity-0 transition-opacity duration-150 group-hover:opacity-100',
               widget.slotMetadata?.linked && 'opacity-100'
             )
           "
@@ -64,7 +64,7 @@
             :class="
               cn(
                 'col-span-2',
-                widget.hasError && 'text-node-stroke-error font-bold'
+                widget.hasError && 'font-bold text-node-stroke-error'
               )
             "
             @update:model-value="widget.updateHandler"

src/renderer/extensions/vueNodes/components/OutputSlot.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
   <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
-    <div class="relative h-full flex items-center min-w-0">
+    <div class="relative flex h-full min-w-0 items-center">
       <!-- Slot Name -->
       <span
         v-if="!props.dotOnly && !hasNoLabel"
@@ -97,7 +97,7 @@ const shouldDim = computed(() => {
 
 const slotWrapperClass = computed(() =>
   cn(
-    'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
+    'lg-slot lg-slot--output group flex h-6 items-center justify-end rounded-l-lg',
     'cursor-crosshair',
     dotOnly.value ? 'lg-slot--dot-only justify-center' : 'pl-6',
     {

src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue

@@ -46,13 +46,13 @@ const isListShape = computed(() => props.slotData?.shape === RenderShape.GRID)
 
 const slotClass = computed(() =>
   cn(
-    'bg-slate-300 slot-dot',
+    'slot-dot bg-slate-300',
     isListShape.value ? 'rounded-[1px]' : 'rounded-full',
     'transition-all duration-150',
     'border border-solid border-node-component-slot-dot-outline',
     props.multi
-      ? 'w-3 h-6'
-      : 'size-3 cursor-crosshair group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125'
+      ? 'h-6 w-3'
+      : 'size-3 cursor-crosshair group-hover/slot:scale-125 group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5]'
   )
 )
 </script>
@@ -61,7 +61,7 @@ const slotClass = computed(() =>
   <div
     :class="
       cn(
-        'after:absolute after:inset-y-0 after:w-5/2 relative size-6 flex items-center justify-center group/slot',
+        'group/slot relative flex size-6 items-center justify-center after:absolute after:inset-y-0 after:w-5/2',
         props.class
       )
     "