From ef4e4a69d5d694042291e797e7200a40cf4862de Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Thu, 5 Mar 2026 17:24:34 -0800
Subject: [PATCH] fix: enable enforce-consistent-class-order tailwind lint rule
 (#9428)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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)
---
 eslint.config.ts                              |  2 +-
 .../LiteGraphCanvasSplitterOverlay.vue        | 16 +++---
 src/components/MenuHamburger.vue              |  2 +-
 src/components/TopMenuSection.vue             |  2 +-
 src/components/actionbar/ComfyActionbar.vue   | 12 ++--
 src/components/appMode/AppModeToolbar.vue     |  6 +-
 .../tabs/terminal/BaseTerminal.vue            |  2 +-
 .../breadcrumb/SubgraphBreadcrumb.vue         |  4 +-
 src/components/builder/AppBuilder.vue         | 30 +++++-----
 src/components/builder/BuilderMenu.vue        |  8 +--
 src/components/builder/BuilderToolbar.vue     |  6 +-
 .../builder/ConnectOutputPopover.vue          |  2 +-
 src/components/builder/IoItem.vue             |  6 +-
 src/components/builder/StepLabel.vue          |  2 +-
 src/components/button/IconGroup.vue           |  2 +-
 src/components/card/CardBottom.vue            |  2 +-
 src/components/card/CardContainer.vue         |  2 +-
 src/components/chip/SquareChip.vue            |  4 +-
 src/components/common/DraggableList.vue       |  2 +-
 src/components/common/DropdownItem.vue        |  4 +-
 src/components/common/DropdownMenu.vue        |  4 +-
 src/components/common/MarqueeLine.vue         |  4 +-
 src/components/common/OverlayIcon.vue         |  4 +-
 .../common/ScrubableNumberInput.vue           |  8 +--
 src/components/common/SearchBox.vue           |  8 +--
 src/components/common/SearchBoxV2.vue         |  6 +-
 src/components/common/TextTickerMultiLine.vue |  4 +-
 src/components/common/TreeExplorer.vue        |  2 +-
 .../common/TreeExplorerTreeNode.vue           |  2 +-
 src/components/common/TreeExplorerV2.vue      |  2 +-
 src/components/common/TreeExplorerV2Node.vue  |  6 +-
 src/components/common/VirtualGrid.vue         |  2 +-
 .../common/WorkflowActionsDropdown.vue        |  4 +-
 src/components/common/WorkflowActionsList.vue |  8 +--
 src/components/dialog/confirm/ConfirmBody.vue |  2 +-
 .../dialog/confirm/ConfirmFooter.vue          |  2 +-
 .../dialog/confirm/ConfirmHeader.vue          |  2 +-
 .../content/ConfirmationDialogContent.vue     |  6 +-
 .../dialog/content/MissingModelsContent.vue   | 10 ++--
 .../dialog/content/MissingNodesContent.vue    | 36 ++++++------
 .../dialog/content/MissingNodesFooter.vue     |  6 +-
 .../TopUpCreditsDialogContentLegacy.vue       | 16 +++---
 .../content/credit/CreditTopUpOption.vue      |  6 +-
 .../dialog/content/setting/UserPanel.vue      |  2 +-
 .../CancelSubscriptionDialogContent.vue       |  2 +-
 src/components/error/ErrorOverlay.vue         |  6 +-
 .../gradientslider/GradientSlider.vue         |  2 +-
 src/components/graph/GraphCanvas.vue          |  2 +-
 src/components/graph/NodeContextMenu.vue      |  2 +-
 .../selectionToolbox/ColorPickerMenu.vue      |  8 +--
 .../helpcenter/HelpCenterMenuContent.vue      |  2 +-
 src/components/honeyToast/HoneyToast.vue      |  6 +-
 src/components/input/MultiSelect.vue          |  8 +--
 src/components/input/SingleSelect.vue         |  4 +-
 .../load3d/controls/PopupSlider.vue           |  4 +-
 .../load3d/controls/RecordingControls.vue     |  2 +-
 .../maskeditor/BrushSettingsPanel.vue         | 30 +++++-----
 .../maskeditor/ColorSelectSettingsPanel.vue   |  2 +-
 .../maskeditor/ImageLayerSettingsPanel.vue    | 18 +++---
 .../maskeditor/MaskEditorContent.vue          | 10 ++--
 .../maskeditor/PaintBucketSettingsPanel.vue   |  2 +-
 src/components/maskeditor/PointerZone.vue     |  2 +-
 src/components/maskeditor/SidePanel.vue       |  6 +-
 src/components/maskeditor/ToolPanel.vue       |  4 +-
 .../maskeditor/controls/DropdownControl.vue   |  6 +-
 .../maskeditor/controls/SliderControl.vue     |  2 +-
 .../maskeditor/controls/ToggleControl.vue     |  4 +-
 .../maskeditor/dialog/TopBarHeader.vue        | 14 ++---
 src/components/node/NodePreviewCard.vue       | 16 +++---
 src/components/painter/WidgetPainter.vue      | 18 +++---
 .../queue/JobHistoryActionsMenu.vue           |  4 +-
 .../queue/QueueInlineProgressSummary.vue      |  2 +-
 .../queue/QueueNotificationBanner.vue         |  2 +-
 src/components/queue/QueueOverlayExpanded.vue |  2 +-
 src/components/queue/QueueProgressOverlay.vue |  4 +-
 .../queue/dialogs/QueueClearHistoryDialog.vue |  4 +-
 src/components/queue/job/QueueJobItem.vue     |  2 +-
 .../rightSidePanel/RightSidePanel.vue         | 10 ++--
 .../rightSidePanel/errors/ErrorNodeCard.vue   | 20 +++----
 .../rightSidePanel/errors/MissingNodeCard.vue |  8 +--
 .../errors/MissingPackGroupRow.vue            | 42 +++++++-------
 .../rightSidePanel/errors/TabErrors.vue       | 30 +++++-----
 .../layout/CollapseToggleButton.vue           |  2 +-
 .../layout/PropertiesAccordionItem.vue        |  8 +--
 .../parameters/SectionWidgets.vue             | 14 ++---
 .../parameters/TabGlobalParameters.vue        |  6 +-
 .../rightSidePanel/parameters/TabNodes.vue    |  4 +-
 .../parameters/TabNormalInputs.vue            |  4 +-
 .../parameters/TabSubgraphInputs.vue          |  4 +-
 .../parameters/WidgetActions.vue              | 10 ++--
 .../rightSidePanel/parameters/WidgetItem.vue  | 18 +++---
 .../rightSidePanel/settings/LayoutField.vue   |  4 +-
 .../rightSidePanel/settings/SetNodeColor.vue  |  4 +-
 .../settings/TabGlobalSettings.vue            |  6 +-
 .../subgraph/SubgraphEditor.vue               | 18 +++---
 .../subgraph/SubgraphNodeWidget.vue           | 10 ++--
 .../v2/NodeSearchCategorySidebar.vue          |  2 +-
 .../searchbox/v2/NodeSearchContent.vue        |  2 +-
 .../searchbox/v2/NodeSearchFilterBar.vue      |  4 +-
 .../searchbox/v2/NodeSearchFilterPanel.vue    |  4 +-
 .../searchbox/v2/NodeSearchInput.vue          | 10 ++--
 .../searchbox/v2/NodeSearchListItem.vue       |  4 +-
 src/components/sidebar/SideToolbar.vue        |  6 +-
 src/components/sidebar/SidebarIcon.vue        |  2 +-
 .../sidebar/tabs/AppsSidebarTab.vue           |  2 +-
 .../sidebar/tabs/AssetsSidebarGridView.vue    |  2 +-
 .../sidebar/tabs/AssetsSidebarListView.vue    |  4 +-
 .../sidebar/tabs/AssetsSidebarTab.vue         |  6 +-
 .../sidebar/tabs/NodeLibrarySidebarTabV2.vue  | 10 ++--
 .../sidebar/tabs/SidebarTabTemplate.vue       |  4 +-
 .../tabs/nodeLibrary/AllNodesPanel.vue        |  6 +-
 .../tabs/nodeLibrary/BlueprintsPanel.vue      |  4 +-
 .../tabs/nodeLibrary/CustomNodesPanel.vue     |  8 +--
 .../tabs/nodeLibrary/EssentialNodeCard.vue    |  4 +-
 .../tabs/nodeLibrary/EssentialNodesPanel.vue  |  4 +-
 src/components/tab/Tab.vue                    |  8 +--
 src/components/topbar/CurrentUserButton.vue   |  2 +-
 .../topbar/CurrentUserPopoverLegacy.vue       | 46 +++++++--------
 src/components/topbar/LoginButton.vue         |  2 +-
 src/components/topbar/TopMenuHelpButton.vue   |  2 +-
 src/components/topbar/TopbarBadge.vue         |  4 +-
 .../topbar/WorkflowOverflowMenu.vue           |  2 +-
 src/components/topbar/WorkflowTab.vue         |  2 +-
 src/components/topbar/WorkflowTabs.vue        |  8 +--
 src/components/ui/Popover.vue                 |  8 +--
 src/components/ui/ZoomPane.vue                |  2 +-
 src/components/ui/button/button.variants.ts   | 10 ++--
 src/components/ui/input/Input.vue             |  2 +-
 .../ui/search-input/SearchInput.vue           |  6 +-
 src/components/ui/select/SelectContent.vue    |  4 +-
 src/components/ui/select/SelectItem.vue       |  2 +-
 src/components/ui/select/SelectLabel.vue      |  2 +-
 src/components/ui/select/SelectTrigger.vue    |  2 +-
 src/components/ui/slider/Slider.vue           |  6 +-
 .../ui/stepper/FormattedNumberStepper.vue     | 10 ++--
 src/components/ui/tags-input/TagsInput.vue    |  4 +-
 .../ui/tags-input/TagsInputInput.vue          |  2 +-
 .../ui/tags-input/TagsInputItem.vue           |  2 +-
 .../ui/tags-input/TagsInputItemDelete.vue     |  2 +-
 src/components/ui/textarea/Textarea.vue       |  2 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |  2 +-
 .../ui/toggle-group/toggleGroup.variants.ts   |  4 +-
 .../widget/layout/BaseModalLayout.vue         | 20 +++----
 src/components/widget/nav/NavIcon.vue         |  2 +-
 src/components/widget/nav/NavItem.vue         |  4 +-
 src/components/widget/nav/NavTitle.vue        |  4 +-
 src/components/widget/panel/LeftSidePanel.vue |  2 +-
 .../components/ActiveMediaAssetCard.vue       |  6 +-
 .../assets/components/AssetBadgeGroup.vue     |  4 +-
 .../assets/components/AssetBrowserModal.vue   |  4 +-
 src/platform/assets/components/AssetCard.vue  | 20 +++----
 .../components/AssetExportProgressDialog.vue  |  8 +--
 .../assets/components/AssetFilterBar.vue      |  4 +-
 src/platform/assets/components/AssetGrid.vue  |  4 +-
 .../assets/components/MediaAssetCard.vue      | 10 ++--
 .../assets/components/MediaAssetFilterBar.vue |  4 +-
 .../components/MediaAssetFilterMenu.vue       |  4 +-
 .../components/MediaAssetSettingsMenu.vue     | 14 ++---
 src/platform/assets/components/MediaTitle.vue |  2 +-
 .../components/ModelImportProgressDialog.vue  |  4 +-
 .../components/UploadModelDialogHeader.vue    |  2 +-
 .../assets/components/UploadModelFooter.vue   |  2 +-
 .../assets/components/UploadModelProgress.vue |  2 +-
 .../components/UploadModelUpgradeModal.vue    |  2 +-
 .../UploadModelUpgradeModalFooter.vue         |  4 +-
 .../assets/components/UploadModelUrlInput.vue |  8 +--
 .../components/modelInfo/ModelInfoField.vue   |  2 +-
 .../components/modelInfo/ModelInfoPanel.vue   | 26 ++++-----
 .../cloud/onboarding/CloudAuthTimeoutView.vue |  4 +-
 .../CloudSubscriptionRedirectView.vue         |  2 +-
 .../components/FreeTierDialogContent.vue      |  2 +-
 .../subscription/components/PricingTable.vue  | 50 ++++++++---------
 .../components/SubscriptionPanel.vue          | 10 ++--
 .../SubscriptionPanelContentLegacy.vue        | 20 +++----
 .../SubscriptionRequiredDialogContent.vue     | 12 ++--
 .../components/SwapNodeGroupRow.vue           | 26 ++++-----
 .../components/SwapNodesCard.vue              |  2 +-
 .../secrets/components/SecretFormDialog.vue   |  2 +-
 .../secrets/components/SecretListItem.vue     |  4 +-
 .../secrets/components/SecretsPanel.vue       |  4 +-
 .../settings/components/SettingDialog.vue     |  2 +-
 src/platform/surveys/NightlySurveyPopover.vue |  4 +-
 .../components/ReleaseNotificationToast.vue   | 20 +++----
 .../updates/components/WhatsNewPopup.vue      |  8 +--
 .../sharing/components/AssetSectionList.vue   |  2 +-
 .../OpenSharedWorkflowDialogContent.vue       |  2 +-
 .../components/ShareAssetWarningBox.vue       |  2 +-
 .../components/ShareWorkflowDialogContent.vue |  2 +-
 .../profile/ComfyHubCreateProfileForm.vue     |  4 +-
 .../profile/ComfyHubPublishIntroPanel.vue     |  2 +-
 .../publish/ComfyHubDescribeStep.vue          | 10 ++--
 .../publish/ComfyHubExamplesStep.vue          |  6 +-
 .../publish/ComfyHubPublishDialog.vue         |  2 +-
 .../components/publish/ComfyHubPublishNav.vue |  2 +-
 .../publish/ComfyHubPublishWizardContent.vue  |  2 +-
 .../publish/ComfyHubThumbnailStep.vue         |  6 +-
 .../CurrentUserPopoverWorkspace.vue           |  6 +-
 .../components/PricingTableWorkspace.vue      | 56 +++++++++----------
 ...SubscriptionAddPaymentPreviewWorkspace.vue | 24 ++++----
 .../SubscriptionPanelContentWorkspace.vue     | 34 +++++------
 ...criptionRequiredDialogContentWorkspace.vue |  8 +--
 ...SubscriptionTransitionPreviewWorkspace.vue | 32 +++++------
 .../TopUpCreditsDialogContentWorkspace.vue    | 16 +++---
 .../components/WorkspaceSwitcherPopover.vue   |  2 +-
 .../dialogs/CreateWorkspaceDialogContent.vue  |  4 +-
 .../dialogs/DeleteWorkspaceDialogContent.vue  |  2 +-
 .../dialogs/EditWorkspaceDialogContent.vue    |  4 +-
 .../dialogs/InviteMemberDialogContent.vue     |  6 +-
 .../InviteMemberUpsellDialogContent.vue       |  2 +-
 .../dialogs/LeaveWorkspaceDialogContent.vue   |  2 +-
 .../dialogs/RemoveMemberDialogContent.vue     |  2 +-
 .../dialogs/RevokeInviteDialogContent.vue     |  2 +-
 .../dialogs/settings/MembersPanelContent.vue  | 16 +++---
 .../settings/WorkspacePanelContent.vue        |  4 +-
 .../components/toasts/InviteAcceptedToast.vue |  4 +-
 .../core/layout/transform/TransformPane.vue   |  2 +-
 .../extensions/linearMode/AppInput.vue        | 12 ++--
 .../extensions/linearMode/AppOutput.vue       |  8 +--
 .../extensions/linearMode/DropZone.vue        |  6 +-
 .../extensions/linearMode/ImagePreview.vue    |  4 +-
 .../extensions/linearMode/LatentPreview.vue   |  4 +-
 .../extensions/linearMode/LinearArrange.vue   | 12 ++--
 .../extensions/linearMode/LinearControls.vue  | 34 +++++------
 .../extensions/linearMode/LinearFeedback.vue  |  2 +-
 .../extensions/linearMode/LinearPreview.vue   | 10 ++--
 .../extensions/linearMode/LinearWelcome.vue   | 10 ++--
 .../extensions/linearMode/MobileDisplay.vue   | 28 +++++-----
 .../extensions/linearMode/OutputHistory.vue   | 14 ++---
 .../OutputHistoryActiveQueueItem.vue          |  8 +--
 .../linearMode/OutputHistoryItem.vue          |  2 +-
 .../linearMode/OutputPreviewItem.vue          |  4 +-
 .../extensions/linearMode/Preview3d.vue       |  2 +-
 .../extensions/linearMode/VideoPreview.vue    |  2 +-
 .../extensions/vueNodes/VideoPreview.vue      |  2 +-
 .../vueNodes/components/ImagePreview.vue      |  8 +--
 .../vueNodes/components/InputSlot.vue         | 10 ++--
 .../vueNodes/components/LGraphNode.vue        | 30 +++++-----
 .../vueNodes/components/LGraphNodePreview.vue |  6 +-
 .../vueNodes/components/LivePreview.vue       |  2 +-
 .../vueNodes/components/NodeBadge.vue         |  2 +-
 .../vueNodes/components/NodeBadges.vue        | 10 ++--
 .../vueNodes/components/NodeContent.vue       |  2 +-
 .../vueNodes/components/NodeHeader.vue        | 16 +++---
 .../vueNodes/components/NodeSlots.vue         | 10 ++--
 .../vueNodes/components/NodeWidgets.vue       |  4 +-
 .../vueNodes/components/OutputSlot.vue        |  4 +-
 .../vueNodes/components/SlotConnectionDot.vue |  8 +--
 .../components/ValueControlPopover.vue        | 12 ++--
 .../widgets/components/WidgetButton.vue       |  2 +-
 .../widgets/components/WidgetColorPicker.vue  |  4 +-
 .../WidgetInputNumberGradientSlider.vue       |  4 +-
 .../components/WidgetInputNumberInput.vue     |  6 +-
 .../components/WidgetInputNumberSlider.vue    |  2 +-
 .../widgets/components/WidgetInputText.vue    |  4 +-
 .../widgets/components/WidgetRecordAudio.vue  | 14 ++---
 .../components/WidgetSelectDefault.vue        |  4 +-
 .../widgets/components/WidgetTextarea.vue     |  8 +--
 .../widgets/components/WidgetToggleSwitch.vue |  2 +-
 .../widgets/components/WidgetWithControl.vue  |  4 +-
 .../components/audio/AudioPreviewPlayer.vue   |  4 +-
 .../components/form/FormSearchInput.vue       | 14 ++---
 .../components/form/FormSelectButton.vue      |  8 +--
 .../form/dropdown/FormDropdownInput.vue       | 14 ++---
 .../form/dropdown/FormDropdownMenuActions.vue | 20 +++----
 .../form/dropdown/FormDropdownMenuFilter.vue  |  6 +-
 .../form/dropdown/FormDropdownMenuItem.vue    | 18 +++---
 .../components/layout/WidgetLayoutField.vue   |  6 +-
 .../composables/useNumberWidgetButtonPt.ts    |  2 +-
 src/views/LinearView.vue                      | 24 ++++----
 .../manager/ImportFailedNodeContent.vue       |  4 +-
 .../components/manager/ManagerDialog.vue      |  6 +-
 .../manager/NodeConflictDialogContent.vue     |  6 +-
 .../manager/infoPanel/InfoPanel.vue           | 14 ++---
 .../manager/infoPanel/InfoPanelMultiItem.vue  |  8 +--
 .../infoPanel/tabs/DescriptionTabPanel.vue    |  6 +-
 .../infoPanel/tabs/WarningTabPanel.vue        |  2 +-
 .../manager/packBanner/PackBanner.vue         |  6 +-
 .../components/manager/packCard/PackCard.vue  |  6 +-
 278 files changed, 1027 insertions(+), 1027 deletions(-)

diff --git a/eslint.config.ts b/eslint.config.ts
index 892a94ab9c..f59be99063 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -127,7 +127,7 @@ export default defineConfig([
       // Off: may conflict with oxfmt formatting
       'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
       // Off: large batch change, enable and apply with `eslint --fix`
-      'better-tailwindcss/enforce-consistent-class-order': 'off',
+      'better-tailwindcss/enforce-consistent-class-order': 'error',
       'better-tailwindcss/enforce-canonical-classes': 'error',
       'better-tailwindcss/no-deprecated-classes': 'error'
     }
diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 498dc680bd..0ed3737133 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="size-full absolute top-0 left-0 z-999 pointer-events-none flex flex-col"
+    class="pointer-events-none absolute top-0 left-0 z-999 flex size-full flex-col"
   >
     <slot name="workflow-tabs" />
 
@@ -17,7 +17,7 @@
 
       <Splitter
         :key="splitterRefreshKey"
-        class="bg-transparent pointer-events-none border-none flex-1 overflow-hidden"
+        class="pointer-events-none flex-1 overflow-hidden border-none bg-transparent"
         :state-key="isSelectMode ? 'builder-splitter' : sidebarStateKey"
         state-storage="local"
         @resizestart="onResizestart"
@@ -30,10 +30,10 @@
           :class="
             sidebarLocation === 'left'
               ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+                  'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
                   sidebarPanelVisible && 'min-w-78'
                 )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+              : 'pointer-events-auto bg-comfy-menu-bg'
           "
           :min-size="
             sidebarLocation === 'left' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
@@ -60,7 +60,7 @@
           <slot name="topmenu" :sidebar-panel-visible />
 
           <Splitter
-            class="bg-transparent pointer-events-none border-none splitter-overlay-bottom mx-1 mb-1 flex-1"
+            class="splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1 border-none bg-transparent"
             layout="vertical"
             :pt:gutter="
               cn(
@@ -77,7 +77,7 @@
             </SplitterPanel>
             <SplitterPanel
               v-show="bottomPanelVisible && !focusMode"
-              class="bottom-panel border border-(--p-panel-border-color) max-w-full overflow-x-auto bg-comfy-menu-bg pointer-events-auto rounded-lg"
+              class="bottom-panel pointer-events-auto max-w-full overflow-x-auto rounded-lg border border-(--p-panel-border-color) bg-comfy-menu-bg"
             >
               <slot name="bottom-panel" />
             </SplitterPanel>
@@ -92,10 +92,10 @@
           :class="
             sidebarLocation === 'right'
               ? cn(
-                  'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
+                  'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
                   sidebarPanelVisible && 'min-w-78'
                 )
-              : 'bg-comfy-menu-bg pointer-events-auto'
+              : 'pointer-events-auto bg-comfy-menu-bg'
           "
           :min-size="
             sidebarLocation === 'right' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index fa99e032c2..5b4103a495 100644
--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="workspaceState.focusMode"
-    class="fixed z-9999 flex flex-row no-drag top-0 right-0"
+    class="no-drag fixed top-0 right-0 z-9999 flex flex-row"
   >
     <Button
       v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index 81dde281d2..b28cd81bb8 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -38,7 +38,7 @@
             ref="actionbarContainerRef"
             :class="
               cn(
-                'actionbar-container relative pointer-events-auto flex gap-2 h-12 items-center rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
+                'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
                 hasAnyError
                   ? 'border-destructive-background-hover'
                   : 'border-interface-stroke'
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 8ba658aabf..bb56630f90 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -19,12 +19,12 @@
         content: { class: isDocked ? 'p-0' : 'p-1' }
       }"
     >
-      <div class="relative flex items-center select-none gap-2">
+      <div class="relative flex items-center gap-2 select-none">
         <span
           ref="dragHandleRef"
           :class="
             cn(
-              'drag-handle cursor-grab w-3 h-max',
+              'drag-handle h-max w-3 cursor-grab',
               isDragging && 'cursor-grabbing'
             )
           "
@@ -423,18 +423,18 @@ const actionbarClass = computed(() =>
   cn(
     'w-[200px] border-dashed border-blue-500 opacity-80',
     'm-1.5 flex items-center justify-center self-stretch',
-    'rounded-md before:w-50 before:-ml-50 before:h-full',
+    'rounded-md before:-ml-50 before:h-full before:w-50',
     'pointer-events-auto',
     isMouseOverDropZone.value &&
-      'border-[3px] opacity-100 scale-105 shadow-[0_0_20px] shadow-blue-500'
+      'scale-105 border-[3px] opacity-100 shadow-[0_0_20px] shadow-blue-500'
   )
 )
 const panelClass = computed(() =>
   cn(
     'actionbar pointer-events-auto z-1300',
-    isDragging.value && 'select-none pointer-events-none',
+    isDragging.value && 'pointer-events-none select-none',
     isDocked.value
-      ? 'p-0 static border-none bg-transparent'
+      ? 'static border-none bg-transparent p-0'
       : 'fixed shadow-interface'
   )
 )
diff --git a/src/components/appMode/AppModeToolbar.vue b/src/components/appMode/AppModeToolbar.vue
index f4b6a8ec19..1433311579 100644
--- a/src/components/appMode/AppModeToolbar.vue
+++ b/src/components/appMode/AppModeToolbar.vue
@@ -42,7 +42,7 @@ function openTemplates() {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 pointer-events-auto">
+  <div class="pointer-events-auto flex flex-col gap-2">
     <WorkflowActionsDropdown source="app_mode_toolbar">
       <template #button="{ hasUnseenItems }">
         <Button
@@ -53,7 +53,7 @@ function openTemplates() {
           variant="secondary"
           size="unset"
           :aria-label="t('sideToolbar.labels.menu')"
-          class="relative h-10 rounded-lg pl-3 pr-2 gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+          class="relative h-10 gap-1 rounded-lg pr-2 pl-3 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
         >
           <i class="icon-[lucide--panels-top-left] size-4" />
           <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
@@ -83,7 +83,7 @@ function openTemplates() {
     </Button>
 
     <div
-      class="flex flex-col w-10 rounded-lg bg-secondary-background overflow-hidden"
+      class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
     >
       <Button
         v-tooltip.right="{
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index e50a77de95..b1a7f30b75 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -12,7 +12,7 @@
       size="sm"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
+          'pointer-events-none opacity-0 select-none': !isHovered
         })
       "
       :aria-label="tooltipText"
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index cee7223de4..fdedbdc536 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-testid="subgraph-breadcrumb"
-    class="subgraph-breadcrumb flex w-auto drop-shadow-(--interface-panel-drop-shadow) items-center -mt-4 pt-4"
+    class="subgraph-breadcrumb -mt-4 flex w-auto items-center pt-4 drop-shadow-(--interface-panel-drop-shadow)"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs
@@ -17,7 +17,7 @@
     <WorkflowActionsDropdown source="breadcrumb_subgraph_menu_selected" />
     <Button
       v-if="isInSubgraph"
-      class="back-button pointer-events-auto size-8 shrink-0 border border-transparent bg-transparent p-0 ml-1.5 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
+      class="back-button pointer-events-auto ml-1.5 size-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
       text
       severity="secondary"
       size="small"
diff --git a/src/components/builder/AppBuilder.vue b/src/components/builder/AppBuilder.vue
index a9013da2a4..eec084b203 100644
--- a/src/components/builder/AppBuilder.vue
+++ b/src/components/builder/AppBuilder.vue
@@ -204,7 +204,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
 )
 </script>
 <template>
-  <div class="flex font-bold p-2 border-border-subtle border-b items-center">
+  <div class="flex items-center border-b border-border-subtle p-2 font-bold">
     {{
       isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
     }}
@@ -217,7 +217,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     <div
       v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
       :key="`${nodeId}: ${widgetName}`"
-      :class="cn(dragClass, 'p-2 my-2 pointer-events-auto')"
+      :class="cn(dragClass, 'pointer-events-auto my-2 p-2')"
       :aria-label="`${widget?.label ?? widgetName} — ${node.title}`"
     >
       <div v-if="widget" class="pointer-events-none" inert>
@@ -228,7 +228,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           hidden-widget-actions
         />
       </div>
-      <div v-else class="text-muted-foreground text-sm p-1 pointer-events-none">
+      <div v-else class="pointer-events-none p-1 text-sm text-muted-foreground">
         {{ widgetName }}
         <p class="text-xs italic">
           ({{ t('linearMode.builder.unknownWidget') }})
@@ -241,14 +241,14 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     :label="t('nodeHelpPage.inputs')"
     enable-empty-state
     :disabled="!appModeStore.selectedInputs.length"
-    class="border-border-subtle border-b"
+    class="border-b border-border-subtle"
     :tooltip="`${t('linearMode.builder.inputsDesc')}\n${t('linearMode.builder.inputsExample')}`"
     :tooltip-delay="100"
   >
     <template #label>
       <div class="flex gap-3">
         {{ t('nodeHelpPage.inputs') }}
-        <i class="bg-muted-foreground icon-[lucide--circle-alert]" />
+        <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
       </div>
     </template>
     <template #empty>
@@ -271,7 +271,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           rename
         } in inputsWithState"
         :key="`${nodeId}: ${widgetName}`"
-        :class="cn(dragClass, 'bg-primary-background/30 p-2 my-2 rounded-lg')"
+        :class="cn(dragClass, 'my-2 rounded-lg bg-primary-background/30 p-2')"
         :title="label ?? widgetName"
         :sub-title="subLabel"
         :rename
@@ -296,7 +296,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     <template #label>
       <div class="flex gap-3">
         {{ t('nodeHelpPage.outputs') }}
-        <i class="bg-muted-foreground icon-[lucide--circle-alert]" />
+        <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
       </div>
     </template>
     <template #empty>
@@ -319,8 +319,8 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
         :class="
           cn(
             dragClass,
-            'bg-warning-background/40 p-2 my-2 rounded-lg',
-            index === 0 && 'ring-warning-background ring-2'
+            'my-2 rounded-lg bg-warning-background/40 p-2',
+            index === 0 && 'ring-2 ring-warning-background'
           )
         "
         :title
@@ -337,7 +337,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     <div
       :class="
         cn(
-          'absolute size-full pointer-events-auto',
+          'pointer-events-auto absolute size-full',
           hoveringSelectable ? 'cursor-pointer' : 'cursor-grab'
         )
       "
@@ -352,7 +352,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             v-for="[key, style] in renderedInputs"
             :key
             :style="toValue(style)"
-            class="fixed bg-primary-background/30 rounded-lg"
+            class="fixed rounded-lg bg-primary-background/30"
           />
         </template>
         <template v-else>
@@ -362,7 +362,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             :style="toValue(style)"
             :class="
               cn(
-                'fixed ring-warning-background ring-5 rounded-2xl',
+                'fixed rounded-2xl ring-5 ring-warning-background',
                 !isSelected && 'ring-warning-background/50'
               )
             "
@@ -370,17 +370,17 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             <div class="absolute top-0 right-0 size-8">
               <div
                 v-if="isSelected"
-                class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg cursor-pointer pointer-events-auto"
+                class="pointer-events-auto absolute -top-1/2 -right-1/2 size-full cursor-pointer rounded-lg bg-warning-background p-2"
                 @click.stop="
                   remove(appModeStore.selectedOutputs, (k) => k == key)
                 "
                 @pointerdown.stop
               >
-                <i class="icon-[lucide--check] bg-text-foreground size-full" />
+                <i class="bg-text-foreground icon-[lucide--check] size-full" />
               </div>
               <div
                 v-else
-                class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg cursor-pointer pointer-events-auto"
+                class="pointer-events-auto absolute -top-1/2 -right-1/2 size-full cursor-pointer rounded-lg bg-component-node-background ring-4 ring-warning-background/50 ring-inset"
                 @click.stop="appModeStore.selectedOutputs.push(key)"
                 @pointerdown.stop
               />
diff --git a/src/components/builder/BuilderMenu.vue b/src/components/builder/BuilderMenu.vue
index 7d33cc7a10..8eea6d95af 100644
--- a/src/components/builder/BuilderMenu.vue
+++ b/src/components/builder/BuilderMenu.vue
@@ -4,7 +4,7 @@
       <button
         :class="
           cn(
-            'absolute left-4 top-[calc(var(--workflow-tabs-height)+16px)] z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg py-2 pr-2 pl-3 shadow-interface transition-colors border-none',
+            'absolute top-[calc(var(--workflow-tabs-height)+16px)] left-4 z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg border-none py-2 pr-2 pl-3 shadow-interface transition-colors',
             'bg-secondary-background hover:bg-secondary-background-hover',
             'data-[state=open]:bg-secondary-background-hover'
           )
@@ -22,10 +22,10 @@
       <button
         :class="
           cn(
-            'flex w-full items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none',
+            'flex w-full items-center gap-3 rounded-md border-none bg-transparent px-3 py-2 text-sm',
             hasOutputs
               ? 'cursor-pointer hover:bg-secondary-background-hover'
-              : 'opacity-50 pointer-events-none'
+              : 'pointer-events-none opacity-50'
           )
         "
         :disabled="!hasOutputs"
@@ -36,7 +36,7 @@
       </button>
       <div class="my-1 border-t border-border-default" />
       <button
-        class="flex w-full cursor-pointer items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none hover:bg-secondary-background-hover"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md border-none bg-transparent px-3 py-2 text-sm hover:bg-secondary-background-hover"
         @click="onExitBuilder(close)"
       >
         <i class="icon-[lucide--square-pen] size-4" />
diff --git a/src/components/builder/BuilderToolbar.vue b/src/components/builder/BuilderToolbar.vue
index 78b5c01a59..9e5aa3f67c 100644
--- a/src/components/builder/BuilderToolbar.vue
+++ b/src/components/builder/BuilderToolbar.vue
@@ -13,7 +13,7 @@
               stepClasses,
               activeStep === step.id
                 ? 'bg-interface-builder-mode-background'
-                : 'hover:bg-secondary-background bg-transparent'
+                : 'bg-transparent hover:bg-secondary-background'
             )
           "
           :aria-current="activeStep === step.id ? 'step' : undefined"
@@ -32,7 +32,7 @@
         :is-select-active="isSelectStep"
         @switch="navigateToStep('builder:outputs')"
       >
-        <button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
+        <button :class="cn(stepClasses, 'bg-transparent opacity-30')">
           <StepBadge
             :step="defaultViewStep"
             :index="steps.length"
@@ -48,7 +48,7 @@
             stepClasses,
             activeStep === 'setDefaultView'
               ? 'bg-interface-builder-mode-background'
-              : 'hover:bg-secondary-background bg-transparent'
+              : 'bg-transparent hover:bg-secondary-background'
           )
         "
         @click="navigateToStep('setDefaultView')"
diff --git a/src/components/builder/ConnectOutputPopover.vue b/src/components/builder/ConnectOutputPopover.vue
index a3fdb591f7..11b45cc1b6 100644
--- a/src/components/builder/ConnectOutputPopover.vue
+++ b/src/components/builder/ConnectOutputPopover.vue
@@ -7,7 +7,7 @@
       side="bottom"
       :side-offset="8"
       :collision-padding="10"
-      class="z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade"
+      class="data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity]"
     >
       <div class="flex h-12 items-center justify-between px-4">
         <h3 class="text-sm font-medium text-base-foreground">
diff --git a/src/components/builder/IoItem.vue b/src/components/builder/IoItem.vue
index 260190a13d..2e31e94807 100644
--- a/src/components/builder/IoItem.vue
+++ b/src/components/builder/IoItem.vue
@@ -32,13 +32,13 @@ const entries = computed(() => {
 })
 </script>
 <template>
-  <div class="p-2 my-2 rounded-lg flex items-center-safe gap-2">
+  <div class="my-2 flex items-center-safe gap-2 rounded-lg p-2">
     <div
-      class="mr-auto flex-[4_1_0%] max-w-max min-w-0 truncate drag-handle inline"
+      class="drag-handle mr-auto inline max-w-max min-w-0 flex-[4_1_0%] truncate"
       v-text="title"
     />
     <div
-      class="flex-[2_1_0%] max-w-max min-w-0 truncate text-muted-foreground text-end drag-handle inline"
+      class="drag-handle inline max-w-max min-w-0 flex-[2_1_0%] truncate text-end text-muted-foreground"
       v-text="subTitle"
     />
     <Popover :entries>
diff --git a/src/components/builder/StepLabel.vue b/src/components/builder/StepLabel.vue
index c2404d2c3b..ba234ba1b8 100644
--- a/src/components/builder/StepLabel.vue
+++ b/src/components/builder/StepLabel.vue
@@ -4,7 +4,7 @@
       {{ step.title }}
     </span>
     <span
-      class="hidden whitespace-nowrap text-xs text-muted-foreground sm:inline"
+      class="hidden text-xs whitespace-nowrap text-muted-foreground sm:inline"
     >
       {{ step.subtitle }}
     </span>
diff --git a/src/components/button/IconGroup.vue b/src/components/button/IconGroup.vue
index 81a23c5ce2..06bc7dbbda 100644
--- a/src/components/button/IconGroup.vue
+++ b/src/components/button/IconGroup.vue
@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer bg-secondary-background',
+        'flex shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-secondary-background p-0 shadow-sm outline-hidden transition-all duration-200',
         backgroundClass
       )
     "
diff --git a/src/components/card/CardBottom.vue b/src/components/card/CardBottom.vue
index 4a0ae10475..31ade62ce0 100644
--- a/src/components/card/CardBottom.vue
+++ b/src/components/card/CardBottom.vue
@@ -14,6 +14,6 @@ const { fullHeight = true } = defineProps<{
 }>()
 
 const containerClasses = computed(() =>
-  cn('flex-1 w-full', fullHeight && 'h-full')
+  cn('w-full flex-1', fullHeight && 'h-full')
 )
 </script>
diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index 8b8f81944c..1a5dcb4951 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -59,7 +59,7 @@ const containerClasses = computed(() => {
     outline: cn(
       hasBorder && 'border-2 border-border-subtle',
       hasCursor && 'cursor-pointer',
-      'hover:border-border-subtle/50 transition-colors'
+      'transition-colors hover:border-border-subtle/50'
     )
   }
 
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
index b31e283dbc..e9f4979226 100644
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -19,9 +19,9 @@ const baseClasses =
 
 const variantStyles = {
   dark: 'bg-zinc-500/40 text-white/90',
-  light: cn('backdrop-blur-[2px] bg-base-background/50 text-base-foreground'),
+  light: cn('bg-base-background/50 text-base-foreground backdrop-blur-[2px]'),
   gray: cn(
-    'backdrop-blur-[2px] bg-modal-card-tag-background text-base-foreground'
+    'bg-modal-card-tag-background text-base-foreground backdrop-blur-[2px]'
   )
 }
 
diff --git a/src/components/common/DraggableList.vue b/src/components/common/DraggableList.vue
index 90ba9925b9..415a8225e0 100644
--- a/src/components/common/DraggableList.vue
+++ b/src/components/common/DraggableList.vue
@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
 })
 </script>
 <template>
-  <div ref="draggableItems" class="pb-2 px-2 space-y-0.5 mt-0.5">
+  <div ref="draggableItems" class="mt-0.5 space-y-0.5 px-2 pb-2">
     <slot
       drag-class="draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing"
     />
diff --git a/src/components/common/DropdownItem.vue b/src/components/common/DropdownItem.vue
index e6d55f7518..0ed17b2106 100644
--- a/src/components/common/DropdownItem.vue
+++ b/src/components/common/DropdownItem.vue
@@ -22,7 +22,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
 <template>
   <DropdownMenuSeparator
     v-if="item.separator"
-    class="h-px bg-border-subtle m-1"
+    class="m-1 h-px bg-border-subtle"
   />
   <DropdownMenuSub v-else-if="item.items">
     <DropdownMenuSubTrigger
@@ -58,7 +58,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     {{ item.label }}
     <div
       v-if="item.new"
-      class="ml-auto bg-primary-background rounded-full text-xxs font-bold px-1 flex leading-none items-center"
+      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>
diff --git a/src/components/common/DropdownMenu.vue b/src/components/common/DropdownMenu.vue
index 5adf58a9f3..880a7c4798 100644
--- a/src/components/common/DropdownMenu.vue
+++ b/src/components/common/DropdownMenu.vue
@@ -27,14 +27,14 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
 
 const itemClass = computed(() =>
   cn(
-    'data-highlighted:bg-secondary-background-hover data-disabled:pointer-events-none data-disabled:text-muted-foreground flex p-2 leading-none rounded-lg gap-1 cursor-pointer m-1',
+    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
     itemProp
   )
 )
 
 const contentClass = computed(() =>
   cn(
-    'z-1700 rounded-lg p-2 bg-base-background border border-border-subtle min-w-[220px] shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
+    'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-1700 min-w-[220px] rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[opacity,transform]',
     contentProp
   )
 )
diff --git a/src/components/common/MarqueeLine.vue b/src/components/common/MarqueeLine.vue
index 21b00f5e88..0d89ff07ea 100644
--- a/src/components/common/MarqueeLine.vue
+++ b/src/components/common/MarqueeLine.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="overflow-hidden @container mask-[linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:mask-none"
+    class="@container overflow-hidden mask-[linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:mask-none"
   >
     <span
-      class="whitespace-nowrap inline-block min-w-full text-center [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:animate-[marquee-scroll_3s_linear_infinite_alternate]"
+      class="inline-block min-w-full text-center whitespace-nowrap [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:animate-[marquee-scroll_3s_linear_infinite_alternate]"
     >
       <slot />
     </span>
diff --git a/src/components/common/OverlayIcon.vue b/src/components/common/OverlayIcon.vue
index bc68918f06..4e15006e8b 100644
--- a/src/components/common/OverlayIcon.vue
+++ b/src/components/common/OverlayIcon.vue
@@ -1,11 +1,11 @@
 <template>
-  <span class="relative inline-flex items-center justify-center size-[1em]">
+  <span class="relative inline-flex size-[1em] items-center justify-center">
     <i :class="mainIcon" class="text-[1em]" />
     <i
       :class="
         cn(
           subIcon,
-          'absolute leading-none pointer-events-none',
+          'pointer-events-none absolute leading-none',
           positionX === 'left' ? 'left-0' : 'right-0',
           positionY === 'top' ? 'top-0' : 'bottom-0'
         )
diff --git a/src/components/common/ScrubableNumberInput.vue b/src/components/common/ScrubableNumberInput.vue
index da6df65358..b8a39ecf05 100644
--- a/src/components/common/ScrubableNumberInput.vue
+++ b/src/components/common/ScrubableNumberInput.vue
@@ -8,7 +8,7 @@
       v-if="!hideButtons"
       :aria-label="t('g.decrement')"
       data-testid="decrement"
-      class="h-full aspect-8/7 rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
+      class="aspect-8/7 h-full rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
       :disabled="!canDecrement"
       tabindex="-1"
@@ -16,7 +16,7 @@
     >
       <i class="pi pi-minus" />
     </Button>
-    <div class="relative min-w-[4ch] flex-1 py-1.5 my-0.25">
+    <div class="relative my-0.25 min-w-[4ch] flex-1 py-1.5">
       <input
         ref="inputField"
         v-bind="inputAttrs"
@@ -24,7 +24,7 @@
         :disabled
         :class="
           cn(
-            'bg-transparent border-0 focus:outline-0 p-1 truncate text-sm absolute inset-0'
+            'absolute inset-0 truncate border-0 bg-transparent p-1 text-sm focus:outline-0'
           )
         "
         inputmode="decimal"
@@ -53,7 +53,7 @@
       v-if="!hideButtons"
       :aria-label="t('g.increment')"
       data-testid="increment"
-      class="h-full aspect-8/7 rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
+      class="aspect-8/7 h-full rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
       :disabled="!canIncrement"
       tabindex="-1"
diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 0d440fb709..ac0d9cae0a 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'relative flex w-full items-center gap-2 bg-comfy-input cursor-text text-comfy-input-foreground',
+        'relative flex w-full cursor-text items-center gap-2 bg-comfy-input text-comfy-input-foreground',
         customClass,
         wrapperStyle
       )
@@ -16,7 +16,7 @@
       unstyled
       :class="
         cn(
-          'absolute inset-0 size-full border-none outline-none bg-transparent text-sm',
+          'absolute inset-0 size-full border-none bg-transparent text-sm outline-none',
           isLarge ? 'pl-11' : 'pl-8'
         )
       "
@@ -26,7 +26,7 @@
       v-if="filterIcon"
       size="icon"
       variant="textonly"
-      class="filter-button absolute right-0 inset-y-0 m-0 p-0"
+      class="filter-button absolute inset-y-0 right-0 m-0 p-0"
       @click="$emit('showFilter', $event)"
     >
       <i :class="filterIcon" />
@@ -117,7 +117,7 @@ watchDebounced(
 const wrapperStyle = computed(() => {
   if (showBorder) {
     return cn(
-      'rounded-sm p-2 border border-solid border-border-default box-border',
+      'box-border rounded-sm border border-solid border-border-default p-2',
       isLarge.value ? 'h-10' : 'h-8'
     )
   }
diff --git a/src/components/common/SearchBoxV2.vue b/src/components/common/SearchBoxV2.vue
index 82998501d3..dba26c8aa6 100644
--- a/src/components/common/SearchBoxV2.vue
+++ b/src/components/common/SearchBoxV2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2 flex-auto">
+  <div class="flex flex-auto flex-col gap-2">
     <ComboboxRoot :ignore-filter="true" :open="false">
       <ComboboxAnchor
         :class="
@@ -7,7 +7,7 @@
             'relative flex w-full cursor-text items-center',
             'rounded-lg bg-comfy-input text-comfy-input-foreground',
             showBorder &&
-              'border border-solid border-border-default box-border',
+              'box-border border border-solid border-border-default',
             sizeClasses,
             className
           )
@@ -15,7 +15,7 @@
       >
         <i
           v-if="!searchTerm"
-          :class="cn('absolute left-4 pointer-events-none', icon, iconClass)"
+          :class="cn('pointer-events-none absolute left-4', icon, iconClass)"
         />
         <Button
           v-else
diff --git a/src/components/common/TextTickerMultiLine.vue b/src/components/common/TextTickerMultiLine.vue
index 1c90a60cfa..81506b01db 100644
--- a/src/components/common/TextTickerMultiLine.vue
+++ b/src/components/common/TextTickerMultiLine.vue
@@ -3,7 +3,7 @@
     <!-- Hidden single-line measurement element for overflow detection -->
     <div
       ref="measureRef"
-      class="invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap pointer-events-none"
+      class="pointer-events-none invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap"
       aria-hidden="true"
     >
       <slot />
@@ -13,7 +13,7 @@
       <slot />
     </MarqueeLine>
 
-    <div v-else class="flex flex-col w-full">
+    <div v-else class="flex w-full flex-col">
       <MarqueeLine>{{ firstLine }}</MarqueeLine>
       <MarqueeLine>{{ secondLine }}</MarqueeLine>
     </div>
diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index fc7f111cad..b7434be697 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -3,7 +3,7 @@
     v-bind="$attrs"
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
-    class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
+    class="tree-explorer bg-transparent px-2 py-0 2xl:px-4"
     :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"
diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index a098b872bb..1982f7d711 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -29,7 +29,7 @@
       />
     </div>
     <div
-      class="node-actions flex gap-1 touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+      class="node-actions flex gap-1 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100 touch:opacity-100"
     >
       <slot name="actions" :node="props.node" />
     </div>
diff --git a/src/components/common/TreeExplorerV2.vue b/src/components/common/TreeExplorerV2.vue
index 122d367996..e72f317a34 100644
--- a/src/components/common/TreeExplorerV2.vue
+++ b/src/components/common/TreeExplorerV2.vue
@@ -42,7 +42,7 @@
         class="z-9999 min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
       >
         <ContextMenuItem
-          class="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-highlight focus:bg-highlight"
+          class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
           @select="handleAddToFavorites"
         >
           <i
diff --git a/src/components/common/TreeExplorerV2Node.vue b/src/components/common/TreeExplorerV2Node.vue
index 4c65dd0936..e5140cb789 100644
--- a/src/components/common/TreeExplorerV2Node.vue
+++ b/src/components/common/TreeExplorerV2Node.vue
@@ -19,7 +19,7 @@
       @dragend="handleDragEnd"
     >
       <i class="icon-[comfy--node] size-4 shrink-0 text-muted-foreground" />
-      <span class="min-w-0 flex-1 truncate text-sm text-foreground">
+      <span class="text-foreground min-w-0 flex-1 truncate text-sm">
         <slot name="node" :node="item.value">
           {{ item.value.label }}
         </slot>
@@ -27,7 +27,7 @@
       <button
         :class="
           cn(
-            'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground hover:text-foreground',
+            'hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground',
             'opacity-0 group-hover/tree-node:opacity-100'
           )
         "
@@ -64,7 +64,7 @@
       <i
         :class="cn(item.value.icon, 'size-4 shrink-0 text-muted-foreground')"
       />
-      <span class="min-w-0 flex-1 truncate text-sm text-foreground">
+      <span class="text-foreground min-w-0 flex-1 truncate text-sm">
         <slot name="folder" :node="item.value">
           {{ item.value.label }}
         </slot>
diff --git a/src/components/common/VirtualGrid.vue b/src/components/common/VirtualGrid.vue
index 4361f8b266..dd8546c75c 100644
--- a/src/components/common/VirtualGrid.vue
+++ b/src/components/common/VirtualGrid.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable] scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
+    class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface) h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable]"
   >
     <div :style="topSpacerStyle" />
     <div :style="mergedGridStyle">
diff --git a/src/components/common/WorkflowActionsDropdown.vue b/src/components/common/WorkflowActionsDropdown.vue
index 1d45eb52cb..d3dbb17af6 100644
--- a/src/components/common/WorkflowActionsDropdown.vue
+++ b/src/components/common/WorkflowActionsDropdown.vue
@@ -55,7 +55,7 @@ function handleOpen(open: boolean) {
           variant="secondary"
           size="unset"
           :aria-label="t('breadcrumbsMenu.workflowActions')"
-          class="relative h-10 rounded-lg pl-3 pr-2 pointer-events-auto gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+          class="pointer-events-auto relative h-10 gap-1 rounded-lg pr-2 pl-3 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
         >
           <i
             class="size-4"
@@ -79,7 +79,7 @@ function handleOpen(open: boolean) {
         :align
         :side-offset="5"
         :collision-padding="10"
-        class="z-1000 rounded-lg px-2 py-3 min-w-56 bg-base-background shadow-interface border border-border-subtle"
+        class="z-1000 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
       >
         <WorkflowActionsList :items="menuItems" />
       </DropdownMenuContent>
diff --git a/src/components/common/WorkflowActionsList.vue b/src/components/common/WorkflowActionsList.vue
index ca93793c22..d17c0db0a9 100644
--- a/src/components/common/WorkflowActionsList.vue
+++ b/src/components/common/WorkflowActionsList.vue
@@ -22,7 +22,7 @@ const {
     <component
       :is="separatorComponent"
       v-if="item.separator"
-      class="border-b w-full border-border-subtle my-1"
+      class="my-1 w-full border-b border-border-subtle"
     />
     <component
       :is="itemComponent"
@@ -30,11 +30,11 @@ const {
       :disabled="item.disabled"
       :class="
         cn(
-          'flex min-h-6 p-2 items-center gap-2 self-stretch rounded-sm outline-none',
+          'flex min-h-6 items-center gap-2 self-stretch rounded-sm p-2 outline-none',
           !item.disabled && item.command && 'cursor-pointer',
           'data-highlighted:bg-secondary-background-hover',
           !item.disabled && 'hover:bg-secondary-background-hover',
-          'data-disabled:opacity-50 data-disabled:cursor-default'
+          'data-disabled:cursor-default data-disabled:opacity-50'
         )
       "
       @select="() => item.command?.()"
@@ -44,7 +44,7 @@ const {
       <span class="flex-1">{{ item.label }}</span>
       <span
         v-if="item.badge"
-        class="rounded-full uppercase ml-3 flex items-center gap-1 bg-(--primary-background) px-1.5 py-0.5 text-xxs text-base-foreground"
+        class="ml-3 flex items-center gap-1 rounded-full bg-(--primary-background) px-1.5 py-0.5 text-xxs text-base-foreground uppercase"
       >
         {{ item.badge }}
       </span>
diff --git a/src/components/dialog/confirm/ConfirmBody.vue b/src/components/dialog/confirm/ConfirmBody.vue
index 76b5b8e53b..5c6a6e9d3d 100644
--- a/src/components/dialog/confirm/ConfirmBody.vue
+++ b/src/components/dialog/confirm/ConfirmBody.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col wrap-break-word px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
+    class="flex flex-col border-t border-border-default px-4 py-2 text-sm wrap-break-word text-muted-foreground"
   >
     <p v-if="promptTextReal">
       {{ promptTextReal }}
diff --git a/src/components/dialog/confirm/ConfirmFooter.vue b/src/components/dialog/confirm/ConfirmFooter.vue
index 175dc919ed..da3405a8c3 100644
--- a/src/components/dialog/confirm/ConfirmFooter.vue
+++ b/src/components/dialog/confirm/ConfirmFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="w-full flex flex-wrap gap-2 justify-end px-2 pb-2">
+  <section class="flex w-full flex-wrap justify-end gap-2 px-2 pb-2">
     <Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
       {{ cancelTextX }}
     </Button>
diff --git a/src/components/dialog/confirm/ConfirmHeader.vue b/src/components/dialog/confirm/ConfirmHeader.vue
index 3c83377331..c0a85f8bc0 100644
--- a/src/components/dialog/confirm/ConfirmHeader.vue
+++ b/src/components/dialog/confirm/ConfirmHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center gap-2 p-4 font-bold text-sm text-base-foreground font-inter"
+    class="flex items-center gap-2 p-4 font-inter text-sm font-bold text-base-foreground"
   >
     <span v-if="title" class="flex-auto">{{ title }}</span>
   </div>
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index c7e0209ae7..cc5c730142 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap wrap-break-word"
+    class="m-2 mt-4 flex flex-col gap-6 wrap-break-word whitespace-pre-wrap"
   >
     <div>
       <span>{{ message }}</span>
@@ -40,12 +40,12 @@
           v-if="doNotAskAgain"
           keypath="missingModelsDialog.reEnableInSettings"
           tag="span"
-          class="text-sm text-muted-foreground ml-8"
+          class="ml-8 text-sm text-muted-foreground"
         >
           <template #link>
             <Button
               variant="textonly"
-              class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
+              class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
               @click="openBlueprintOverwriteSetting"
             >
               {{ t('missingModelsDialog.reEnableInSettingsLink') }}
diff --git a/src/components/dialog/content/MissingModelsContent.vue b/src/components/dialog/content/MissingModelsContent.vue
index 2559c4cc11..701c010f0c 100644
--- a/src/components/dialog/content/MissingModelsContent.vue
+++ b/src/components/dialog/content/MissingModelsContent.vue
@@ -8,7 +8,7 @@
       </p>
 
       <div
-        class="flex max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
+        class="flex scrollbar-custom max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background"
       >
         <div
           v-for="model in processedModels"
@@ -17,13 +17,13 @@
         >
           <div class="flex items-center gap-2 overflow-hidden">
             <span
-              class="min-w-0 truncate text-sm text-foreground"
+              class="text-foreground min-w-0 truncate text-sm"
               :title="model.name"
             >
               {{ model.name }}
             </span>
             <span
-              class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold uppercase text-muted-foreground"
+              class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold text-muted-foreground uppercase"
             >
               {{ model.badgeLabel }}
             </span>
@@ -81,7 +81,7 @@
         </div>
       </div>
 
-      <p class="m-0 text-xs/5 text-muted-foreground whitespace-pre-line">
+      <p class="m-0 text-xs/5 whitespace-pre-line text-muted-foreground">
         {{ $t('missingModelsDialog.footerDescription') }}
       </p>
 
@@ -90,7 +90,7 @@
         class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
       >
         <i
-          class="icon-[lucide--triangle-alert] mt-0.5 size-4 shrink-0 text-warning-background"
+          class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
         />
         <div class="flex flex-col gap-1">
           <p class="m-0 text-xs/5 font-semibold text-warning-background">
diff --git a/src/components/dialog/content/MissingNodesContent.vue b/src/components/dialog/content/MissingNodesContent.vue
index 1e93bb59d7..c5a4f17990 100644
--- a/src/components/dialog/content/MissingNodesContent.vue
+++ b/src/components/dialog/content/MissingNodesContent.vue
@@ -23,7 +23,7 @@
         <!-- Section header with Replace button -->
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-2">
-            <span class="text-xs font-semibold uppercase text-primary">
+            <span class="text-xs font-semibold text-primary uppercase">
               {{ $t('nodeReplacement.quickFixAvailable') }}
             </span>
             <div class="size-2 rounded-full bg-primary" />
@@ -35,7 +35,7 @@
             :disabled="selectedTypes.size === 0"
             @click="handleReplaceSelected"
           >
-            <i class="icon-[lucide--refresh-cw] mr-1.5 size-4" />
+            <i class="mr-1.5 icon-[lucide--refresh-cw] size-4" />
             {{
               $t('nodeReplacement.replaceSelected', {
                 count: selectedTypes.size
@@ -46,7 +46,7 @@
 
         <!-- Replaceable nodes list -->
         <div
-          class="flex max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
+          class="flex scrollbar-custom max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background"
         >
           <!-- Select All row (sticky header) -->
           <div
@@ -55,7 +55,7 @@
                 'sticky top-0 z-10 flex items-center gap-3 border-b border-border-default bg-secondary-background px-3 py-2',
                 pendingNodes.length > 0
                   ? 'cursor-pointer hover:bg-secondary-background-hover'
-                  : 'opacity-50 pointer-events-none'
+                  : 'pointer-events-none opacity-50'
               )
             "
             tabindex="0"
@@ -77,14 +77,14 @@
             >
               <i
                 v-if="isAllSelected"
-                class="icon-[lucide--check] text-bold text-xs text-base-foreground"
+                class="text-bold icon-[lucide--check] text-xs text-base-foreground"
               />
               <i
                 v-else-if="isSomeSelected"
-                class="icon-[lucide--minus] text-bold text-xs text-base-foreground"
+                class="text-bold icon-[lucide--minus] text-xs text-base-foreground"
               />
             </div>
-            <span class="text-xs font-medium uppercase text-muted-foreground">
+            <span class="text-xs font-medium text-muted-foreground uppercase">
               {{ $t('nodeReplacement.compatibleAlternatives') }}
             </span>
           </div>
@@ -97,7 +97,7 @@
               cn(
                 'flex items-center gap-3 px-3 py-2',
                 replacedTypes.has(node.label)
-                  ? 'opacity-50 pointer-events-none'
+                  ? 'pointer-events-none opacity-50'
                   : 'cursor-pointer hover:bg-secondary-background-hover'
               )
             "
@@ -124,24 +124,24 @@
                 v-if="
                   replacedTypes.has(node.label) || selectedTypes.has(node.label)
                 "
-                class="icon-[lucide--check] text-bold text-xs text-base-foreground"
+                class="text-bold icon-[lucide--check] text-xs text-base-foreground"
               />
             </div>
             <div class="flex flex-col gap-0.5">
               <div class="flex items-center gap-2">
                 <span
                   v-if="replacedTypes.has(node.label)"
-                  class="inline-flex h-4 items-center rounded-full border border-success bg-success/10 px-1.5 text-xxxs font-semibold uppercase text-success"
+                  class="border-success bg-success/10 text-success inline-flex h-4 items-center rounded-full border px-1.5 text-xxxs font-semibold uppercase"
                 >
                   {{ $t('nodeReplacement.replaced') }}
                 </span>
                 <span
                   v-else
-                  class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold uppercase text-primary"
+                  class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold text-primary uppercase"
                 >
                   {{ $t('nodeReplacement.replaceable') }}
                 </span>
-                <span class="text-sm text-foreground">
+                <span class="text-foreground text-sm">
                   {{ node.label }}
                 </span>
               </div>
@@ -160,7 +160,7 @@
       >
         <!-- Section header -->
         <div class="flex items-center gap-2">
-          <span class="text-xs font-semibold uppercase text-error">
+          <span class="text-xs font-semibold text-error uppercase">
             {{ $t('nodeReplacement.installationRequired') }}
           </span>
           <i class="icon-[lucide--info] text-xs text-error" />
@@ -168,7 +168,7 @@
 
         <!-- Non-replaceable nodes list -->
         <div
-          class="flex flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
+          class="flex scrollbar-custom flex-col overflow-y-auto rounded-lg bg-secondary-background"
         >
           <div
             v-for="node in nonReplaceableNodes"
@@ -179,11 +179,11 @@
               <div class="flex flex-col gap-0.5">
                 <div class="flex items-center gap-2">
                   <span
-                    class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold uppercase text-error"
+                    class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold text-error uppercase"
                   >
                     {{ $t('nodeReplacement.notReplaceable') }}
                   </span>
-                  <span class="text-sm text-foreground">
+                  <span class="text-foreground text-sm">
                     {{ node.label }}
                   </span>
                 </div>
@@ -209,9 +209,9 @@
         class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
       >
         <i
-          class="icon-[lucide--triangle-alert] mt-0.5 size-4 shrink-0 text-warning-background"
+          class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
         />
-        <p class="m-0 text-xs/5 text-neutral-foreground">
+        <p class="text-neutral-foreground m-0 text-xs/5">
           <i18n-t keypath="nodeReplacement.instructionMessage">
             <template #red>
               <span class="text-error">{{
diff --git a/src/components/dialog/content/MissingNodesFooter.vue b/src/components/dialog/content/MissingNodesFooter.vue
index f070d9c32d..d9a144e3d0 100644
--- a/src/components/dialog/content/MissingNodesFooter.vue
+++ b/src/components/dialog/content/MissingNodesFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full flex-col gap-2 py-2 px-4">
+  <div class="flex w-full flex-col gap-2 px-4 py-2">
     <div class="flex flex-col gap-1 text-sm text-muted-foreground">
       <div class="flex items-center gap-1">
         <input
@@ -16,12 +16,12 @@
         v-if="doNotAskAgain"
         keypath="missingModelsDialog.reEnableInSettings"
         tag="span"
-        class="text-sm text-muted-foreground ml-6"
+        class="ml-6 text-sm text-muted-foreground"
       >
         <template #link>
           <Button
             variant="textonly"
-            class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
+            class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
             @click="openShowMissingNodesSetting"
           >
             {{ $t('missingModelsDialog.reEnableInSettingsLink') }}
diff --git a/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue b/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
index 158d6938fc..1035979597 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
@@ -3,8 +3,8 @@
     class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
   >
     <!-- Header -->
-    <div class="flex p-8 items-center justify-between">
-      <h2 class="text-lg font-bold text-base-foreground m-0">
+    <div class="flex items-center justify-between p-8">
+      <h2 class="m-0 text-lg font-bold text-base-foreground">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
@@ -12,7 +12,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         @click="() => handleClose()"
       >
         <i class="icon-[lucide--x] size-6" />
@@ -20,7 +20,7 @@
     </div>
     <p
       v-if="isInsufficientCredits"
-      class="text-sm text-muted-foreground m-0 px-8"
+      class="m-0 px-8 text-sm text-muted-foreground"
     >
       {{ $t('credits.topUp.insufficientWorkflowMessage') }}
     </p>
@@ -39,7 +39,7 @@
           size="lg"
           :class="
             cn(
-              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
+              'focus-visible:ring-secondary-foreground h-10 w-full text-base font-medium',
               selectedPreset === amount && 'bg-secondary-background-selected'
             )
           "
@@ -95,7 +95,7 @@
 
     <p
       v-if="isBelowMin"
-      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+      class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
     >
       <i class="icon-[lucide--component] size-4" />
       {{
@@ -106,7 +106,7 @@
     </p>
     <p
       v-if="showCeilingWarning"
-      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+      class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
     >
       <i class="icon-[lucide--component] size-4" />
       {{
@@ -123,7 +123,7 @@
       >
     </p>
 
-    <div class="p-8 flex flex-col gap-8">
+    <div class="flex flex-col gap-8 p-8">
       <Button
         :disabled="!isValidAmount || loading"
         :loading="loading"
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.vue b/src/components/dialog/content/credit/CreditTopUpOption.vue
index c67c273a27..90985020d6 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all duration-200"
+    class="flex cursor-pointer items-center justify-between rounded-lg p-2 transition-all duration-200"
     :class="[
       selected
-        ? 'bg-secondary-background border-2 border-border-default'
-        : 'bg-component-node-disabled hover:bg-secondary-background border-2 border-transparent'
+        ? 'border-2 border-border-default bg-secondary-background'
+        : 'bg-component-node-disabled border-2 border-transparent hover:bg-secondary-background'
     ]"
     @click="$emit('select')"
   >
diff --git a/src/components/dialog/content/setting/UserPanel.vue b/src/components/dialog/content/setting/UserPanel.vue
index 534da27cff..705baf26c0 100644
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -67,7 +67,7 @@
             v-if="!isApiKeyLogin"
             keypath="auth.deleteAccount.contactSupport"
             tag="p"
-            class="text-muted text-sm"
+            class="text-sm text-muted"
           >
             <template #email>
               <a href="mailto:support@comfy.org" class="underline"
diff --git a/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue b/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
index 1ef9090686..5c5c39ba19 100644
--- a/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
+++ b/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('subscription.cancelDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         :disabled="isLoading"
         @click="onClose"
diff --git a/src/components/error/ErrorOverlay.vue b/src/components/error/ErrorOverlay.vue
index 65935b834d..aefda39435 100644
--- a/src/components/error/ErrorOverlay.vue
+++ b/src/components/error/ErrorOverlay.vue
@@ -4,7 +4,7 @@
     enter-from-class="-translate-y-3 opacity-0"
     enter-to-class="translate-y-0 opacity-100"
   >
-    <div v-if="isVisible" class="flex justify-end w-full pointer-events-none">
+    <div v-if="isVisible" class="pointer-events-none flex w-full justify-end">
       <div
         role="alert"
         aria-live="assertive"
@@ -32,12 +32,12 @@
             <li
               v-for="(message, idx) in groupedErrorMessages"
               :key="idx"
-              class="flex items-baseline gap-2 text-sm/snug text-muted-foreground min-w-0"
+              class="flex min-w-0 items-baseline gap-2 text-sm/snug text-muted-foreground"
             >
               <span
                 class="mt-1.5 size-1 shrink-0 rounded-full bg-muted-foreground"
               />
-              <span class="wrap-break-word line-clamp-3 whitespace-pre-wrap">{{
+              <span class="line-clamp-3 wrap-break-word whitespace-pre-wrap">{{
                 message
               }}</span>
             </li>
diff --git a/src/components/gradientslider/GradientSlider.vue b/src/components/gradientslider/GradientSlider.vue
index 76ea0f29a3..e2ab617dde 100644
--- a/src/components/gradientslider/GradientSlider.vue
+++ b/src/components/gradientslider/GradientSlider.vue
@@ -74,7 +74,7 @@ const pressed = ref(false)
       <SliderThumb
         :class="
           cn(
-            'block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25 top-1/2',
+            'top-1/2 block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25',
             'transition-[color,box-shadow,background-color]',
             'before:absolute before:-inset-1.5 before:block before:rounded-full before:bg-transparent',
             'hover:ring-2 hover:ring-black/40 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-hidden',
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index ab8603138f..c4797a3f97 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -6,7 +6,7 @@
     <template v-if="showUI" #workflow-tabs>
       <div
         v-if="workflowTabsPosition === 'Topbar'"
-        class="workflow-tabs-container pointer-events-auto relative w-full h-(--workflow-tabs-height)"
+        class="workflow-tabs-container pointer-events-auto relative h-(--workflow-tabs-height) w-full"
       >
         <!-- Native drag area for Electron -->
         <div
diff --git a/src/components/graph/NodeContextMenu.vue b/src/components/graph/NodeContextMenu.vue
index 108d0f487e..5c06c79f65 100644
--- a/src/components/graph/NodeContextMenu.vue
+++ b/src/components/graph/NodeContextMenu.vue
@@ -2,7 +2,7 @@
   <ContextMenu
     ref="contextMenu"
     :model="menuItems"
-    class="max-h-[80vh] md:max-h-none overflow-y-auto md:overflow-y-visible"
+    class="max-h-[80vh] overflow-y-auto md:max-h-none md:overflow-y-visible"
     @show="onMenuShow"
     @hide="onMenuHide"
   >
diff --git a/src/components/graph/selectionToolbox/ColorPickerMenu.vue b/src/components/graph/selectionToolbox/ColorPickerMenu.vue
index 6b59caa4f0..188b5ed397 100644
--- a/src/components/graph/selectionToolbox/ColorPickerMenu.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerMenu.vue
@@ -23,7 +23,7 @@
       :class="
         isColorSubmenu
           ? 'flex flex-col gap-1 p-2'
-          : 'flex flex-col p-2 min-w-40'
+          : 'flex min-w-40 flex-col p-2'
       "
     >
       <div
@@ -31,12 +31,12 @@
         :key="subOption.label"
         :class="
           cn(
-            'hover:bg-secondary-background-hover rounded-sm cursor-pointer',
+            'cursor-pointer rounded-sm hover:bg-secondary-background-hover',
             isColorSubmenu
-              ? 'size-7 flex items-center justify-center'
+              ? 'flex size-7 items-center justify-center'
               : 'flex items-center gap-2 px-3 py-1.5 text-sm',
             subOption.disabled
-              ? 'cursor-not-allowed pointer-events-none text-node-icon-disabled'
+              ? 'pointer-events-none cursor-not-allowed text-node-icon-disabled'
               : 'hover:bg-secondary-background-hover'
           )
         "
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index da621696e1..c599ee32b1 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -33,7 +33,7 @@
           <span class="menu-label">{{ menuItem.label }}</span>
           <i
             v-if="menuItem.showExternalIcon"
-            class="icon-[lucide--external-link] text-primary size-4 ml-auto"
+            class="ml-auto icon-[lucide--external-link] size-4 text-primary"
           />
           <i
             v-if="menuItem.key === 'more'"
diff --git a/src/components/honeyToast/HoneyToast.vue b/src/components/honeyToast/HoneyToast.vue
index 924de3cbdd..4ecc539258 100644
--- a/src/components/honeyToast/HoneyToast.vue
+++ b/src/components/honeyToast/HoneyToast.vue
@@ -31,10 +31,10 @@ function toggle() {
         <div
           :class="
             cn(
-              'overflow-hidden transition-all duration-300 min-w-0 max-w-full',
+              'max-w-full min-w-0 overflow-hidden transition-all duration-300',
               isExpanded
-                ? 'w-full max-h-100 sm:w-[max(400px,40vw)]'
-                : 'w-0 max-h-0'
+                ? 'max-h-100 w-full sm:w-[max(400px,40vw)]'
+                : 'max-h-0 w-0'
             )
           "
         >
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 1274eab042..8ea06f1eee 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -16,7 +16,7 @@
     :pt="{
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'h-10 relative inline-flex cursor-pointer select-none',
+          'relative inline-flex h-10 cursor-pointer select-none',
           'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
           'border-[2.5px] border-solid',
@@ -24,7 +24,7 @@
             ? 'border-node-component-border'
             : 'border-transparent',
           'focus-within:border-node-component-border',
-          { 'opacity-60 cursor-default': props.disabled }
+          { 'cursor-default opacity-60': props.disabled }
         )
       }),
       labelContainer: {
@@ -62,7 +62,7 @@
       // Option row hover and focus tone
       option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'flex gap-2 items-center h-10 px-2 rounded-lg cursor-pointer',
+          'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
           'hover:bg-secondary-background-hover',
           // Add focus/highlight state for keyboard navigation
           context?.focused &&
@@ -150,7 +150,7 @@
     <template #option="slotProps">
       <div
         role="button"
-        class="flex items-center gap-2 cursor-pointer"
+        class="flex cursor-pointer items-center gap-2"
         :style="popoverStyle"
       >
         <div
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 74485de35c..85d3415b03 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -40,7 +40,7 @@
       },
       overlay: {
         class: cn(
-          'mt-2 p-2 rounded-lg',
+          'mt-2 rounded-lg p-2',
           'bg-base-background text-base-foreground',
           'border border-solid border-border-default'
         )
@@ -57,7 +57,7 @@
       option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
         class: cn(
           // Row layout
-          'flex items-center justify-between gap-3 px-2 py-3 rounded-sm',
+          'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
           'hover:bg-secondary-background-hover',
           // Add focus state for keyboard navigation
           context.focused && 'bg-secondary-background-hover',
diff --git a/src/components/load3d/controls/PopupSlider.vue b/src/components/load3d/controls/PopupSlider.vue
index d51a2e5b19..b8e35b125d 100644
--- a/src/components/load3d/controls/PopupSlider.vue
+++ b/src/components/load3d/controls/PopupSlider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative show-slider">
+  <div class="show-slider relative">
     <Button
       v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
       size="icon"
@@ -12,7 +12,7 @@
     </Button>
     <div
       v-show="showSlider"
-      class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface p-4 shadow-lg w-[150px]"
+      class="absolute top-0 left-12 w-[150px] rounded-lg bg-interface-menu-surface p-4 shadow-lg"
     >
       <Slider
         v-model="value"
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index 45c7afb242..3650388e4a 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -13,7 +13,7 @@
         :class="
           cn(
             'rounded-full',
-            isRecording && 'text-red-500 recording-button-blink'
+            isRecording && 'recording-button-blink text-red-500'
           )
         "
         :aria-label="
diff --git a/src/components/maskeditor/BrushSettingsPanel.vue b/src/components/maskeditor/BrushSettingsPanel.vue
index c422858716..4778d2cff3 100644
--- a/src/components/maskeditor/BrushSettingsPanel.vue
+++ b/src/components/maskeditor/BrushSettingsPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3 class="text-center text-[15px] font-sans text-descrip-text mt-2.5">
+    <h3 class="text-descrip-text mt-2.5 text-center font-sans text-[15px]">
       {{ t('maskEditor.brushSettings') }}
     </h3>
 
@@ -10,19 +10,19 @@
 
     <!-- Brush Shape -->
     <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-descrip-text">
+      <span class="text-descrip-text text-left font-sans text-xs">
         {{ t('maskEditor.brushShape') }}
       </span>
 
       <div
-        class="flex flex-row gap-2.5 items-center h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+        class="flex h-[50px] w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
       >
         <div
           class="maskEditor_sidePanelBrushShapeCircle hover:bg-comfy-menu-bg"
           :class="
             cn(
               store.brushSettings.type === BrushShape.Arc
-                ? 'bg-(--p-button-text-primary-color) active'
+                ? 'active bg-(--p-button-text-primary-color)'
                 : 'bg-transparent'
             )
           "
@@ -34,7 +34,7 @@
           :class="
             cn(
               store.brushSettings.type === BrushShape.Rect
-                ? 'bg-(--p-button-text-primary-color) active'
+                ? 'active bg-(--p-button-text-primary-color)'
                 : 'bg-transparent'
             )
           "
@@ -45,27 +45,27 @@
 
     <!-- Color -->
     <div class="flex flex-col gap-3 pb-3">
-      <span class="text-left text-xs font-sans text-descrip-text">
+      <span class="text-descrip-text text-left font-sans text-xs">
         {{ t('maskEditor.colorSelector') }}
       </span>
       <input
         ref="colorInputRef"
         v-model="store.rgbColor"
         type="color"
-        class="h-10 rounded-md cursor-pointer"
+        class="h-10 cursor-pointer rounded-md"
       />
     </div>
 
     <!-- Thickness -->
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-left text-xs font-sans text-descrip-text">
+        <span class="text-descrip-text text-left font-sans text-xs">
           {{ t('maskEditor.thickness') }}
         </span>
         <input
           v-model.number="brushSize"
           type="number"
-          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="1"
           :max="250"
           :step="1"
@@ -84,13 +84,13 @@
     <!-- Opacity -->
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-left text-xs font-sans text-descrip-text">
+        <span class="text-descrip-text text-left font-sans text-xs">
           {{ t('maskEditor.opacity') }}
         </span>
         <input
           v-model.number="brushOpacity"
           type="number"
-          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="0"
           :max="1"
           :step="0.01"
@@ -109,13 +109,13 @@
     <!-- Hardness -->
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-left text-xs font-sans text-descrip-text">
+        <span class="text-descrip-text text-left font-sans text-xs">
           {{ t('maskEditor.hardness') }}
         </span>
         <input
           v-model.number="brushHardness"
           type="number"
-          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="0"
           :max="1"
           :step="0.01"
@@ -134,13 +134,13 @@
     <!-- Step Size -->
     <div class="flex flex-col gap-2">
       <div class="flex items-center justify-between">
-        <span class="text-left text-xs font-sans text-descrip-text">
+        <span class="text-descrip-text text-left font-sans text-xs">
           {{ t('maskEditor.stepSize') }}
         </span>
         <input
           v-model.number="brushStepSize"
           type="number"
-          class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
+          class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="1"
           :max="100"
           :step="1"
diff --git a/src/components/maskeditor/ColorSelectSettingsPanel.vue b/src/components/maskeditor/ColorSelectSettingsPanel.vue
index 4cf0a65d54..fd67be084c 100644
--- a/src/components/maskeditor/ColorSelectSettingsPanel.vue
+++ b/src/components/maskeditor/ColorSelectSettingsPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
+    <h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
       {{ t('maskEditor.colorSelectSettings') }}
     </h3>
 
diff --git a/src/components/maskeditor/ImageLayerSettingsPanel.vue b/src/components/maskeditor/ImageLayerSettingsPanel.vue
index 1b95424ac1..5022b1432f 100644
--- a/src/components/maskeditor/ImageLayerSettingsPanel.vue
+++ b/src/components/maskeditor/ImageLayerSettingsPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
+    <h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
       {{ t('maskEditor.layers') }}
     </h3>
 
@@ -13,12 +13,12 @@
       @update:model-value="onMaskOpacityChange"
     />
 
-    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
+    <span class="text-left font-sans text-xs text-(--descrip-text)">{{
       t('maskEditor.maskBlendingOptions')
     }}</span>
 
     <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] -mt-2 -mb-1.5"
+      class="relative -mt-2 -mb-1.5 flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px]"
     >
       <select
         class="maskEditor_sidePanelDropdown"
@@ -31,11 +31,11 @@
       </select>
     </div>
 
-    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
+    <span class="text-left font-sans text-xs text-(--descrip-text)">{{
       t('maskEditor.maskLayer')
     }}</span>
     <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+      class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
       :style="{
         border: store.activeLayer === 'mask' ? '2px solid #007acc' : 'none'
       }"
@@ -64,11 +64,11 @@
       </button>
     </div>
 
-    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
+    <span class="text-left font-sans text-xs text-(--descrip-text)">{{
       t('maskEditor.paintLayer')
     }}</span>
     <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+      class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
       :style="{
         border: store.activeLayer === 'rgb' ? '2px solid #007acc' : 'none'
       }"
@@ -104,11 +104,11 @@
       </button>
     </div>
 
-    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
+    <span class="text-left font-sans text-xs text-(--descrip-text)">{{
       t('maskEditor.baseImageLayer')
     }}</span>
     <div
-      class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
+      class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
     >
       <input
         type="checkbox"
diff --git a/src/components/maskeditor/MaskEditorContent.vue b/src/components/maskeditor/MaskEditorContent.vue
index 5bc3c1cfaa..89fdf262e2 100644
--- a/src/components/maskeditor/MaskEditorContent.vue
+++ b/src/components/maskeditor/MaskEditorContent.vue
@@ -13,29 +13,29 @@
     >
       <canvas
         ref="imgCanvasRef"
-        class="absolute top-0 left-0 size-full z-0"
+        class="absolute top-0 left-0 z-0 size-full"
         @contextmenu.prevent
       />
       <canvas
         ref="rgbCanvasRef"
-        class="absolute top-0 left-0 size-full z-10"
+        class="absolute top-0 left-0 z-10 size-full"
         @contextmenu.prevent
       />
       <canvas
         ref="maskCanvasRef"
-        class="absolute top-0 left-0 size-full z-30"
+        class="absolute top-0 left-0 z-30 size-full"
         @contextmenu.prevent
       />
       <!-- GPU Preview Canvas -->
       <canvas
         ref="gpuCanvasRef"
-        class="absolute top-0 left-0 size-full pointer-events-none"
+        class="pointer-events-none absolute top-0 left-0 size-full"
         :class="{
           'z-20': store.activeLayer === 'rgb',
           'z-40': store.activeLayer === 'mask'
         }"
       />
-      <div ref="canvasBackgroundRef" class="bg-white size-full" />
+      <div ref="canvasBackgroundRef" class="size-full bg-white" />
     </div>
 
     <div class="maskEditor-ui-container flex min-h-0 flex-1 flex-col">
diff --git a/src/components/maskeditor/PaintBucketSettingsPanel.vue b/src/components/maskeditor/PaintBucketSettingsPanel.vue
index 130db67bd4..672c752076 100644
--- a/src/components/maskeditor/PaintBucketSettingsPanel.vue
+++ b/src/components/maskeditor/PaintBucketSettingsPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
+    <h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
       {{ t('maskEditor.paintBucketSettings') }}
     </h3>
 
diff --git a/src/components/maskeditor/PointerZone.vue b/src/components/maskeditor/PointerZone.vue
index 082b16ca73..f7f75d5c58 100644
--- a/src/components/maskeditor/PointerZone.vue
+++ b/src/components/maskeditor/PointerZone.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="pointerZoneRef"
-    class="w-[calc(100%-4rem-220px)] h-full"
+    class="h-full w-[calc(100%-4rem-220px)]"
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
diff --git a/src/components/maskeditor/SidePanel.vue b/src/components/maskeditor/SidePanel.vue
index fb3c0905ee..c19c9dca18 100644
--- a/src/components/maskeditor/SidePanel.vue
+++ b/src/components/maskeditor/SidePanel.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="flex flex-col gap-3 pb-3 h-full items-stretch! bg-(--comfy-menu-bg) overflow-y-auto w-55 px-2.5"
+    class="flex h-full w-55 flex-col items-stretch! gap-3 overflow-y-auto bg-(--comfy-menu-bg) px-2.5 pb-3"
   >
-    <div class="w-full min-h-full">
+    <div class="min-h-full w-full">
       <SettingsPanelContainer />
 
-      <div class="w-full h-0.5 bg-(--border-color) mt-6 mb-1.5" />
+      <div class="mt-6 mb-1.5 h-0.5 w-full bg-(--border-color)" />
 
       <ImageLayerSettingsPanel :tool-manager="toolManager" />
     </div>
diff --git a/src/components/maskeditor/ToolPanel.vue b/src/components/maskeditor/ToolPanel.vue
index c0ccc3b26f..2bdc06ccfb 100644
--- a/src/components/maskeditor/ToolPanel.vue
+++ b/src/components/maskeditor/ToolPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full z-8888 flex flex-col justify-between bg-comfy-menu-bg">
+  <div class="z-8888 flex h-full flex-col justify-between bg-comfy-menu-bg">
     <div class="flex flex-col">
       <div
         v-for="tool in allTools"
@@ -19,7 +19,7 @@
     </div>
 
     <div
-      class="flex flex-col items-center cursor-pointer rounded-md mb-2 transition-colors duration-200 hover:bg-secondary-background-hover"
+      class="mb-2 flex cursor-pointer flex-col items-center rounded-md transition-colors duration-200 hover:bg-secondary-background-hover"
       :title="t('maskEditor.clickToResetZoom')"
       @click="onResetZoom"
     >
diff --git a/src/components/maskeditor/controls/DropdownControl.vue b/src/components/maskeditor/controls/DropdownControl.vue
index b4c8e66f02..0f4b0a8d23 100644
--- a/src/components/maskeditor/controls/DropdownControl.vue
+++ b/src/components/maskeditor/controls/DropdownControl.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-row gap-2.5 items-center min-h-6 relative">
-    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
+  <div class="relative flex min-h-6 flex-row items-center gap-2.5">
+    <span class="text-left font-sans text-xs text-(--descrip-text)">{{
       label
     }}</span>
     <select
-      class="absolute right-0 h-6 px-1.5 rounded-md border border-border-default transition-colors duration-100 bg-secondary-background focus:outline focus:outline-node-component-border"
+      class="absolute right-0 h-6 rounded-md border border-border-default bg-secondary-background px-1.5 transition-colors duration-100 focus:outline focus:outline-node-component-border"
       :value="modelValue"
       @change="onChange"
     >
diff --git a/src/components/maskeditor/controls/SliderControl.vue b/src/components/maskeditor/controls/SliderControl.vue
index 34570721bf..cecc8e3de0 100644
--- a/src/components/maskeditor/controls/SliderControl.vue
+++ b/src/components/maskeditor/controls/SliderControl.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
+    <span class="text-left font-sans text-xs text-(--descrip-text)">{{
       label
     }}</span>
     <input
diff --git a/src/components/maskeditor/controls/ToggleControl.vue b/src/components/maskeditor/controls/ToggleControl.vue
index f7de8eabd1..b14d24f8df 100644
--- a/src/components/maskeditor/controls/ToggleControl.vue
+++ b/src/components/maskeditor/controls/ToggleControl.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-row gap-2.5 items-center min-h-6 relative">
-    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
+  <div class="relative flex min-h-6 flex-row items-center gap-2.5">
+    <span class="text-left font-sans text-xs text-(--descrip-text)">{{
       label
     }}</span>
     <label class="maskEditor_sidePanelToggleContainer">
diff --git a/src/components/maskeditor/dialog/TopBarHeader.vue b/src/components/maskeditor/dialog/TopBarHeader.vue
index f2f3629c4f..5d505a5a3d 100644
--- a/src/components/maskeditor/dialog/TopBarHeader.vue
+++ b/src/components/maskeditor/dialog/TopBarHeader.vue
@@ -11,7 +11,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-current"
+            class="pointer-events-none h-6.25 w-6.25 fill-current"
           >
             <path
               d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"
@@ -26,7 +26,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
+            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
           >
             <path
               class="cls-1"
@@ -35,7 +35,7 @@
           </svg>
         </button>
 
-        <div class="h-5 border-l border-border" />
+        <div class="border-border h-5 border-l" />
 
         <button
           :class="iconButtonClass"
@@ -44,7 +44,7 @@
         >
           <svg
             viewBox="-6 -7 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
+            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
           >
             <path
               d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
@@ -59,7 +59,7 @@
         >
           <svg
             viewBox="-9 -7 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
+            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
           >
             <g transform="scale(-1, 1)">
               <path
@@ -76,7 +76,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
+            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
           >
             <path
               d="M7.5,1.5c-.28,0-.5.22-.5.5v11c0,.28.22.5.5.5s.5-.22.5-.5v-11c0-.28-.22-.5-.5-.5Z"
@@ -92,7 +92,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
+            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
           >
             <path
               d="M2,7.5c0-.28.22-.5.5-.5h11c.28,0,.5.22.5.5s-.22.5-.5.5h-11c-.28,0-.5-.22-.5-.5Z"
diff --git a/src/components/node/NodePreviewCard.vue b/src/components/node/NodePreviewCard.vue
index 639586542a..557369a66f 100644
--- a/src/components/node/NodePreviewCard.vue
+++ b/src/components/node/NodePreviewCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex w-50 flex-col overflow-hidden rounded-2xl bg-base-background border border-border-default"
+    class="flex w-50 flex-col overflow-hidden rounded-2xl border border-border-default bg-base-background"
   >
     <div ref="previewContainerRef" class="overflow-hidden p-3">
       <div ref="previewWrapperRef" class="origin-top-left scale-50">
@@ -11,14 +11,14 @@
     <!-- Content Section -->
     <div class="flex flex-col gap-2 p-3 pt-1">
       <!-- Title -->
-      <h3 class="text-xs font-semibold text-foreground m-0">
+      <h3 class="text-foreground m-0 text-xs font-semibold">
         {{ nodeDef.display_name }}
       </h3>
 
       <!-- Category Path -->
       <p
         v-if="showCategoryPath && nodeDef.category"
-        class="text-xs text-muted-foreground -mt-1"
+        class="-mt-1 text-xs text-muted-foreground"
       >
         {{ nodeDef.category.replaceAll('/', ' > ') }}
       </p>
@@ -32,7 +32,7 @@
       <!-- Description -->
       <p
         v-if="nodeDef.description"
-        class="text-[11px] font-normal leading-normal text-muted-foreground m-0"
+        class="m-0 text-[11px] leading-normal font-normal text-muted-foreground"
       >
         {{ nodeDef.description }}
       </p>
@@ -49,7 +49,7 @@
         class="flex flex-col gap-1"
       >
         <h4
-          class="text-xxs font-semibold uppercase tracking-wide text-muted-foreground m-0"
+          class="m-0 text-xxs font-semibold tracking-wide text-muted-foreground uppercase"
         >
           {{ $t('nodeHelpPage.inputs') }}
         </h4>
@@ -58,7 +58,7 @@
           :key="input.name"
           class="flex items-center justify-between gap-2 text-xxs"
         >
-          <span class="shrink-0 text-foreground">{{ input.name }}</span>
+          <span class="text-foreground shrink-0">{{ input.name }}</span>
           <span class="min-w-0 truncate text-muted-foreground">{{
             input.type
           }}</span>
@@ -71,7 +71,7 @@
         class="flex flex-col gap-1"
       >
         <h4
-          class="text-xxs font-semibold uppercase tracking-wide text-muted-foreground m-0"
+          class="m-0 text-xxs font-semibold tracking-wide text-muted-foreground uppercase"
         >
           {{ $t('nodeHelpPage.outputs') }}
         </h4>
@@ -80,7 +80,7 @@
           :key="output.name"
           class="flex items-center justify-between gap-2 text-xxs"
         >
-          <span class="shrink-0 text-foreground">{{ output.name }}</span>
+          <span class="text-foreground shrink-0">{{ output.name }}</span>
           <span class="min-w-0 truncate text-muted-foreground">{{
             output.type
           }}</span>
diff --git a/src/components/painter/WidgetPainter.vue b/src/components/painter/WidgetPainter.vue
index dfec444a11..6e5abbee3f 100644
--- a/src/components/painter/WidgetPainter.vue
+++ b/src/components/painter/WidgetPainter.vue
@@ -29,7 +29,7 @@
         <div
           v-show="cursorVisible"
           ref="cursorEl"
-          class="pointer-events-none absolute left-0 top-0 rounded-full border border-black/60 shadow-[0_0_0_1px_rgba(255,255,255,0.8)] will-change-transform"
+          class="pointer-events-none absolute top-0 left-0 rounded-full border border-black/60 shadow-[0_0_0_1px_rgba(255,255,255,0.8)] will-change-transform"
           :style="cursorSizeStyle"
         />
       </div>
@@ -109,7 +109,7 @@
           class="flex-1"
           @update:model-value="(v) => v?.length && (brushSize = v[0])"
         />
-        <span class="w-8 text-center text-xs text-node-text-muted">{{
+        <span class="text-node-text-muted w-8 text-center text-xs">{{
           brushSize
         }}</span>
       </div>
@@ -127,7 +127,7 @@
           <input
             type="color"
             :value="brushColorDisplay"
-            class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full"
+            class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-moz-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch-wrapper]:p-0"
             @input="
               (e) => (brushColorDisplay = (e.target as HTMLInputElement).value)
             "
@@ -135,14 +135,14 @@
           <span class="min-w-[4ch] truncate text-xs">{{
             brushColorDisplay
           }}</span>
-          <span class="ml-auto flex items-center text-xs text-node-text-muted">
+          <span class="text-node-text-muted ml-auto flex items-center text-xs">
             <input
               type="number"
               :value="brushOpacityPercent"
               min="0"
               max="100"
               step="1"
-              class="w-7 appearance-none border-0 bg-transparent text-right text-xs text-node-text-muted outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield]"
+              class="text-node-text-muted w-7 appearance-none border-0 bg-transparent text-right text-xs outline-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
               @click.stop
               @change="
                 (e) => {
@@ -177,7 +177,7 @@
               (v) => v?.length && (brushHardnessPercent = v[0])
             "
           />
-          <span class="w-8 text-center text-xs text-node-text-muted"
+          <span class="text-node-text-muted w-8 text-center text-xs"
             >{{ brushHardnessPercent }}%</span
           >
         </div>
@@ -201,7 +201,7 @@
             class="flex-1"
             @update:model-value="(v) => v?.length && (canvasWidth = v[0])"
           />
-          <span class="w-10 text-center text-xs text-node-text-muted">{{
+          <span class="text-node-text-muted w-10 text-center text-xs">{{
             canvasWidth
           }}</span>
         </div>
@@ -223,7 +223,7 @@
             class="flex-1"
             @update:model-value="(v) => v?.length && (canvasHeight = v[0])"
           />
-          <span class="w-10 text-center text-xs text-node-text-muted">{{
+          <span class="text-node-text-muted w-10 text-center text-xs">{{
             canvasHeight
           }}</span>
         </div>
@@ -240,7 +240,7 @@
           <input
             type="color"
             :value="backgroundColorDisplay"
-            class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full"
+            class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-moz-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch-wrapper]:p-0"
             @input="
               (e) =>
                 (backgroundColorDisplay = (e.target as HTMLInputElement).value)
diff --git a/src/components/queue/JobHistoryActionsMenu.vue b/src/components/queue/JobHistoryActionsMenu.vue
index bce91b577b..3e021fb029 100644
--- a/src/components/queue/JobHistoryActionsMenu.vue
+++ b/src/components/queue/JobHistoryActionsMenu.vue
@@ -67,12 +67,12 @@
                 class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
               />
               <span
-                class="flex flex-col items-start wrap-break-word text-left leading-tight"
+                class="flex flex-col items-start text-left leading-tight wrap-break-word"
               >
                 <span class="text-sm font-light">
                   {{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
                 </span>
-                <span class="text-xs text-text-secondary font-light">
+                <span class="text-xs font-light text-text-secondary">
                   {{
                     t(
                       'sideToolbar.queueProgressOverlay.clearHistoryMenuAssetsNote'
diff --git a/src/components/queue/QueueInlineProgressSummary.vue b/src/components/queue/QueueInlineProgressSummary.vue
index 30aedb91f7..69ad77c650 100644
--- a/src/components/queue/QueueInlineProgressSummary.vue
+++ b/src/components/queue/QueueInlineProgressSummary.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="shouldShow" class="flex justify-end">
     <div
-      class="flex items-center whitespace-nowrap text-[0.75rem] leading-[normal] drop-shadow-[1px_1px_8px_rgba(0,0,0,0.4)]"
+      class="flex items-center text-[0.75rem] leading-[normal] whitespace-nowrap drop-shadow-[1px_1px_8px_rgba(0,0,0,0.4)]"
       role="status"
       aria-live="polite"
       aria-atomic="true"
diff --git a/src/components/queue/QueueNotificationBanner.vue b/src/components/queue/QueueNotificationBanner.vue
index 5031808ea9..b57e5f3a91 100644
--- a/src/components/queue/QueueNotificationBanner.vue
+++ b/src/components/queue/QueueNotificationBanner.vue
@@ -45,7 +45,7 @@
       </div>
       <div class="flex h-full items-center">
         <span
-          class="overflow-hidden text-ellipsis text-center font-inter text-[12px] leading-normal font-normal text-base-foreground"
+          class="overflow-hidden text-center font-inter text-[12px] leading-normal font-normal text-ellipsis text-base-foreground"
         >
           {{ bannerText }}
         </span>
diff --git a/src/components/queue/QueueOverlayExpanded.vue b/src/components/queue/QueueOverlayExpanded.vue
index dc44e8b83c..526ea34f2e 100644
--- a/src/components/queue/QueueOverlayExpanded.vue
+++ b/src/components/queue/QueueOverlayExpanded.vue
@@ -20,7 +20,7 @@
       @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
     />
 
-    <div class="flex-1 min-h-0 overflow-y-auto">
+    <div class="min-h-0 flex-1 overflow-y-auto">
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
         @cancel-item="onCancelItemEvent"
diff --git a/src/components/queue/QueueProgressOverlay.vue b/src/components/queue/QueueProgressOverlay.vue
index 92ca04f2ee..ef16c19487 100644
--- a/src/components/queue/QueueProgressOverlay.vue
+++ b/src/components/queue/QueueProgressOverlay.vue
@@ -4,7 +4,7 @@
     :class="['flex', 'justify-end', 'w-full', 'pointer-events-none']"
   >
     <div
-      class="pointer-events-auto flex w-[350px] min-w-[310px] max-h-[60vh] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
+      class="pointer-events-auto flex max-h-[60vh] w-[350px] min-w-[310px] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
       :class="containerClass"
       @mouseenter="isHovered = true"
       @mouseleave="isHovered = false"
@@ -15,7 +15,7 @@
         v-model:selected-job-tab="selectedJobTab"
         v-model:selected-workflow-filter="selectedWorkflowFilter"
         v-model:selected-sort-mode="selectedSortMode"
-        class="flex-1 min-h-0"
+        class="min-h-0 flex-1"
         :header-title="headerTitle"
         :queued-count="queuedCount"
         :displayed-job-groups="displayedJobGroups"
diff --git a/src/components/queue/dialogs/QueueClearHistoryDialog.vue b/src/components/queue/dialogs/QueueClearHistoryDialog.vue
index 49882fd8f2..4fb9bacc3f 100644
--- a/src/components/queue/dialogs/QueueClearHistoryDialog.vue
+++ b/src/components/queue/dialogs/QueueClearHistoryDialog.vue
@@ -1,11 +1,11 @@
 <template>
   <section
-    class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface text-text-primary shadow-interface font-inter"
+    class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface font-inter text-text-primary shadow-interface"
   >
     <header
       class="flex items-center justify-between border-b border-interface-stroke p-4"
     >
-      <p class="m-0 text-[14px] font-normal leading-none">
+      <p class="m-0 text-[14px] leading-none font-normal">
         {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
       </p>
       <Button
diff --git a/src/components/queue/job/QueueJobItem.vue b/src/components/queue/job/QueueJobItem.vue
index 8d2b59a28f..68182f2991 100644
--- a/src/components/queue/job/QueueJobItem.vue
+++ b/src/components/queue/job/QueueJobItem.vue
@@ -66,7 +66,7 @@
       <div class="relative z-1 flex items-center gap-1">
         <div class="relative inline-flex items-center justify-center">
           <div
-            class="absolute left-1/2 top-1/2 size-10 -translate-1/2"
+            class="absolute top-1/2 left-1/2 size-10 -translate-1/2"
             @mouseenter.stop="onIconEnter"
             @mouseleave.stop="onIconLeave"
           />
diff --git a/src/components/rightSidePanel/RightSidePanel.vue b/src/components/rightSidePanel/RightSidePanel.vue
index cb46923e0d..6f0697932c 100644
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -250,8 +250,8 @@ function handleTitleCancel() {
   >
     <!-- Panel Header -->
     <section class="pt-1">
-      <div class="flex items-center justify-between pl-4 pr-3">
-        <h3 class="my-3.5 text-sm font-semibold line-clamp-2 cursor-default">
+      <div class="flex items-center justify-between pr-3 pl-4">
+        <h3 class="my-3.5 line-clamp-2 cursor-default text-sm font-semibold">
           <template v-if="allowTitleEdit">
             <EditableText
               :model-value="panelTitle"
@@ -264,7 +264,7 @@ function handleTitleCancel() {
             />
             <i
               v-if="!isEditing"
-              class="icon-[lucide--pencil] size-4 text-muted-foreground ml-2 content-center relative top-[2px] hover:text-base-foreground cursor-pointer shrink-0"
+              class="relative top-[2px] ml-2 icon-[lucide--pencil] size-4 shrink-0 cursor-pointer content-center text-muted-foreground hover:text-base-foreground"
               @click="isEditing = true"
             />
           </template>
@@ -298,7 +298,7 @@ function handleTitleCancel() {
           </Button>
         </div>
       </div>
-      <nav class="px-4 pb-2 pt-1 overflow-x-auto">
+      <nav class="overflow-x-auto px-4 pt-1 pb-2">
         <TabList
           :model-value="activeTab"
           @update:model-value="
@@ -310,7 +310,7 @@ function handleTitleCancel() {
           <Tab
             v-for="tab in tabs"
             :key="tab.value"
-            class="text-sm py-1 px-2 font-inter transition-all active:scale-95"
+            class="px-2 py-1 font-inter text-sm transition-all active:scale-95"
             :value="tab.value"
           >
             {{ tab.label() }}
diff --git a/src/components/rightSidePanel/errors/ErrorNodeCard.vue b/src/components/rightSidePanel/errors/ErrorNodeCard.vue
index 146ddcafaf..98b1746ee0 100644
--- a/src/components/rightSidePanel/errors/ErrorNodeCard.vue
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.vue
@@ -7,22 +7,22 @@
     >
       <span
         v-if="showNodeIdBadge"
-        class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold"
+        class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
       >
         #{{ card.nodeId }}
       </span>
       <span
         v-if="card.nodeTitle"
-        class="flex-1 text-sm text-muted-foreground truncate font-medium"
+        class="flex-1 truncate text-sm font-medium text-muted-foreground"
       >
         {{ card.nodeTitle }}
       </span>
-      <div class="flex items-center shrink-0">
+      <div class="flex shrink-0 items-center">
         <Button
           v-if="card.isSubgraphNode"
           variant="secondary"
           size="sm"
-          class="rounded-lg text-sm shrink-0 h-8"
+          class="h-8 shrink-0 rounded-lg text-sm"
           @click.stop="handleEnterSubgraph"
         >
           {{ t('rightSidePanel.enterSubgraph') }}
@@ -30,7 +30,7 @@
         <Button
           variant="textonly"
           size="icon-sm"
-          class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
+          class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
           :aria-label="t('rightSidePanel.locateNode')"
           @click.stop="handleLocateNode"
         >
@@ -40,7 +40,7 @@
     </div>
 
     <!-- Multiple Errors within one Card -->
-    <div class="divide-y divide-interface-stroke/20 space-y-4">
+    <div class="space-y-4 divide-y divide-interface-stroke/20">
       <!-- Card Content -->
       <div
         v-for="(error, idx) in card.errors"
@@ -50,7 +50,7 @@
         <!-- Error Message -->
         <p
           v-if="error.message"
-          class="m-0 text-sm/relaxed wrap-break-word whitespace-pre-wrap px-0.5 max-h-[4lh] overflow-y-auto"
+          class="m-0 max-h-[4lh] overflow-y-auto px-0.5 text-sm/relaxed wrap-break-word whitespace-pre-wrap"
         >
           {{ error.message }}
         </p>
@@ -60,13 +60,13 @@
           v-if="error.details"
           :class="
             cn(
-              'rounded-lg bg-secondary-background-hover p-2.5 overflow-y-auto border border-interface-stroke/30',
+              'overflow-y-auto rounded-lg border border-interface-stroke/30 bg-secondary-background-hover p-2.5',
               error.isRuntimeError ? 'max-h-[10lh]' : 'max-h-[6lh]'
             )
           "
         >
           <p
-            class="m-0 text-xs/relaxed text-muted-foreground wrap-break-word whitespace-pre-wrap font-mono"
+            class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
           >
             {{ error.details }}
           </p>
@@ -75,7 +75,7 @@
         <Button
           variant="secondary"
           size="sm"
-          class="w-full justify-center gap-2 h-8 text-xs"
+          class="h-8 w-full justify-center gap-2 text-xs"
           @click="handleCopyError(error)"
         >
           <i class="icon-[lucide--copy] size-3.5" />
diff --git a/src/components/rightSidePanel/errors/MissingNodeCard.vue b/src/components/rightSidePanel/errors/MissingNodeCard.vue
index 12871e686f..c7f6daa7ce 100644
--- a/src/components/rightSidePanel/errors/MissingNodeCard.vue
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.vue
@@ -21,13 +21,13 @@
     >
       <template #pipCmd>
         <code
-          class="px-1 py-0.5 rounded-sm text-xs font-mono bg-comfy-menu-bg text-comfy-input-foreground"
+          class="rounded-sm bg-comfy-menu-bg px-1 py-0.5 font-mono text-xs text-comfy-input-foreground"
           >pip install -U --pre comfyui-manager</code
         >
       </template>
       <template #flag>
         <code
-          class="px-1 py-0.5 rounded-sm text-xs font-mono bg-comfy-menu-bg text-comfy-input-foreground"
+          class="rounded-sm bg-comfy-menu-bg px-1 py-0.5 font-mono text-xs text-comfy-input-foreground"
           >--enable-manager</code
         >
       </template>
@@ -49,12 +49,12 @@
       v-if="hasInstalledPacksPendingRestart"
       variant="primary"
       :disabled="isRestarting"
-      class="w-full h-9 justify-center gap-2 text-sm font-semibold mt-2"
+      class="mt-2 h-9 w-full justify-center gap-2 text-sm font-semibold"
       @click="applyChanges()"
     >
       <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
       <i v-else class="icon-[lucide--refresh-cw] size-4 shrink-0" />
-      <span class="truncate min-w-0">{{
+      <span class="min-w-0 truncate">{{
         t('rightSidePanel.missingNodePacks.applyChanges')
       }}</span>
     </Button>
diff --git a/src/components/rightSidePanel/errors/MissingPackGroupRow.vue b/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
index 472d0b5853..f026ad772e 100644
--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="flex flex-col w-full mb-2">
+  <div class="mb-2 flex w-full flex-col">
     <!-- Pack header row: pack name + info + chevron -->
-    <div class="flex h-8 items-center w-full">
+    <div class="flex h-8 w-full items-center">
       <!-- Warning icon for unknown packs -->
       <i
         v-if="group.packId === null && !group.isResolving"
-        class="icon-[lucide--triangle-alert] size-4 text-warning-background shrink-0 mr-1.5"
+        class="mr-1.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
       />
       <p
-        class="flex-1 min-w-0 text-sm font-medium truncate"
+        class="min-w-0 flex-1 truncate text-sm font-medium"
         :class="
           group.packId === null && !group.isResolving
             ? 'text-warning-background'
@@ -28,7 +28,7 @@
         v-if="showInfoButton && group.packId !== null"
         variant="textonly"
         size="icon-sm"
-        class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
         :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
         @click="emit('openManagerInfo', group.packId ?? '')"
       >
@@ -60,7 +60,7 @@
     <TransitionCollapse>
       <div
         v-if="expanded"
-        class="flex flex-col gap-0.5 pl-2 mb-1 overflow-hidden"
+        class="mb-1 flex flex-col gap-0.5 overflow-hidden pl-2"
       >
         <div
           v-for="nodeType in group.nodeTypes"
@@ -73,18 +73,18 @@
               typeof nodeType !== 'string' &&
               nodeType.nodeId != null
             "
-            class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold mr-1"
+            class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
           >
             #{{ nodeType.nodeId }}
           </span>
-          <p class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
+          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
             {{ getLabel(nodeType) }}
           </p>
           <Button
             v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
             variant="textonly"
             size="icon-sm"
-            class="size-6 text-muted-foreground hover:text-base-foreground shrink-0 mr-1"
+            class="mr-1 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
             :aria-label="t('rightSidePanel.locateNode')"
             @click="handleLocateNode(nodeType)"
           >
@@ -101,12 +101,12 @@
         group.packId !== null &&
         (nodePack || comfyManagerStore.isPackInstalled(group.packId))
       "
-      class="flex items-start w-full py-1"
+      class="flex w-full items-start py-1"
     >
       <Button
         variant="secondary"
         size="md"
-        class="flex flex-1 w-full"
+        class="flex w-full flex-1"
         :disabled="
           comfyManagerStore.isPackInstalled(group.packId) || isInstalling
         "
@@ -120,13 +120,13 @@
         />
         <i
           v-else-if="comfyManagerStore.isPackInstalled(group.packId)"
-          class="icon-[lucide--check] size-4 text-foreground shrink-0 mr-1"
+          class="text-foreground mr-1 icon-[lucide--check] size-4 shrink-0"
         />
         <i
           v-else
-          class="icon-[lucide--download] size-4 text-foreground shrink-0 mr-1"
+          class="text-foreground mr-1 icon-[lucide--download] size-4 shrink-0"
         />
-        <span class="text-sm text-foreground truncate min-w-0">
+        <span class="text-foreground min-w-0 truncate text-sm">
           {{
             isInstalling
               ? t('rightSidePanel.missingNodePacks.installing')
@@ -141,13 +141,13 @@
     <!-- Registry still loading: packId known but result not yet available -->
     <div
       v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
-      class="flex items-start w-full py-1"
+      class="flex w-full items-start py-1"
     >
       <div
-        class="flex flex-1 h-8 items-center justify-center overflow-hidden p-2 rounded-lg min-w-0 bg-secondary-background opacity-60 cursor-not-allowed select-none"
+        class="flex h-8 min-w-0 flex-1 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background p-2 opacity-60 select-none"
       >
         <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
-        <span class="text-sm text-foreground truncate min-w-0">
+        <span class="text-foreground min-w-0 truncate text-sm">
           {{ t('g.loading') }}
         </span>
       </div>
@@ -156,12 +156,12 @@
     <!-- Search in Manager: fetch done but pack not found in registry -->
     <div
       v-else-if="group.packId !== null && shouldShowManagerButtons"
-      class="flex items-start w-full py-1"
+      class="flex w-full items-start py-1"
     >
       <Button
         variant="secondary"
         size="md"
-        class="flex flex-1 w-full"
+        class="flex w-full flex-1"
         @click="
           openManager({
             initialTab: ManagerTab.All,
@@ -169,8 +169,8 @@
           })
         "
       >
-        <i class="icon-[lucide--search] size-4 text-foreground shrink-0 mr-1" />
-        <span class="text-sm text-foreground truncate min-w-0">
+        <i class="text-foreground mr-1 icon-[lucide--search] size-4 shrink-0" />
+        <span class="text-foreground min-w-0 truncate text-sm">
           {{ t('rightSidePanel.missingNodePacks.searchInManager') }}
         </span>
       </Button>
diff --git a/src/components/rightSidePanel/errors/TabErrors.vue b/src/components/rightSidePanel/errors/TabErrors.vue
index ef39429658..bc5b0de55b 100644
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-col h-full min-w-0">
+  <div class="flex h-full min-w-0 flex-col">
     <!-- Search bar + collapse toggle -->
     <div
-      class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke shrink-0 min-w-0"
+      class="flex min-w-0 shrink-0 items-center border-b border-interface-stroke px-4 pt-1 pb-4"
     >
       <FormSearchInput v-model="searchQuery" class="flex-1" />
       <CollapseToggleButton
@@ -12,12 +12,12 @@
     </div>
 
     <!-- Scrollable content -->
-    <div class="flex-1 overflow-y-auto min-w-0">
+    <div class="min-w-0 flex-1 overflow-y-auto">
       <TransitionGroup tag="div" name="list-scale" class="relative">
         <div
           v-if="filteredGroups.length === 0"
           key="empty"
-          class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15"
+          class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground"
         >
           {{
             searchQuery.trim()
@@ -40,12 +40,12 @@
           @update:collapse="setSectionCollapsed(group.title, $event)"
         >
           <template #label>
-            <div class="flex items-center gap-2 flex-1 min-w-0">
-              <span class="flex-1 flex items-center gap-2 min-w-0">
+            <div class="flex min-w-0 flex-1 items-center gap-2">
+              <span class="flex min-w-0 flex-1 items-center gap-2">
                 <i
-                  class="icon-[lucide--octagon-alert] size-4 text-destructive-background-hover shrink-0"
+                  class="icon-[lucide--octagon-alert] size-4 shrink-0 text-destructive-background-hover"
                 />
-                <span class="text-destructive-background-hover truncate">
+                <span class="truncate text-destructive-background-hover">
                   {{
                     group.type === 'missing_node'
                       ? `${group.title} (${missingPackGroups.length})`
@@ -69,7 +69,7 @@
                 "
                 variant="secondary"
                 size="sm"
-                class="shrink-0 mr-2 h-8 rounded-lg text-sm"
+                class="mr-2 h-8 shrink-0 rounded-lg text-sm"
                 :disabled="isInstallingAll"
                 @click.stop="installAll"
               >
@@ -90,7 +90,7 @@
                 "
                 variant="secondary"
                 size="sm"
-                class="shrink-0 mr-2 h-8 rounded-lg text-sm"
+                class="mr-2 h-8 shrink-0 rounded-lg text-sm"
                 @click.stop="handleReplaceAll()"
               >
                 {{ t('nodeReplacement.replaceAll', 'Replace All') }}
@@ -118,7 +118,7 @@
           />
 
           <!-- Execution Errors -->
-          <div v-else-if="group.type === 'execution'" class="px-4 space-y-3">
+          <div v-else-if="group.type === 'execution'" class="space-y-3 px-4">
             <ErrorNodeCard
               v-for="card in group.cards"
               :key="card.id"
@@ -135,17 +135,17 @@
     </div>
 
     <!-- Fixed Footer: Help Links -->
-    <div class="shrink-0 border-t border-interface-stroke p-4 min-w-0">
+    <div class="min-w-0 shrink-0 border-t border-interface-stroke p-4">
       <i18n-t
         keypath="rightSidePanel.errorHelp"
         tag="p"
-        class="m-0 text-sm/tight text-muted-foreground wrap-break-word"
+        class="m-0 text-sm/tight wrap-break-word text-muted-foreground"
       >
         <template #github>
           <Button
             variant="textonly"
             size="unset"
-            class="inline underline text-inherit text-sm whitespace-nowrap"
+            class="inline text-sm whitespace-nowrap text-inherit underline"
             @click="openGitHubIssues"
           >
             {{ t('rightSidePanel.errorHelpGithub') }}
@@ -155,7 +155,7 @@
           <Button
             variant="textonly"
             size="unset"
-            class="inline underline text-inherit text-sm whitespace-nowrap"
+            class="inline text-sm whitespace-nowrap text-inherit underline"
             @click="contactSupport"
           >
             {{ t('rightSidePanel.errorHelpSupport') }}
diff --git a/src/components/rightSidePanel/layout/CollapseToggleButton.vue b/src/components/rightSidePanel/layout/CollapseToggleButton.vue
index 5aa2dc8663..8384b772a0 100644
--- a/src/components/rightSidePanel/layout/CollapseToggleButton.vue
+++ b/src/components/rightSidePanel/layout/CollapseToggleButton.vue
@@ -7,7 +7,7 @@
     leave-from-class="max-w-10 opacity-100 ml-2"
     leave-to-class="max-w-0 opacity-0 ml-0"
   >
-    <div v-if="show" class="overflow-hidden flex items-center ml-2">
+    <div v-if="show" class="ml-2 flex items-center overflow-hidden">
       <Button
         v-tooltip.bottom="
           isAllCollapsed ? t('g.expandAll') : t('g.collapseAll')
diff --git a/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue b/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
index eaf0dd32d7..328b5c97f0 100644
--- a/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
+++ b/src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
@@ -36,14 +36,14 @@ const tooltipConfig = computed(() => {
 <template>
   <div :class="cn('flex flex-col bg-comfy-menu-bg', className)">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
+      class="sticky top-0 z-10 flex items-center justify-between bg-inherit backdrop-blur-xl"
     >
       <button
         v-tooltip="tooltipConfig"
         type="button"
         :class="
           cn(
-            'group bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
+            'group flex w-full items-center justify-between border-0 bg-transparent pr-3 pl-4 text-left ring-0 outline-0',
             size === 'lg' ? 'min-h-16' : 'min-h-12',
             !disabled && 'cursor-pointer'
           )
@@ -51,7 +51,7 @@ const tooltipConfig = computed(() => {
         :disabled="disabled"
         @click="isCollapse = !isCollapse"
       >
-        <span class="text-sm font-semibold line-clamp-2 flex-1">
+        <span class="line-clamp-2 flex-1 text-sm font-semibold">
           <slot name="label">
             {{ label }}
           </slot>
@@ -60,7 +60,7 @@ const tooltipConfig = computed(() => {
         <i
           :class="
             cn(
-              'text-muted-foreground group-hover:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
+              'icon-[lucide--chevron-up] size-4 text-muted-foreground transition-all group-hover:text-base-foreground group-focus:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground',
               isCollapse && '-rotate-180',
               disabled && 'opacity-0'
             )
diff --git a/src/components/rightSidePanel/parameters/SectionWidgets.vue b/src/components/rightSidePanel/parameters/SectionWidgets.vue
index e88b2f5b7c..7a86a2f4cb 100644
--- a/src/components/rightSidePanel/parameters/SectionWidgets.vue
+++ b/src/components/rightSidePanel/parameters/SectionWidgets.vue
@@ -203,8 +203,8 @@ defineExpose({
       :size="showSeeError ? 'lg' : 'default'"
     >
       <template #label>
-        <div class="flex flex-wrap items-center gap-2 flex-1 min-w-0">
-          <span class="flex-1 flex items-center gap-2 min-w-0">
+        <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+          <span class="flex min-w-0 flex-1 items-center gap-2">
             <i
               v-if="nodeHasError"
               class="icon-[lucide--octagon-alert] size-4 shrink-0 text-destructive-background-hover"
@@ -223,7 +223,7 @@ defineExpose({
             </span>
             <span
               v-if="parentGroup"
-              class="text-xs text-muted-foreground truncate flex-1 text-right min-w-11"
+              class="min-w-11 flex-1 truncate text-right text-xs text-muted-foreground"
               :title="parentGroup.title"
             >
               {{ parentGroup.title }}
@@ -233,7 +233,7 @@ defineExpose({
             v-if="showSeeError"
             variant="secondary"
             size="sm"
-            class="shrink-0 rounded-lg text-sm h-8"
+            class="h-8 shrink-0 rounded-lg text-sm"
             @click.stop="navigateToErrorTab"
           >
             {{ t('rightSidePanel.seeError') }}
@@ -242,7 +242,7 @@ defineExpose({
             v-if="!isEmpty"
             variant="muted-textonly"
             size="icon-sm"
-            class="subbutton shrink-0 size-8 hover:text-base-foreground"
+            class="subbutton size-8 shrink-0 hover:text-base-foreground"
             :title="t('rightSidePanel.resetAllParameters')"
             :aria-label="t('rightSidePanel.resetAllParameters')"
             @click.stop="handleResetAllWidgets"
@@ -253,7 +253,7 @@ defineExpose({
             v-if="canShowLocateButton"
             variant="muted-textonly"
             size="icon-sm"
-            class="subbutton shrink-0 mr-3 size-8 hover:text-base-foreground"
+            class="subbutton mr-3 size-8 shrink-0 hover:text-base-foreground"
             :title="t('rightSidePanel.locateNode')"
             :aria-label="t('rightSidePanel.locateNode')"
             @click.stop="handleLocateNode"
@@ -267,7 +267,7 @@ defineExpose({
 
       <div
         ref="widgetsContainer"
-        class="space-y-2 rounded-lg px-4 pt-1 relative"
+        class="relative space-y-2 rounded-lg px-4 pt-1"
       >
         <TransitionGroup name="list-scale">
           <WidgetItem
diff --git a/src/components/rightSidePanel/parameters/TabGlobalParameters.vue b/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
index 51da543d21..ab83511af5 100644
--- a/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
+++ b/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
@@ -117,7 +117,7 @@ function onCollapseUpdate() {
 
 <template>
   <div
-    class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
+    class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
   >
     <FormSearchInput
       v-model="searchQuery"
@@ -138,7 +138,7 @@ function onCollapseUpdate() {
     @update:collapse="onCollapseUpdate"
   >
     <template #empty>
-      <div class="text-sm text-muted-foreground px-4 text-center py-10">
+      <div class="px-4 py-10 text-center text-sm text-muted-foreground">
         <p>
           {{
             isSearching
@@ -155,7 +155,7 @@ function onCollapseUpdate() {
           <template #moreIcon>
             <span
               aria-hidden="true"
-              class="inline-flex size-5 items-center justify-center rounded-md bg-secondary-background-hover text-secondary-foreground align-middle"
+              class="text-secondary-foreground inline-flex size-5 items-center justify-center rounded-md bg-secondary-background-hover align-middle"
             >
               <i class="icon-[lucide--more-vertical] text-sm" />
             </span>
diff --git a/src/components/rightSidePanel/parameters/TabNodes.vue b/src/components/rightSidePanel/parameters/TabNodes.vue
index 6ec4a7caac..da5da33d26 100644
--- a/src/components/rightSidePanel/parameters/TabNodes.vue
+++ b/src/components/rightSidePanel/parameters/TabNodes.vue
@@ -76,7 +76,7 @@ async function searcher(query: string) {
 
 <template>
   <div
-    class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
+    class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
   >
     <FormSearchInput
       v-model="searchQuery"
@@ -92,7 +92,7 @@ async function searcher(query: string) {
   <TransitionGroup tag="div" name="list-scale" class="relative">
     <div
       v-if="isSearching && searchedWidgetsSectionDataList.length === 0"
-      class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15"
+      class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground"
     >
       {{ $t('rightSidePanel.noneSearchDesc') }}
     </div>
diff --git a/src/components/rightSidePanel/parameters/TabNormalInputs.vue b/src/components/rightSidePanel/parameters/TabNormalInputs.vue
index 4636b38a8a..e104b98f4c 100644
--- a/src/components/rightSidePanel/parameters/TabNormalInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabNormalInputs.vue
@@ -120,7 +120,7 @@ const advancedLabel = computed(() => {
 
 <template>
   <div
-    class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
+    class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
   >
     <FormSearchInput
       v-model="searchQuery"
@@ -140,7 +140,7 @@ const advancedLabel = computed(() => {
   <TransitionGroup tag="div" name="list-scale" class="relative">
     <div
       v-if="searchedWidgetsSectionDataList.length === 0"
-      class="text-sm text-muted-foreground px-4 py-10 text-center"
+      class="px-4 py-10 text-center text-sm text-muted-foreground"
     >
       {{
         isSearching
diff --git a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
index 8067382a9d..305d85dc26 100644
--- a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
@@ -201,7 +201,7 @@ const label = computed(() => {
 
 <template>
   <div
-    class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
+    class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
   >
     <FormSearchInput
       v-model="searchQuery"
@@ -237,7 +237,7 @@ const label = computed(() => {
     "
   >
     <template #empty>
-      <div class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15">
+      <div class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground">
         {{ t('rightSidePanel.noneSearchDesc') }}
       </div>
     </template>
diff --git a/src/components/rightSidePanel/parameters/WidgetActions.vue b/src/components/rightSidePanel/parameters/WidgetActions.vue
index 43a96aed36..d7a60c2863 100644
--- a/src/components/rightSidePanel/parameters/WidgetActions.vue
+++ b/src/components/rightSidePanel/parameters/WidgetActions.vue
@@ -117,13 +117,13 @@ function handleResetToDefault() {
 <template>
   <MoreButton
     is-vertical
-    class="text-muted-foreground bg-transparent hover:text-base-foreground hover:bg-secondary-background-hover active:scale-95 transition-all"
+    class="bg-transparent text-muted-foreground transition-all hover:bg-secondary-background-hover hover:text-base-foreground active:scale-95"
   >
     <template #default="{ close }">
       <Button
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
+        class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             handleRename()
@@ -139,7 +139,7 @@ function handleResetToDefault() {
         v-if="hasParents"
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
+        class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             if (isShownOnParents) handleHideInput()
@@ -161,7 +161,7 @@ function handleResetToDefault() {
       <Button
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
+        class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             handleToggleFavorite()
@@ -183,7 +183,7 @@ function handleResetToDefault() {
         v-if="hasDefault"
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
+        class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         :disabled="isCurrentValueDefault"
         @click="
           () => {
diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue
index 2268b88d01..bed07698d7 100644
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -140,9 +140,9 @@ const displayLabel = customRef((track, trigger) => {
   <div
     :class="
       cn(
-        'widget-item col-span-full grid grid-cols-subgrid rounded-lg group',
+        'widget-item group col-span-full grid grid-cols-subgrid rounded-lg',
         isDraggable &&
-          'draggable-item will-change-auto! drag-handle cursor-grab bg-comfy-menu-bg [&.is-draggable]:cursor-grabbing outline-comfy-menu-bg [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0 [&.is-draggable]:opacity-70'
+          'draggable-item drag-handle cursor-grab bg-comfy-menu-bg outline-comfy-menu-bg will-change-auto! [&.is-draggable]:cursor-grabbing [&.is-draggable]:opacity-70 [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0'
       )
     "
   >
@@ -150,7 +150,7 @@ const displayLabel = customRef((track, trigger) => {
     <div
       :class="
         cn(
-          'min-h-8 flex items-center justify-between gap-1 mb-1.5 min-w-0',
+          'mb-1.5 flex min-h-8 min-w-0 items-center justify-between gap-1',
           isDraggable && 'pointer-events-none'
         )
       "
@@ -160,7 +160,7 @@ const displayLabel = customRef((track, trigger) => {
         :model-value="displayLabel"
         :is-editing="isEditing"
         :input-attrs="{ placeholder: widget.name }"
-        class="text-sm/8 p-0 m-0 truncate pointer-events-auto cursor-text"
+        class="pointer-events-auto m-0 cursor-text truncate p-0 text-sm/8"
         @edit="displayLabel = $event"
         @cancel="isEditing = false"
         @click="isEditing = true"
@@ -168,13 +168,13 @@ const displayLabel = customRef((track, trigger) => {
 
       <span
         v-if="(showNodeName || hasParents) && sourceNodeName"
-        class="text-xs text-muted-foreground flex-1 p-0 my-0 mx-1 truncate text-right min-w-10"
+        class="mx-1 my-0 min-w-10 flex-1 truncate p-0 text-right text-xs text-muted-foreground"
       >
         {{ sourceNodeName }}
       </span>
       <div
         v-if="!hiddenWidgetActions"
-        class="flex items-center gap-1 shrink-0 pointer-events-auto"
+        class="pointer-events-auto flex shrink-0 items-center gap-1"
       >
         <WidgetActions
           v-model:label="displayLabel"
@@ -192,10 +192,10 @@ const displayLabel = customRef((track, trigger) => {
         !hiddenFavoriteIndicator &&
         favoritedWidgetsStore.isFavorited(favoriteNode, widget.name)
       "
-      class="relative z-2 pointer-events-none"
+      class="pointer-events-none relative z-2"
     >
       <i
-        class="absolute -right-1 -top-1 pi pi-star-fill text-xs text-muted-foreground pointer-events-none"
+        class="pi pi-star-fill pointer-events-none absolute -top-1 -right-1 text-xs text-muted-foreground"
       />
     </div>
     <!-- widget content -->
@@ -211,7 +211,7 @@ const displayLabel = customRef((track, trigger) => {
     <div
       :class="
         cn(
-          'pointer-events-none mt-1.5 mx-auto max-w-40 w-1/2 h-1 rounded-lg bg-transparent transition-colors duration-150',
+          'pointer-events-none mx-auto mt-1.5 h-1 w-1/2 max-w-40 rounded-lg bg-transparent transition-colors duration-150',
           'group-hover:bg-interface-stroke group-[.is-draggable]:bg-component-node-widget-background-highlighted',
           !isDraggable && 'opacity-0'
         )
diff --git a/src/components/rightSidePanel/settings/LayoutField.vue b/src/components/rightSidePanel/settings/LayoutField.vue
index 0a315c1ba4..9cc1bcd500 100644
--- a/src/components/rightSidePanel/settings/LayoutField.vue
+++ b/src/components/rightSidePanel/settings/LayoutField.vue
@@ -25,7 +25,7 @@ defineProps<{
       "
       :class="
         cn(
-          'text-sm text-muted-foreground truncate group',
+          'group truncate text-sm text-muted-foreground',
           tooltip ? 'cursor-help' : '',
           singleline ? 'flex-1' : ''
         )
@@ -35,7 +35,7 @@ defineProps<{
 
       <i
         v-if="tooltip"
-        class="icon-[lucide--info] ml-0.5 size-3 relative top-px group-hover:text-primary"
+        class="relative top-px ml-0.5 icon-[lucide--info] size-3 group-hover:text-primary"
       />
     </span>
     <slot />
diff --git a/src/components/rightSidePanel/settings/SetNodeColor.vue b/src/components/rightSidePanel/settings/SetNodeColor.vue
index d6635be9ec..63a7e3d552 100644
--- a/src/components/rightSidePanel/settings/SetNodeColor.vue
+++ b/src/components/rightSidePanel/settings/SetNodeColor.vue
@@ -107,14 +107,14 @@ const nodeColor = computed<NodeColorOption['name'] | null>({
 <template>
   <LayoutField :label="t('rightSidePanel.color')">
     <div
-      class="bg-secondary-background border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
+      class="grid grid-cols-5 justify-items-center gap-1 rounded-lg border-none bg-secondary-background p-1"
     >
       <button
         v-for="option of colorOptions"
         :key="option.name"
         :class="
           cn(
-            'size-8 rounded-lg bg-transparent border-0 outline-0 ring-0 text-left flex justify-center items-center cursor-pointer',
+            'flex size-8 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent text-left ring-0 outline-0',
             option.name === nodeColor
               ? 'bg-interface-menu-component-surface-selected'
               : 'hover:bg-interface-menu-component-surface-selected'
diff --git a/src/components/rightSidePanel/settings/TabGlobalSettings.vue b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
index 220e206c32..8cd5873dba 100644
--- a/src/components/rightSidePanel/settings/TabGlobalSettings.vue
+++ b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
@@ -131,7 +131,7 @@ function openFullSettings() {
         <LayoutField :label="t('rightSidePanel.globalSettings.gridSpacing')">
           <div
             :class="
-              cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')
+              cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')
             "
           >
             <Slider
@@ -179,7 +179,7 @@ function openFullSettings() {
             :pt="{
               option: 'text-xs',
               dropdown: 'w-8',
-              label: cn('truncate min-w-[4ch]', $slots.default && 'mr-5'),
+              label: cn('min-w-[4ch] truncate', $slots.default && 'mr-5'),
               overlay: 'w-fit min-w-full'
             }"
             data-capture-wheel="true"
@@ -197,7 +197,7 @@ function openFullSettings() {
 
     <!-- View all settings button -->
     <div
-      class="flex items-center justify-center p-4 border-b border-interface-stroke"
+      class="flex items-center justify-center border-b border-interface-stroke p-4"
     >
       <Button
         variant="muted-textonly"
diff --git a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
index 623e5c2dc1..6914cfee26 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -200,7 +200,7 @@ onMounted(() => {
 
 <template>
   <div v-if="activeNode" class="subgraph-edit-section flex h-full flex-col">
-    <div class="px-4 pb-4 pt-1 flex gap-2 border-b border-interface-stroke">
+    <div class="flex gap-2 border-b border-interface-stroke px-4 pt-1 pb-4">
       <FormSearchInput v-model="searchQuery" />
     </div>
 
@@ -211,7 +211,7 @@ onMounted(() => {
           filteredActive.length === 0 &&
           filteredCandidates.length === 0
         "
-        class="text-sm text-muted-foreground px-4 py-10 text-center"
+        class="px-4 py-10 text-center text-sm text-muted-foreground"
       >
         {{ $t('rightSidePanel.noneSearchDesc') }}
       </div>
@@ -221,13 +221,13 @@ onMounted(() => {
         class="flex flex-col border-b border-interface-stroke"
       >
         <div
-          class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
+          class="sticky top-0 z-10 flex min-h-12 items-center justify-between px-4 backdrop-blur-xl"
         >
-          <div class="text-sm font-semibold uppercase line-clamp-1">
+          <div class="line-clamp-1 text-sm font-semibold uppercase">
             {{ $t('subgraphStore.shown') }}
           </div>
           <a
-            class="cursor-pointer text-right text-xs font-normal text-text-secondary hover:text-azure-600 whitespace-nowrap"
+            class="cursor-pointer text-right text-xs font-normal whitespace-nowrap text-text-secondary hover:text-azure-600"
             @click.stop="hideAll"
           >
             {{ $t('subgraphStore.hideAll') }}</a
@@ -252,19 +252,19 @@ onMounted(() => {
         class="flex flex-col border-b border-interface-stroke"
       >
         <div
-          class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
+          class="sticky top-0 z-10 flex min-h-12 items-center justify-between px-4 backdrop-blur-xl"
         >
-          <div class="text-sm font-semibold uppercase line-clamp-1">
+          <div class="line-clamp-1 text-sm font-semibold uppercase">
             {{ $t('subgraphStore.hidden') }}
           </div>
           <a
-            class="cursor-pointer text-right text-xs font-normal text-text-secondary hover:text-azure-600 whitespace-nowrap"
+            class="cursor-pointer text-right text-xs font-normal whitespace-nowrap text-text-secondary hover:text-azure-600"
             @click.stop="showAll"
           >
             {{ $t('subgraphStore.showAll') }}</a
           >
         </div>
-        <div class="pb-2 px-2 space-y-0.5 mt-0.5">
+        <div class="mt-0.5 space-y-0.5 px-2 pb-2">
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredCandidates"
             :key="toKey([node, widget])"
diff --git a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
index a3af2b6898..b206aac4ce 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
@@ -27,18 +27,18 @@ function getIcon() {
   <div
     :class="
       cn(
-        'flex py-1 px-2 break-all rounded-sm items-center gap-1',
+        'flex items-center gap-1 rounded-sm px-2 py-1 break-all',
         'bg-node-component-surface',
-        props.isDraggable && 'hover:ring-1 ring-accent-background',
+        props.isDraggable && 'ring-accent-background hover:ring-1',
         props.class
       )
     "
   >
     <div class="pointer-events-none flex-1">
-      <div class="text-xs text-text-secondary line-clamp-1">
+      <div class="line-clamp-1 text-xs text-text-secondary">
         {{ nodeTitle }}
       </div>
-      <div class="text-sm/8 line-clamp-1">{{ widgetName }}</div>
+      <div class="line-clamp-1 text-sm/8">{{ widgetName }}</div>
     </div>
     <Button
       variant="muted-textonly"
@@ -50,7 +50,7 @@ function getIcon() {
     </Button>
     <div
       v-if="isDraggable"
-      class="size-4 pointer-events-none icon-[lucide--grip-vertical]"
+      class="pointer-events-none icon-[lucide--grip-vertical] size-4"
     />
   </div>
 </template>
diff --git a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
index ae0e44e442..730351718c 100644
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
@@ -121,7 +121,7 @@ const categoryTree = computed<CategoryNode[]>(() => {
 
 function categoryBtnClass(id: string) {
   return cn(
-    'cursor-pointer border-none bg-transparent rounded-sm px-3 py-2.5 text-left text-sm transition-colors',
+    'cursor-pointer rounded-sm border-none bg-transparent px-3 py-2.5 text-left text-sm transition-colors',
     selectedCategory.value === id
       ? CATEGORY_SELECTED_CLASS
       : CATEGORY_UNSELECTED_CLASS
diff --git a/src/components/searchbox/v2/NodeSearchContent.vue b/src/components/searchbox/v2/NodeSearchContent.vue
index 7639840b41..e31652b338 100644
--- a/src/components/searchbox/v2/NodeSearchContent.vue
+++ b/src/components/searchbox/v2/NodeSearchContent.vue
@@ -60,7 +60,7 @@
           :aria-selected="index === selectedIndex"
           :class="
             cn(
-              'flex cursor-pointer items-center px-4 h-14',
+              'flex h-14 cursor-pointer items-center px-4',
               index === selectedIndex && 'bg-secondary-background-hover'
             )
           "
diff --git a/src/components/searchbox/v2/NodeSearchFilterBar.vue b/src/components/searchbox/v2/NodeSearchFilterBar.vue
index e68418fd65..b7fb519e44 100644
--- a/src/components/searchbox/v2/NodeSearchFilterBar.vue
+++ b/src/components/searchbox/v2/NodeSearchFilterBar.vue
@@ -7,9 +7,9 @@
       :aria-pressed="activeChipKey === chip.key"
       :class="
         cn(
-          'cursor-pointer rounded-md border px-3 py-1 text-sm transition-colors flex-auto border-secondary-background',
+          'flex-auto cursor-pointer rounded-md border border-secondary-background px-3 py-1 text-sm transition-colors',
           activeChipKey === chip.key
-            ? 'bg-secondary-background text-foreground'
+            ? 'text-foreground bg-secondary-background'
             : 'bg-transparent text-muted-foreground hover:border-base-foreground/60 hover:text-base-foreground/60'
         )
       "
diff --git a/src/components/searchbox/v2/NodeSearchFilterPanel.vue b/src/components/searchbox/v2/NodeSearchFilterPanel.vue
index 8f8006d3d9..d9d9077f22 100644
--- a/src/components/searchbox/v2/NodeSearchFilterPanel.vue
+++ b/src/components/searchbox/v2/NodeSearchFilterPanel.vue
@@ -21,8 +21,8 @@
       @click="emit('apply', option)"
       @mouseenter="selectedIndex = index"
     >
-      <span class="text-base font-semibold text-foreground">
-        <span class="text-2xl mr-1" :style="{ color: getLinkTypeColor(option) }"
+      <span class="text-foreground text-base font-semibold">
+        <span class="mr-1 text-2xl" :style="{ color: getLinkTypeColor(option) }"
           >&bull;</span
         >
         {{ option }}
diff --git a/src/components/searchbox/v2/NodeSearchInput.vue b/src/components/searchbox/v2/NodeSearchInput.vue
index dd144989f5..e6ffc02612 100644
--- a/src/components/searchbox/v2/NodeSearchInput.vue
+++ b/src/components/searchbox/v2/NodeSearchInput.vue
@@ -10,13 +10,13 @@
       <!-- Active filter label (filter selection mode) -->
       <span
         v-if="activeFilter"
-        class="inline-flex shrink-0 items-center gap-1 rounded-lg bg-base-background px-2 py-1 -my-1 text-sm opacity-80 text-foreground"
+        class="text-foreground -my-1 inline-flex shrink-0 items-center gap-1 rounded-lg bg-base-background px-2 py-1 text-sm opacity-80"
       >
         {{ activeFilter.label }}:
         <button
           type="button"
           data-testid="cancel-filter"
-          class="cursor-pointer border-none bg-transparent text-muted-foreground hover:text-base-foreground rounded-full aspect-square"
+          class="aspect-square cursor-pointer rounded-full border-none bg-transparent text-muted-foreground hover:text-base-foreground"
           :aria-label="$t('g.remove')"
           @click="emit('cancelFilter')"
         >
@@ -30,7 +30,7 @@
           :key="filterKey(filter)"
           :value="filterKey(filter)"
           data-testid="filter-chip"
-          class="inline-flex items-center gap-1 rounded-lg bg-base-background px-2 py-1 -my-1 data-[state=active]:ring-2 data-[state=active]:ring-primary"
+          class="-my-1 inline-flex items-center gap-1 rounded-lg bg-base-background px-2 py-1 data-[state=active]:ring-2 data-[state=active]:ring-primary"
         >
           <span class="text-sm opacity-80">
             {{ t(`g.${filter.filterDef.id}`) }}:
@@ -44,7 +44,7 @@
             type="button"
             data-testid="chip-delete"
             :aria-label="$t('g.remove')"
-            class="ml-1 cursor-pointer border-none bg-transparent text-muted-foreground hover:text-base-foreground rounded-full aspect-square"
+            class="ml-1 aspect-square cursor-pointer rounded-full border-none bg-transparent text-muted-foreground hover:text-base-foreground"
           >
             <i class="pi pi-times text-xs" />
           </TagsInputItemDelete>
@@ -61,7 +61,7 @@
           :aria-controls="activeFilter ? 'filter-options-list' : 'results-list'"
           :aria-label="inputPlaceholder"
           :placeholder="inputPlaceholder"
-          class="h-6 min-w-[min(300px,80vw)] flex-1 border-none bg-transparent text-foreground text-sm outline-none placeholder:text-muted-foreground"
+          class="text-foreground h-6 min-w-[min(300px,80vw)] flex-1 border-none bg-transparent text-sm outline-none placeholder:text-muted-foreground"
           @keydown.enter.prevent="emit('selectCurrent')"
           @keydown.down.prevent="emit('navigateDown')"
           @keydown.up.prevent="emit('navigateUp')"
diff --git a/src/components/searchbox/v2/NodeSearchListItem.vue b/src/components/searchbox/v2/NodeSearchListItem.vue
index 391d21560f..7073fb400e 100644
--- a/src/components/searchbox/v2/NodeSearchListItem.vue
+++ b/src/components/searchbox/v2/NodeSearchListItem.vue
@@ -3,7 +3,7 @@
     class="option-container flex w-full cursor-pointer items-center justify-between overflow-hidden"
   >
     <div class="flex flex-col gap-0.5 overflow-hidden">
-      <div class="font-semibold text-foreground flex items-center gap-2">
+      <div class="text-foreground flex items-center gap-2 font-semibold">
         <span v-if="isBookmarked && !hideBookmarkIcon">
           <i class="pi pi-bookmark-fill mr-1 text-sm" />
         </span>
@@ -28,7 +28,7 @@
             nodeDef.nodeSource.type !== NodeSourceType.Core &&
             nodeDef.nodeSource.type !== NodeSourceType.Unknown
           "
-          class="inline-flex shrink-0 rounded-sm border border-border px-1.5 py-0.5 text-xs bg-base-foreground/5 text-base-foreground/70 mr-0.5"
+          class="border-border mr-0.5 inline-flex shrink-0 rounded-sm border bg-base-foreground/5 px-1.5 py-0.5 text-xs text-base-foreground/70"
         >
           {{ nodeDef.nodeSource.displayText }}
         </span>
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 4876bcb753..ad166438a6 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -15,7 +15,7 @@
       :class="
         isOverflowing
           ? 'side-tool-bar-container overflow-y-auto'
-          : 'flex flex-col h-full'
+          : 'flex h-full flex-col'
       "
     >
       <div ref="topToolbarRef" :class="groupClasses">
@@ -154,8 +154,8 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 const isOverflowing = ref(false)
 const groupClasses = computed(() =>
   cn(
-    'sidebar-item-group flex flex-col items-center overflow-hidden shrink-0',
-    !isConnected.value && 'rounded-lg shadow-interface pointer-events-auto'
+    'sidebar-item-group flex shrink-0 flex-col items-center overflow-hidden',
+    !isConnected.value && 'pointer-events-auto rounded-lg shadow-interface'
   )
 )
 
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index e6ace98869..66e469e8e3 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -31,7 +31,7 @@
             v-if="shouldShowBadge"
             :class="
               cn(
-                'sidebar-icon-badge absolute min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground',
+                'sidebar-icon-badge absolute min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] leading-[14px] font-medium text-base-foreground',
                 badgeClass || '-top-1 -right-1'
               )
             "
diff --git a/src/components/sidebar/tabs/AppsSidebarTab.vue b/src/components/sidebar/tabs/AppsSidebarTab.vue
index 6ff7b4a38a..3dbe6cdd0f 100644
--- a/src/components/sidebar/tabs/AppsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AppsSidebarTab.vue
@@ -9,7 +9,7 @@
   >
     <template #alt-title>
       <span
-        class="ml-2 flex items-center rounded-full bg-primary-background px-1.5 py-0.5 text-xxs uppercase text-base-foreground"
+        class="ml-2 flex items-center rounded-full bg-primary-background px-1.5 py-0.5 text-xxs text-base-foreground uppercase"
       >
         {{ $t('g.beta') }}
       </span>
diff --git a/src/components/sidebar/tabs/AssetsSidebarGridView.vue b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
index 7e08d7841f..81669d56a1 100644
--- a/src/components/sidebar/tabs/AssetsSidebarGridView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
@@ -3,7 +3,7 @@
     <!-- Assets Header -->
     <div v-if="assets.length" class="px-2 2xl:px-4">
       <div
-        class="flex items-center py-2 text-sm/normal font-normal text-muted-foreground font-inter"
+        class="flex items-center py-2 font-inter text-sm/normal font-normal text-muted-foreground"
       >
         {{
           t(
diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index 52ce2549fe..95050adb18 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -2,7 +2,7 @@
   <div class="flex h-full flex-col">
     <div v-if="assetItems.length" class="px-2">
       <div
-        class="flex items-center p-2 text-sm/normal font-normal text-muted-foreground font-inter"
+        class="flex items-center p-2 font-inter text-sm/normal font-normal text-muted-foreground"
       >
         {{
           t(
@@ -189,7 +189,7 @@ function getAssetCardClass(selected: boolean): string {
     'w-full text-text-primary transition-colors hover:bg-secondary-background-hover',
     'cursor-pointer',
     selected &&
-      'bg-secondary-background-hover ring-1 ring-inset ring-modal-card-border-highlighted'
+      'bg-secondary-background-hover ring-1 ring-modal-card-border-highlighted ring-inset'
   )
 }
 
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index ddfbccd5ca..a1210c8a2f 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -50,7 +50,7 @@
         v-model:sort-by="sortBy"
         v-model:view-mode="viewMode"
         v-model:media-type-filters="mediaTypeFilters"
-        class="pb-1 px-2 2xl:px-4"
+        class="px-2 pb-1 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
       <Divider type="dashed" class="my-2" />
@@ -118,7 +118,7 @@
       <div
         v-if="hasSelection"
         ref="footerRef"
-        class="flex gap-1 h-18 w-full items-center justify-between"
+        class="flex h-18 w-full items-center justify-between gap-1"
       >
         <div class="flex-1 pl-4">
           <div ref="selectionCountButtonRef" class="inline-flex w-48">
@@ -137,7 +137,7 @@
             </Button>
           </div>
         </div>
-        <div class="flex shrink gap-2 pr-4 items-center-safe justify-end-safe">
+        <div class="flex shrink items-center-safe justify-end-safe gap-2 pr-4">
           <template v-if="isCompact">
             <!-- Compact mode: Icon only -->
             <Button
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
index 576272cc5b..eda0354c2d 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
@@ -13,7 +13,7 @@
             <DropdownMenuTrigger as-child>
               <button
                 :aria-label="$t('g.sort')"
-                class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-comfy-input hover:bg-comfy-input-hover border-none"
+                class="hover:bg-comfy-input-hover flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-comfy-input"
               >
                 <i class="icon-[lucide--arrow-up-down] size-4" />
               </button>
@@ -44,7 +44,7 @@
             <DropdownMenuTrigger as-child>
               <button
                 :aria-label="$t('sideToolbar.nodeLibraryTab.filter')"
-                class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-comfy-input hover:bg-comfy-input-hover border-none"
+                class="hover:bg-comfy-input-hover flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-comfy-input"
               >
                 <i class="icon-[lucide--list-filter] size-4" />
               </button>
@@ -106,7 +106,7 @@
         <Separator decorative class="border border-dashed border-comfy-input" />
         <!-- Tab list in header (fixed) -->
         <TabsList
-          class="flex gap-4 border-b border-comfy-input bg-background p-4"
+          class="bg-background flex gap-4 border-b border-comfy-input p-4"
         >
           <TabsTrigger
             v-for="tab in tabs"
@@ -114,8 +114,8 @@
             :value="tab.value"
             :class="
               cn(
-                'select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
-                'text-sm text-foreground transition-colors',
+                'cursor-pointer rounded-lg border-none px-3 py-2 outline-none select-none',
+                'text-foreground text-sm transition-colors',
                 selectedTab === tab.value
                   ? 'bg-comfy-input font-bold'
                   : 'bg-transparent font-normal'
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 3031b4e276..37d6beb044 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -9,7 +9,7 @@
   >
     <div class="comfy-vue-side-bar-header flex flex-col gap-2">
       <Toolbar
-        class="min-h-16 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
+        class="min-h-16 rounded-none border-x-0 border-t-0 bg-transparent px-2 2xl:px-4"
         :pt="sidebarPt"
       >
         <template #start>
@@ -20,7 +20,7 @@
         </template>
         <template #end>
           <div
-            class="touch:w-auto touch:opacity-100 [&_.p-button]:py-1 2xl:[&_.p-button]:py-2 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
+            class="flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100 touch:w-auto touch:opacity-100 [&_.p-button]:py-1 2xl:[&_.p-button]:py-2"
           >
             <slot name="tool-buttons" />
           </div>
diff --git a/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue b/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
index f5e36f5bfb..6e5dd0a1d3 100644
--- a/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
@@ -1,8 +1,8 @@
 <template>
-  <TabsContent value="all" class="flex-1 overflow-y-auto h-full">
+  <TabsContent value="all" class="h-full flex-1 overflow-y-auto">
     <!-- Favorites section -->
     <h3
-      class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
+      class="mb-0 px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
     >
       {{ $t('sideToolbar.nodeLibraryTab.sections.bookmarked') }}
     </h3>
@@ -22,7 +22,7 @@
     <div v-for="(section, index) in sections" :key="section.category ?? index">
       <h3
         v-if="section.category && sortOrder !== 'alphabetical'"
-        class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
+        class="mb-0 px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
       >
         {{ $t(NODE_CATEGORY_LABELS[section.category]) }}
       </h3>
diff --git a/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue b/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue
index 7cb5659614..5d25b955c2 100644
--- a/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue
@@ -1,9 +1,9 @@
 <template>
-  <TabsContent value="blueprints" class="flex-1 overflow-y-auto h-full">
+  <TabsContent value="blueprints" class="h-full flex-1 overflow-y-auto">
     <div v-for="(section, index) in sections" :key="section.title ?? index">
       <h3
         v-if="section.title"
-        class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
+        class="mb-0 px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
       >
         {{ $t(section.title) }}
       </h3>
diff --git a/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue b/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
index 02ec00ddfe..322673ce35 100644
--- a/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
@@ -1,14 +1,14 @@
 <template>
-  <TabsContent value="custom" class="flex-1 flex flex-col h-full">
+  <TabsContent value="custom" class="flex h-full flex-1 flex-col">
     <div
       v-for="(section, index) in sections"
       :key="section.title ?? index"
-      class="flex-1 overflow-y-auto h-full"
+      class="h-full flex-1 overflow-y-auto"
     >
       <!-- Section header -->
       <h3
         v-if="section.title"
-        class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
+        class="mb-0 px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
       >
         {{ section.title }}
       </h3>
@@ -20,7 +20,7 @@
         @node-click="(node) => emit('nodeClick', node)"
       />
     </div>
-    <div class="flex-none py-3 border-t border-border-default text-center">
+    <div class="flex-none border-t border-border-default py-3 text-center">
       <Button
         variant="secondary"
         class="justify-start gap-3"
diff --git a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
index a452399085..d3cd15b0cd 100644
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group relative flex flex-col items-center justify-center py-3 px-2 rounded-lg cursor-pointer select-none transition-colors duration-150 box-content bg-component-node-background hover:bg-secondary-background-hover"
+    class="group relative box-content flex cursor-pointer flex-col items-center justify-center rounded-lg bg-component-node-background px-2 py-3 transition-colors duration-150 select-none hover:bg-secondary-background-hover"
     :data-node-name="node.label"
     draggable="true"
     @click="handleClick"
@@ -12,7 +12,7 @@
     <i :class="cn(nodeIcon, 'size-6 text-muted-foreground')" />
 
     <TextTickerMultiLine
-      class="shrink-0 h-7 w-full text-xs/normal font-normal text-foreground mt-2"
+      class="text-foreground mt-2 h-7 w-full shrink-0 text-xs/normal font-normal"
     >
       {{ node.label }}
     </TextTickerMultiLine>
diff --git a/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue b/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue
index 5d7ca537ba..0b92ce95ec 100644
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue
@@ -2,7 +2,7 @@
   <TabsContent
     ref="panelEl"
     value="essentials"
-    class="flex-1 overflow-y-auto px-3 h-full"
+    class="h-full flex-1 overflow-y-auto px-3"
   >
     <div class="flex flex-col gap-2 pb-6">
       <!-- Flat sorted grid when alphabetical -->
@@ -28,7 +28,7 @@
           @update:open="toggleFolder(folder.key, $event)"
         >
           <CollapsibleTrigger
-            class="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-3 px-1 text-xs font-medium tracking-wide text-muted-foreground h-8 box-content"
+            class="group box-content flex h-8 w-full cursor-pointer items-center justify-between border-0 bg-transparent px-1 py-3 text-xs font-medium tracking-wide text-muted-foreground"
           >
             <span class="uppercase">{{ folder.label }}</span>
             <i
diff --git a/src/components/tab/Tab.vue b/src/components/tab/Tab.vue
index 5176ef24e3..22cf06930b 100644
--- a/src/components/tab/Tab.vue
+++ b/src/components/tab/Tab.vue
@@ -32,12 +32,12 @@ const isActive = computed(() => currentValue?.value === value)
 const tabClasses = computed(() => {
   return cn(
     // Base styles from TextButton
-    'flex items-center justify-center shrink-0',
-    'px-2.5 py-2 text-sm rounded-lg cursor-pointer transition-all duration-200',
-    'outline-hidden border-none',
+    'flex shrink-0 items-center justify-center',
+    'cursor-pointer rounded-lg px-2.5 py-2 text-sm transition-all duration-200',
+    'border-none outline-hidden',
     // State styles with semantic tokens
     isActive.value
-      ? 'bg-interface-menu-component-surface-hovered text-text-primary text-bold'
+      ? 'text-bold bg-interface-menu-component-surface-hovered text-text-primary'
       : 'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'
   )
 })
diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index b77fac90af..1b538a6cae 100644
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -11,7 +11,7 @@
       <div
         :class="
           cn(
-            'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
+            'flex items-center justify-center gap-1 rounded-full hover:bg-interface-button-hover-surface',
             compact && 'size-full'
           )
         "
diff --git a/src/components/topbar/CurrentUserPopoverLegacy.vue b/src/components/topbar/CurrentUserPopoverLegacy.vue
index f3dced10cd..8159ee86f4 100644
--- a/src/components/topbar/CurrentUserPopoverLegacy.vue
+++ b/src/components/topbar/CurrentUserPopoverLegacy.vue
@@ -1,10 +1,10 @@
 <!-- A popover that shows current user information and actions -->
 <template>
   <div
-    class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+    class="current-user-popover -m-3 w-80 rounded-lg border border-border-default bg-base-background p-2 shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
   >
     <!-- User Info Section -->
-    <div class="flex flex-col items-center px-0 py-3 mb-4">
+    <div class="mb-4 flex flex-col items-center px-0 py-3">
       <UserAvatar
         class="mb-1"
         :photo-url="userPhotoUrl"
@@ -23,7 +23,7 @@
       </p>
       <span
         v-if="subscriptionTierName"
-        class="my-0 text-xs text-foreground bg-secondary-background-hover rounded-full uppercase px-2 py-0.5 font-bold mt-2"
+        class="text-foreground my-0 mt-2 rounded-full bg-secondary-background-hover px-2 py-0.5 text-xs font-bold uppercase"
       >
         {{ subscriptionTierName }}
       </span>
@@ -31,7 +31,7 @@
 
     <!-- Credits Section -->
     <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
-      <i class="icon-[lucide--component] text-amber-400 text-sm" />
+      <i class="icon-[lucide--component] text-sm text-amber-400" />
       <Skeleton
         v-if="authStore.isFetchingBalance"
         width="4rem"
@@ -43,7 +43,7 @@
       }}</span>
       <i
         v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-        class="icon-[lucide--circle-help] cursor-help text-base text-muted-foreground mr-auto"
+        class="mr-auto icon-[lucide--circle-help] cursor-help text-base text-muted-foreground"
       />
       <Button
         v-if="isFreeTier"
@@ -76,32 +76,32 @@
       />
     </div>
 
-    <Divider class="my-2 mx-0" />
+    <Divider class="mx-0 my-2" />
 
     <div
       v-if="isActiveSubscription"
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="partner-nodes-menu-item"
       @click="handleOpenPartnerNodesInfo"
     >
-      <i class="icon-[lucide--tag] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--tag] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('subscription.partnerNodesCredits')
       }}</span>
     </div>
 
     <div
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="plans-pricing-menu-item"
       @click="handleOpenPlansAndPricing"
     >
-      <i class="icon-[lucide--receipt-text] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--receipt-text] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('subscription.plansAndPricing')
       }}</span>
       <span
         v-if="canUpgrade"
-        class="text-xs font-bold text-base-background bg-base-foreground px-1.5 py-0.5 rounded-full"
+        class="rounded-full bg-base-foreground px-1.5 py-0.5 text-xs font-bold text-base-background"
       >
         {{ $t('subscription.upgrade') }}
       </span>
@@ -109,36 +109,36 @@
 
     <div
       v-if="isActiveSubscription"
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="manage-plan-menu-item"
       @click="handleOpenPlanAndCreditsSettings"
     >
-      <i class="icon-[lucide--file-text] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--file-text] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('subscription.managePlan')
       }}</span>
     </div>
 
     <div
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="user-settings-menu-item"
       @click="handleOpenUserSettings"
     >
-      <i class="icon-[lucide--settings-2] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--settings-2] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('userSettings.accountSettings')
       }}</span>
     </div>
 
-    <Divider class="my-2 mx-0" />
+    <Divider class="mx-0 my-2" />
 
     <div
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="logout-menu-item"
       @click="handleLogout"
     >
-      <i class="icon-[lucide--log-out] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
+      <i class="icon-[lucide--log-out] text-sm text-muted-foreground" />
+      <span class="flex-1 text-sm text-base-foreground">{{
         $t('auth.signOut.signOut')
       }}</span>
     </div>
diff --git a/src/components/topbar/LoginButton.vue b/src/components/topbar/LoginButton.vue
index f9d85f73bf..e755c25eda 100644
--- a/src/components/topbar/LoginButton.vue
+++ b/src/components/topbar/LoginButton.vue
@@ -3,7 +3,7 @@
     v-if="!isLoggedIn"
     variant="textonly"
     size="icon"
-    :class="cn('group rounded-full text-base-foreground p-0', className)"
+    :class="cn('group rounded-full p-0 text-base-foreground', className)"
     :aria-label="t('g.login')"
     @click="handleSignIn()"
     @mouseenter="showPopover"
diff --git a/src/components/topbar/TopMenuHelpButton.vue b/src/components/topbar/TopMenuHelpButton.vue
index b7f1fe5a81..0dd24b0939 100644
--- a/src/components/topbar/TopMenuHelpButton.vue
+++ b/src/components/topbar/TopMenuHelpButton.vue
@@ -5,7 +5,7 @@
     @click="toggleHelpCenter"
   >
     <div class="not-md:hidden">{{ $t('menu.helpAndFeedback') }}</div>
-    <i class="icon-[lucide--circle-help] ml-0.5" />
+    <i class="ml-0.5 icon-[lucide--circle-help]" />
     <span
       v-if="shouldShowRedDot"
       class="absolute top-[7px] right-[7px] size-1.5 rounded-full bg-[#ff3b30]"
diff --git a/src/components/topbar/TopbarBadge.vue b/src/components/topbar/TopbarBadge.vue
index 3f8df46038..179589397c 100644
--- a/src/components/topbar/TopbarBadge.vue
+++ b/src/components/topbar/TopbarBadge.vue
@@ -37,7 +37,7 @@
         >
           {{ badge.label }}
         </div>
-        <div class="text-sm font-inter">{{ badge.text }}</div>
+        <div class="font-inter text-sm">{{ badge.text }}</div>
         <div v-if="badge.tooltip" class="text-xs">
           {{ badge.tooltip }}
         </div>
@@ -90,7 +90,7 @@
         >
           {{ badge.label }}
         </div>
-        <div class="text-sm font-inter">{{ badge.text }}</div>
+        <div class="font-inter text-sm">{{ badge.text }}</div>
         <div v-if="badge.tooltip" class="text-xs">
           {{ badge.tooltip }}
         </div>
diff --git a/src/components/topbar/WorkflowOverflowMenu.vue b/src/components/topbar/WorkflowOverflowMenu.vue
index f22ebfe13f..aa28177199 100644
--- a/src/components/topbar/WorkflowOverflowMenu.vue
+++ b/src/components/topbar/WorkflowOverflowMenu.vue
@@ -2,7 +2,7 @@
   <div>
     <Button
       v-tooltip="{ value: $t('g.moreWorkflows'), showDelay: 300 }"
-      class="rounded-none h-full w-auto aspect-square"
+      class="aspect-square h-full w-auto rounded-none"
       variant="muted-textonly"
       size="icon"
       :aria-label="$t('g.moreWorkflows')"
diff --git a/src/components/topbar/WorkflowTab.vue b/src/components/topbar/WorkflowTab.vue
index 226971f4b8..8c1e139b59 100644
--- a/src/components/topbar/WorkflowTab.vue
+++ b/src/components/topbar/WorkflowTab.vue
@@ -39,7 +39,7 @@
     </ContextMenuTrigger>
     <ContextMenuPortal>
       <ContextMenuContent
-        class="z-1000 rounded-lg px-2 py-3 min-w-56 bg-base-background shadow-interface border border-border-subtle"
+        class="z-1000 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
       >
         <WorkflowActionsList
           :items="contextMenuItems"
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 306449f514..21d265662b 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -8,7 +8,7 @@
       v-if="showOverflowArrows"
       variant="muted-textonly"
       size="icon"
-      class="overflow-arrow overflow-arrow-left h-full w-auto aspect-square"
+      class="overflow-arrow overflow-arrow-left aspect-square h-full w-auto"
       :aria-label="$t('g.scrollLeft')"
       :disabled="!leftArrowEnabled"
       @mousedown="whileMouseDown($event, () => scroll(-1))"
@@ -54,7 +54,7 @@
       v-if="showOverflowArrows"
       variant="muted-textonly"
       size="icon"
-      class="overflow-arrow overflow-arrow-right h-full w-auto aspect-square"
+      class="overflow-arrow overflow-arrow-right aspect-square h-full w-auto"
       :aria-label="$t('g.scrollRight')"
       :disabled="!rightArrowEnabled"
       @mousedown="whileMouseDown($event, () => scroll(1))"
@@ -71,7 +71,7 @@
         value: $t('sideToolbar.newBlankWorkflow'),
         showDelay: 300
       }"
-      class="new-blank-workflow-button no-drag shrink-0 rounded-none h-full w-auto aspect-square"
+      class="new-blank-workflow-button no-drag aspect-square h-full w-auto shrink-0 rounded-none"
       variant="muted-textonly"
       size="icon"
       :aria-label="$t('sideToolbar.newBlankWorkflow')"
@@ -88,7 +88,7 @@
         v-if="isLoggedIn"
         :show-arrow="false"
         compact
-        class="shrink-0 p-1 grid w-10"
+        class="grid w-10 shrink-0 p-1"
       />
       <LoginButton v-else-if="isDesktop" class="p-1" />
     </div>
diff --git a/src/components/ui/Popover.vue b/src/components/ui/Popover.vue
index f459503c97..ed101e5c72 100644
--- a/src/components/ui/Popover.vue
+++ b/src/components/ui/Popover.vue
@@ -43,22 +43,22 @@ const {
         :side-offset="5"
         :collision-padding="10"
         v-bind="$attrs"
-        class="z-1700 rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+        class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade z-1700 rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[transform,opacity]"
       >
         <slot :close>
           <div class="flex flex-col p-1">
             <template v-for="item in entries ?? []" :key="item.label">
               <div
                 v-if="item.separator"
-                class="border-b w-full border-border-subtle"
+                class="w-full border-b border-border-subtle"
               />
               <div
                 v-else
                 :class="
                   cn(
-                    'flex flex-row gap-4 p-2 rounded-sm my-1',
+                    'my-1 flex flex-row gap-4 rounded-sm p-2',
                     item.disabled
-                      ? 'opacity-50 pointer-events-none'
+                      ? 'pointer-events-none opacity-50'
                       : item.command &&
                           'cursor-pointer hover:bg-secondary-background-hover'
                   )
diff --git a/src/components/ui/ZoomPane.vue b/src/components/ui/ZoomPane.vue
index 2cbb286adf..37962914eb 100644
--- a/src/components/ui/ZoomPane.vue
+++ b/src/components/ui/ZoomPane.vue
@@ -47,7 +47,7 @@ const transform = computed(() => {
 <template>
   <div
     ref="zoomPane"
-    class="contain-size place-content-center"
+    class="place-content-center contain-size"
     @wheel="handleWheel"
     @pointerdown.prevent="handleDown"
     @pointermove="handleMove"
diff --git a/src/components/ui/button/button.variants.ts b/src/components/ui/button/button.variants.ts
index a2d72bc6a4..4ac679256a 100644
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -6,7 +6,7 @@ export const buttonVariants = cva({
   variants: {
     variant: {
       secondary:
-        'bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover',
+        'text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover',
       primary:
         'bg-primary-background text-base-foreground hover:bg-primary-background-hover',
       inverted:
@@ -14,14 +14,14 @@ export const buttonVariants = cva({
       destructive:
         'bg-destructive-background text-base-foreground hover:bg-destructive-background-hover',
       textonly:
-        'text-base-foreground bg-transparent hover:bg-secondary-background-hover',
+        'bg-transparent text-base-foreground hover:bg-secondary-background-hover',
       'muted-textonly':
-        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
+        'bg-transparent text-muted-foreground hover:bg-secondary-background-hover',
       'destructive-textonly':
-        'text-destructive-background bg-transparent hover:bg-destructive-background/10',
+        'bg-transparent text-destructive-background hover:bg-destructive-background/10',
       'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
       gradient:
-        'bg-(image:--subscription-button-gradient) text-white border-transparent hover:opacity-90'
+        'border-transparent bg-(image:--subscription-button-gradient) text-white hover:opacity-90'
     },
     size: {
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
diff --git a/src/components/ui/input/Input.vue b/src/components/ui/input/Input.vue
index 906505b7fa..557c0cba28 100644
--- a/src/components/ui/input/Input.vue
+++ b/src/components/ui/input/Input.vue
@@ -24,7 +24,7 @@ defineExpose({
     v-model="modelValue"
     :class="
       cn(
-        'flex h-10 w-full min-w-0 appearance-none rounded-lg border-none bg-secondary-background px-4 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-default disabled:pointer-events-none disabled:opacity-50',
+        'flex h-10 w-full min-w-0 appearance-none rounded-lg border-none bg-secondary-background px-4 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border-default focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
         className
       )
     "
diff --git a/src/components/ui/search-input/SearchInput.vue b/src/components/ui/search-input/SearchInput.vue
index 3a548a9183..d4bbc78e5b 100644
--- a/src/components/ui/search-input/SearchInput.vue
+++ b/src/components/ui/search-input/SearchInput.vue
@@ -4,7 +4,7 @@
       :class="
         cn(
           searchInputVariants({ size }),
-          disabled && 'opacity-50 pointer-events-none',
+          disabled && 'pointer-events-none opacity-50',
           className
         )
       "
@@ -24,7 +24,7 @@
         v-else-if="loading"
         :class="
           cn(
-            'icon-[lucide--loader-circle] absolute animate-spin pointer-events-none',
+            'pointer-events-none absolute icon-[lucide--loader-circle] animate-spin',
             sizeConfig.iconPos,
             sizeConfig.icon
           )
@@ -34,7 +34,7 @@
         v-else
         :class="
           cn(
-            'absolute pointer-events-none',
+            'pointer-events-none absolute',
             sizeConfig.iconPos,
             sizeConfig.icon,
             icon
diff --git a/src/components/ui/select/SelectContent.vue b/src/components/ui/select/SelectContent.vue
index db1b705f3f..8e0595eddf 100644
--- a/src/components/ui/select/SelectContent.vue
+++ b/src/components/ui/select/SelectContent.vue
@@ -53,7 +53,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           'bg-base-background text-base-foreground',
           'border border-solid border-border-default',
           'shadow-md',
-          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:animate-out data-[state=open]:animate-in',
           'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
           'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
           'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
@@ -68,7 +68,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <SelectViewport
         :class="
           cn(
-            'scrollbar-custom flex flex-col gap-0',
+            'flex scrollbar-custom flex-col gap-0',
             position === 'popper' &&
               'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)'
           )
diff --git a/src/components/ui/select/SelectItem.vue b/src/components/ui/select/SelectItem.vue
index 4df78e6460..acf6bcadda 100644
--- a/src/components/ui/select/SelectItem.vue
+++ b/src/components/ui/select/SelectItem.vue
@@ -15,7 +15,7 @@ const { class: className, ...restProps } = defineProps<
     v-bind="restProps"
     :class="
       cn(
-        'relative flex w-full cursor-pointer select-none items-center justify-between',
+        'relative flex w-full cursor-pointer items-center justify-between select-none',
         'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
         'hover:bg-secondary-background-hover',
         'focus:bg-secondary-background-hover',
diff --git a/src/components/ui/select/SelectLabel.vue b/src/components/ui/select/SelectLabel.vue
index bafe45da9b..38a59f4590 100644
--- a/src/components/ui/select/SelectLabel.vue
+++ b/src/components/ui/select/SelectLabel.vue
@@ -15,7 +15,7 @@ const { class: className, ...restProps } = defineProps<
     v-bind="restProps"
     :class="
       cn(
-        'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground',
+        'px-3 py-2 text-xs tracking-wide text-muted-foreground uppercase',
         className
       )
     "
diff --git a/src/components/ui/select/SelectTrigger.vue b/src/components/ui/select/SelectTrigger.vue
index 1926fc412c..77f59b7b80 100644
--- a/src/components/ui/select/SelectTrigger.vue
+++ b/src/components/ui/select/SelectTrigger.vue
@@ -15,7 +15,7 @@ const { class: className, ...restProps } = defineProps<
     v-bind="restProps"
     :class="
       cn(
-        'flex h-10 w-full cursor-pointer select-none items-center justify-between',
+        'flex h-10 w-full cursor-pointer items-center justify-between select-none',
         'rounded-lg px-4 py-2 text-sm',
         'bg-secondary-background text-base-foreground',
         'border-[2.5px] border-solid border-transparent',
diff --git a/src/components/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue
index d0177cb558..98c924a6bf 100644
--- a/src/components/ui/slider/Slider.vue
+++ b/src/components/ui/slider/Slider.vue
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="slider-track"
       :class="
         cn(
-          'bg-node-stroke relative grow overflow-hidden rounded-full',
+          'relative grow overflow-hidden rounded-full bg-node-stroke',
           'cursor-pointer overflow-visible',
           `before:absolute before:-inset-2 before:block before:bg-transparent`,
           'data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full',
@@ -70,9 +70,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="slider-thumb"
       :class="
         cn(
-          'bg-node-component-surface-highlight ring-node-component-surface-selected block size-3.5 shrink-0 rounded-full shadow-sm transition-[color,box-shadow]',
+          'block size-3.5 shrink-0 rounded-full bg-node-component-surface-highlight shadow-sm ring-node-component-surface-selected transition-[color,box-shadow]',
           'cursor-grab',
-          'before:absolute before:-inset-1 before:block before:bg-transparent before:rounded-full',
+          'before:absolute before:-inset-1 before:block before:rounded-full before:bg-transparent',
           'hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
           { 'cursor-grabbing': pressed }
         )
diff --git a/src/components/ui/stepper/FormattedNumberStepper.vue b/src/components/ui/stepper/FormattedNumberStepper.vue
index 21018781bd..5ed3993a62 100644
--- a/src/components/ui/stepper/FormattedNumberStepper.vue
+++ b/src/components/ui/stepper/FormattedNumberStepper.vue
@@ -3,14 +3,14 @@
     :for="inputId"
     :class="
       cn(
-        'flex h-10 cursor-text items-center rounded-lg bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover focus-within:ring-1 focus-within:ring-secondary-foreground',
-        disabled && 'opacity-50 pointer-events-none'
+        'text-secondary-foreground focus-within:ring-secondary-foreground flex h-10 cursor-text items-center rounded-lg bg-secondary-background focus-within:ring-1 hover:bg-secondary-background-hover',
+        disabled && 'pointer-events-none opacity-50'
       )
     "
   >
     <button
       type="button"
-      class="flex h-full w-8 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
+      class="focus-visible:ring-secondary-foreground flex h-full w-8 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset disabled:opacity-30"
       :disabled="disabled || modelValue <= min"
       :aria-label="$t('g.decrement')"
       @click="handleStep(-1)"
@@ -28,7 +28,7 @@
         type="text"
         inputmode="numeric"
         :style="{ width: `${inputWidth}ch` }"
-        class="min-w-0 rounded-sm border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
+        class="min-w-0 rounded-sm border-none bg-transparent text-center text-lg font-medium text-base-foreground focus-visible:outline-none"
         :disabled="disabled"
         @input="handleInputChange"
         @blur="handleInputBlur"
@@ -38,7 +38,7 @@
     </div>
     <button
       type="button"
-      class="flex h-full w-8 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
+      class="focus-visible:ring-secondary-foreground flex h-full w-8 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset disabled:opacity-30"
       :disabled="disabled || modelValue >= max"
       :aria-label="$t('g.increment')"
       @click="handleStep(1)"
diff --git a/src/components/ui/tags-input/TagsInput.vue b/src/components/ui/tags-input/TagsInput.vue
index 2ecdb6c10d..e894f68d1f 100644
--- a/src/components/ui/tags-input/TagsInput.vue
+++ b/src/components/ui/tags-input/TagsInput.vue
@@ -69,7 +69,7 @@ onClickOutside(rootEl, () => {
       cn(
         'group relative flex flex-wrap items-center gap-2 rounded-lg bg-transparent p-2 text-xs text-base-foreground',
         !internalDisabled &&
-          'hover:bg-modal-card-background-hovered focus-within:bg-modal-card-background-hovered',
+          'focus-within:bg-modal-card-background-hovered hover:bg-modal-card-background-hovered',
         !disabled && !isEditingEnabled && 'cursor-pointer',
         className
       )
@@ -80,7 +80,7 @@ onClickOutside(rootEl, () => {
     <i
       v-if="!disabled && !isEditingEnabled"
       aria-hidden="true"
-      class="icon-[lucide--square-pen] absolute bottom-2 right-2 size-4 text-muted-foreground transition-opacity opacity-0 group-hover:opacity-100"
+      class="absolute right-2 bottom-2 icon-[lucide--square-pen] size-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
     />
   </TagsInputRoot>
 </template>
diff --git a/src/components/ui/tags-input/TagsInputInput.vue b/src/components/ui/tags-input/TagsInputInput.vue
index 320b89f97c..343cc6881f 100644
--- a/src/components/ui/tags-input/TagsInputInput.vue
+++ b/src/components/ui/tags-input/TagsInputInput.vue
@@ -44,7 +44,7 @@ onUnmounted(() => {
     v-bind="forwardedProps"
     :class="
       cn(
-        'min-h-6 flex-1 bg-transparent text-xs text-muted-foreground placeholder:text-muted-foreground focus:outline-none appearance-none border-none',
+        'min-h-6 flex-1 appearance-none border-none bg-transparent text-xs text-muted-foreground placeholder:text-muted-foreground focus:outline-none',
         !isEditing && 'pointer-events-none',
         className
       )
diff --git a/src/components/ui/tags-input/TagsInputItem.vue b/src/components/ui/tags-input/TagsInputItem.vue
index 40cdab511f..037920001d 100644
--- a/src/components/ui/tags-input/TagsInputItem.vue
+++ b/src/components/ui/tags-input/TagsInputItem.vue
@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(restProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'flex h-6 items-center gap-1 rounded-sm bg-modal-card-tag-background py-1 pl-2 pr-1 text-modal-card-tag-foreground backdrop-blur-sm ring-offset-base-background data-[state=active]:ring-2 data-[state=active]:ring-base-foreground data-[state=active]:ring-offset-1',
+        'flex h-6 items-center gap-1 rounded-sm bg-modal-card-tag-background py-1 pr-1 pl-2 text-modal-card-tag-foreground ring-offset-base-background backdrop-blur-sm data-[state=active]:ring-2 data-[state=active]:ring-base-foreground data-[state=active]:ring-offset-1',
         className
       )
     "
diff --git a/src/components/ui/tags-input/TagsInputItemDelete.vue b/src/components/ui/tags-input/TagsInputItemDelete.vue
index a2493f7e96..9496f4aaca 100644
--- a/src/components/ui/tags-input/TagsInputItemDelete.vue
+++ b/src/components/ui/tags-input/TagsInputItemDelete.vue
@@ -24,7 +24,7 @@ const { t } = useI18n()
     :aria-label="t('g.removeTag')"
     :class="
       cn(
-        'opacity-60 hover:bg-transparent hover:opacity-100 transition-[opacity,width] duration-150 w-4 data-disabled:w-0 data-disabled:opacity-0 data-disabled:pointer-events-none overflow-hidden',
+        'w-4 overflow-hidden opacity-60 transition-[opacity,width] duration-150 hover:bg-transparent hover:opacity-100 data-disabled:pointer-events-none data-disabled:w-0 data-disabled:opacity-0',
         className
       )
     "
diff --git a/src/components/ui/textarea/Textarea.vue b/src/components/ui/textarea/Textarea.vue
index b96f066501..f07f3f5bf8 100644
--- a/src/components/ui/textarea/Textarea.vue
+++ b/src/components/ui/textarea/Textarea.vue
@@ -16,7 +16,7 @@ const modelValue = defineModel<string | number>()
     v-model="modelValue"
     :class="
       cn(
-        'flex min-h-16 w-full rounded-lg border-none bg-secondary-background px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-default disabled:pointer-events-none disabled:opacity-50',
+        'flex min-h-16 w-full rounded-lg border-none bg-secondary-background px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border-default focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
         className
       )
     "
diff --git a/src/components/ui/toggle-group/ToggleGroupItem.vue b/src/components/ui/toggle-group/ToggleGroupItem.vue
index 296402dd59..d4207c5491 100644
--- a/src/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -40,7 +40,7 @@ const resolvedVariant = computed(
     :class="
       cn(
         toggleGroupItemVariants({ variant: resolvedVariant, size }),
-        'flex-1 min-w-0 truncate',
+        'min-w-0 flex-1 truncate',
         className
       )
     "
diff --git a/src/components/ui/toggle-group/toggleGroup.variants.ts b/src/components/ui/toggle-group/toggleGroup.variants.ts
index a11bc0600b..122a897509 100644
--- a/src/components/ui/toggle-group/toggleGroup.variants.ts
+++ b/src/components/ui/toggle-group/toggleGroup.variants.ts
@@ -33,9 +33,9 @@ export const toggleGroupItemVariants = cva({
   variants: {
     variant: {
       default:
-        'bg-transparent hover:bg-interface-menu-component-surface-selected/50 text-text-secondary',
+        'bg-transparent text-text-secondary hover:bg-interface-menu-component-surface-selected/50',
       outline:
-        'border border-border-default bg-transparent hover:bg-secondary-background text-text-secondary'
+        'border border-border-default bg-transparent text-text-secondary hover:bg-secondary-background'
     },
     size: {
       default: 'h-7 px-3 text-sm',
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index 733d5c4643..615301e5a0 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="cn('rounded-2xl overflow-hidden relative', sizeClasses)"
+    :class="cn('relative overflow-hidden rounded-2xl', sizeClasses)"
     @keydown.esc.capture="handleEscape"
   >
     <div
@@ -8,19 +8,19 @@
       :style="gridStyle"
     >
       <nav
-        class="h-full overflow-hidden bg-modal-panel-background flex flex-col"
+        class="flex h-full flex-col overflow-hidden bg-modal-panel-background"
         :inert="!showLeftPanel"
         :aria-hidden="!showLeftPanel"
       >
         <header
           data-component-id="LeftPanelHeader"
-          class="flex w-full h-18 shrink-0 gap-2 pl-6 pr-3 items-center-safe"
+          class="flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6"
         >
           <slot name="leftPanelHeaderTitle" />
           <Button
             v-if="!notMobile && showLeftPanel"
             size="lg"
-            class="w-10 p-0 ml-auto"
+            class="ml-auto w-10 p-0"
             :aria-label="t('g.hideLeftPanel')"
             @click="toggleLeftPanel"
           >
@@ -30,10 +30,10 @@
         <slot name="leftPanel" />
       </nav>
 
-      <div class="flex flex-col bg-base-background overflow-hidden">
+      <div class="flex flex-col overflow-hidden bg-base-background">
         <header
           v-if="$slots.header"
-          class="w-full h-18 px-6 flex items-center justify-between gap-2"
+          class="flex h-18 w-full items-center justify-between gap-2 px-6"
         >
           <div class="flex flex-1 shrink-0 gap-2">
             <Button
@@ -73,7 +73,7 @@
           <slot name="contentFilter" />
           <h2
             v-if="!hasLeftPanel"
-            class="text-xxl m-0 select-none px-6 pt-2 pb-6 capitalize"
+            class="text-xxl m-0 px-6 pt-2 pb-6 capitalize select-none"
           >
             {{ contentTitle }}
           </h2>
@@ -90,7 +90,7 @@
         :aria-hidden="!isRightPanelOpen"
       >
         <div
-          class="min-w-72 w-72 flex flex-col bg-modal-panel-background h-full"
+          class="flex h-full w-72 min-w-72 flex-col bg-modal-panel-background"
         >
           <header
             data-component-id="RightPanelHeader"
@@ -98,7 +98,7 @@
           >
             <h2
               v-if="rightPanelTitle"
-              class="flex-1 select-none text-base font-semibold"
+              class="flex-1 text-base font-semibold select-none"
             >
               {{ rightPanelTitle }}
             </h2>
@@ -202,7 +202,7 @@ const showLeftPanel = computed(() => {
 
 const contentContainerClass = computed(() =>
   cn(
-    'flex min-h-0 flex-1 flex-col overflow-y-auto scrollbar-custom',
+    'flex scrollbar-custom min-h-0 flex-1 flex-col overflow-y-auto',
     contentPadding === 'default' && 'px-6 pt-0 pb-10',
     contentPadding === 'compact' && 'px-6 pt-0 pb-2'
   )
diff --git a/src/components/widget/nav/NavIcon.vue b/src/components/widget/nav/NavIcon.vue
index 91f70e23af..cde652f0f8 100644
--- a/src/components/widget/nav/NavIcon.vue
+++ b/src/components/widget/nav/NavIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <i :class="icon" class="text-neutral text-sm shrink-0" />
+  <i :class="icon" class="text-neutral shrink-0 text-sm" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 19579074dc..79116e5bcf 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -5,7 +5,7 @@
       disabled: !isOverflowing,
       pt: { text: { class: 'w-max whitespace-nowrap' } }
     }"
-    class="flex cursor-pointer select-none items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
@@ -16,7 +16,7 @@
     @click="onClick"
   >
     <NavIcon v-if="icon" :icon="icon" />
-    <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
+    <i v-else class="text-neutral icon-[lucide--folder] shrink-0 text-xs" />
     <span ref="textRef" class="min-w-0 truncate">
       <slot />
     </span>
diff --git a/src/components/widget/nav/NavTitle.vue b/src/components/widget/nav/NavTitle.vue
index 3cd00b52ce..0f348d3fc7 100644
--- a/src/components/widget/nav/NavTitle.vue
+++ b/src/components/widget/nav/NavTitle.vue
@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'flex items-center justify-between m-0 px-3 py-0 pt-5',
+        'm-0 flex items-center justify-between px-3 py-0 pt-5',
         collapsible && 'cursor-pointer select-none'
       )
     "
@@ -15,7 +15,7 @@
       v-if="collapsible"
       :class="
         cn(
-          'pi transition-transform duration-200 text-xs text-text-secondary',
+          'pi text-xs text-text-secondary transition-transform duration-200',
           isCollapsed ? 'pi-chevron-right' : 'pi-chevron-down'
         )
       "
diff --git a/src/components/widget/panel/LeftSidePanel.vue b/src/components/widget/panel/LeftSidePanel.vue
index 3711897f87..44483aa9f9 100644
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/src/components/widget/panel/LeftSidePanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex w-full flex-auto overflow-y-auto gap-1 min-h-0 flex-col bg-modal-panel-background scrollbar-hide px-3"
+    class="flex min-h-0 scrollbar-hide w-full flex-auto flex-col gap-1 overflow-y-auto bg-modal-panel-background px-3"
   >
     <template
       v-for="item in navItems"
diff --git a/src/platform/assets/components/ActiveMediaAssetCard.vue b/src/platform/assets/components/ActiveMediaAssetCard.vue
index db1fcb81bf..d6ba7c4b61 100644
--- a/src/platform/assets/components/ActiveMediaAssetCard.vue
+++ b/src/platform/assets/components/ActiveMediaAssetCard.vue
@@ -3,7 +3,7 @@
     role="status"
     tabindex="0"
     :aria-label="t('sideToolbar.activeJobStatus', { status: statusText })"
-    class="flex flex-col gap-2 p-2 rounded-lg"
+    class="flex flex-col gap-2 rounded-lg p-2"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
     @focusin="hovered = true"
@@ -47,13 +47,13 @@
     </div>
 
     <!-- Footer: Progress bar or status text -->
-    <div class="flex gap-1.5 items-center h-5">
+    <div class="flex h-5 items-center gap-1.5">
       <!-- Running state: percentage + progress bar -->
       <template v-if="isRunning && hasProgressPercent(progressPercent)">
         <span class="shrink-0 text-sm text-muted-foreground">
           {{ Math.round(progressPercent ?? 0) }}%
         </span>
-        <div class="flex-1 relative h-1 rounded-sm bg-secondary-background">
+        <div class="relative h-1 flex-1 rounded-sm bg-secondary-background">
           <div
             :class="progressBarPrimaryClass"
             :style="progressPercentStyle(progressPercent)"
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 6e899b89c2..82c2211134 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    class="absolute left-2 bottom-2 flex flex-wrap justify-start gap-1 select-none"
+    class="absolute bottom-2 left-2 flex flex-wrap justify-start gap-1 select-none"
   >
     <span
       v-for="badge in badges"
       :key="badge.label"
       :class="
         cn(
-          'px-2 py-1 rounded-sm text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
+          'rounded-sm bg-modal-card-tag-background px-2 py-1 text-xs font-bold tracking-wider break-all text-modal-card-tag-foreground uppercase'
         )
       "
     >
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index f04c8f5115..1fe04e955f 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -9,7 +9,7 @@
   >
     <template v-if="shouldShowLeftPanel" #leftPanelHeaderTitle>
       <i class="icon-[comfy--ai-model] size-4" />
-      <h2 class="flex-auto select-none text-base font-semibold text-nowrap">
+      <h2 class="flex-auto text-base font-semibold text-nowrap select-none">
         {{ displayTitle }}
       </h2>
     </template>
@@ -75,7 +75,7 @@
       <ModelInfoPanel v-if="focusedAsset" :asset="focusedAsset" :cache-key />
       <div
         v-else
-        class="flex h-full items-center justify-center wrap-break-word p-6 text-center text-muted"
+        class="flex h-full items-center justify-center p-6 text-center wrap-break-word text-muted"
       >
         {{ $t('assetBrowser.modelInfo.selectModelPrompt') }}
       </div>
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index afcb542825..38c271fb38 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -7,9 +7,9 @@
     :tabindex="interactive ? 0 : -1"
     :class="
       cn(
-        'select-none rounded-2xl overflow-hidden transition-all duration-200 bg-modal-card-background p-2 gap-2 flex flex-col h-full',
+        'flex h-full flex-col gap-2 overflow-hidden rounded-2xl bg-modal-card-background p-2 transition-all duration-200 select-none',
         interactive &&
-          'group appearance-none bg-transparent m-0 outline-none text-left hover:bg-secondary-background focus:bg-secondary-background border-none focus:outline-solid outline-base-foreground outline-4',
+          'group m-0 appearance-none border-none bg-transparent text-left outline-4 outline-base-foreground outline-none hover:bg-secondary-background focus:bg-secondary-background focus:outline-solid',
         focused && 'bg-secondary-background outline-solid'
       )
     "
@@ -26,14 +26,14 @@
         v-else
         :src="asset.preview_url"
         :alt="displayName"
-        class="size-full object-cover cursor-pointer"
+        class="size-full cursor-pointer object-cover"
       />
 
       <AssetBadgeGroup :badges="asset.badges" />
       <IconGroup
         :class="
           cn(
-            'absolute top-2 right-2 invisible group-hover:visible',
+            'invisible absolute top-2 right-2 group-hover:visible',
             dropdownMenuButton?.isOpen && 'visible'
           )
         "
@@ -66,13 +66,13 @@
         </MoreButton>
       </IconGroup>
     </div>
-    <div class="max-h-32 flex flex-col gap-2 justify-between flex-auto">
+    <div class="flex max-h-32 flex-auto flex-col justify-between gap-2">
       <h3
         :id="titleId"
         v-tooltip.top="{ value: displayName, showDelay: tooltipDelay }"
         :class="
           cn(
-            'm-0 text-sm font-semibold line-clamp-2 wrap-anywhere',
+            'm-0 line-clamp-2 text-sm font-semibold wrap-anywhere',
             'text-base-foreground'
           )
         "
@@ -84,13 +84,13 @@
         v-tooltip.top="{ value: asset.secondaryText, showDelay: tooltipDelay }"
         :class="
           cn(
-            'm-0 text-sm line-clamp-2 [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box] text-muted-foreground'
+            'm-0 line-clamp-2 [display:-webkit-box] text-sm text-muted-foreground [-webkit-box-orient:vertical] [-webkit-line-clamp:2]'
           )
         "
       >
         {{ asset.secondaryText }}
       </p>
-      <div class="flex items-center justify-between gap-2 mt-auto">
+      <div class="mt-auto flex items-center justify-between gap-2">
         <div class="flex gap-3 text-xs text-muted-foreground">
           <span v-if="asset.stats.stars" class="flex items-center gap-1">
             <i class="icon-[lucide--star] size-3" />
@@ -115,7 +115,7 @@
           v-if="interactive"
           variant="secondary"
           size="lg"
-          class="shrink-0 relative"
+          class="relative shrink-0"
           @click.stop="handleSelect"
         >
           {{ $t('g.use') }}
@@ -210,7 +210,7 @@ function confirmDeletion() {
       confirmText: t('g.delete'),
       // TODO: These need to be put into the new Button Variants once we have them.
       confirmClass: cn(
-        'bg-danger-200 text-base-foreground hover:bg-danger-200/80 focus:bg-danger-200/80 focus:ring ring-base-foreground'
+        'bg-danger-200 text-base-foreground ring-base-foreground hover:bg-danger-200/80 focus:bg-danger-200/80 focus:ring'
       ),
       optionsDisabled,
       onCancel: () => {
diff --git a/src/platform/assets/components/AssetExportProgressDialog.vue b/src/platform/assets/components/AssetExportProgressDialog.vue
index 316d8dfca1..95856fb93c 100644
--- a/src/platform/assets/components/AssetExportProgressDialog.vue
+++ b/src/platform/assets/components/AssetExportProgressDialog.vue
@@ -119,7 +119,7 @@ function closeDialog() {
                 v-else-if="job.status === 'completed' && job.downloadError"
               >
                 <span
-                  class="text-xs text-destructive-background truncate max-w-32"
+                  class="max-w-32 truncate text-xs text-destructive-background"
                 >
                   {{ job.downloadError }}
                 </span>
@@ -178,7 +178,7 @@ function closeDialog() {
 
     <template #footer="{ toggle }">
       <div
-        class="flex flex-1 min-w-0 h-12 items-center justify-between gap-2 border-t border-border-default px-4"
+        class="flex h-12 min-w-0 flex-1 items-center justify-between gap-2 border-t border-border-default px-4"
       >
         <div class="flex min-w-0 flex-1 items-center gap-2 text-sm">
           <i
@@ -188,7 +188,7 @@ function closeDialog() {
           <span
             :class="
               cn(
-                'truncate font-bold text-base-foreground transition-all duration-300 overflow-hidden',
+                'truncate overflow-hidden font-bold text-base-foreground transition-all duration-300',
                 isExpanded ? 'min-w-0 flex-1' : 'w-0'
               )
             "
@@ -202,7 +202,7 @@ function closeDialog() {
             v-if="isInProgress"
             :class="
               cn(
-                'text-sm text-muted-foreground transition-all duration-300 overflow-hidden',
+                'overflow-hidden text-sm text-muted-foreground transition-all duration-300',
                 isExpanded ? 'whitespace-nowrap' : 'w-0'
               )
             "
diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue
index 712639824e..bb48106f0b 100644
--- a/src/platform/assets/components/AssetFilterBar.vue
+++ b/src/platform/assets/components/AssetFilterBar.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="flex gap-4 items-center justify-between px-6 pt-2 pb-6"
+    class="flex items-center justify-between gap-4 px-6 pt-2 pb-6"
     data-component-id="asset-filter-bar"
   >
     <div
-      class="flex gap-4 items-center"
+      class="flex items-center gap-4"
       data-component-id="asset-filter-bar-left"
     >
       <MultiSelect
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index 30bb3f66c7..59e398baf1 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -15,13 +15,13 @@
     </div>
     <div
       v-else-if="assets.length === 0"
-      class="flex h-full select-none flex-col items-center justify-center py-16 text-muted-foreground"
+      class="flex h-full flex-col items-center justify-center py-16 text-muted-foreground select-none"
     >
       <i class="mb-4 icon-[lucide--search] size-10" />
       <h3 class="mb-2 text-lg font-medium">
         {{ emptyTitle ?? $t('assetBrowser.noAssetsFound') }}
       </h3>
-      <p class="text-sm whitespace-pre-wrap text-center">
+      <p class="text-center text-sm whitespace-pre-wrap">
         {{ emptyMessage ?? $t('assetBrowser.tryAdjustingFilters') }}
       </p>
     </div>
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
index df6206b1ae..8f05cdfc82 100644
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -13,10 +13,10 @@
     :tabindex="loading ? -1 : 0"
     :class="
       cn(
-        'flex flex-col overflow-hidden cursor-pointer p-2 transition-colors duration-200 rounded-lg',
-        'gap-2 select-none group',
+        'flex cursor-pointer flex-col overflow-hidden rounded-lg p-2 transition-colors duration-200',
+        'group gap-2 select-none',
         selected
-          ? 'ring-3 ring-inset ring-modal-card-border-highlighted'
+          ? 'ring-3 ring-modal-card-border-highlighted ring-inset'
           : 'hover:bg-modal-card-background-hovered/20'
       )
     "
@@ -84,7 +84,7 @@
     <!-- Bottom Area: Media Info -->
     <div class="flex-1">
       <!-- Loading State -->
-      <div v-if="loading" class="flex justify-between items-start">
+      <div v-if="loading" class="flex items-start justify-between">
         <div class="flex flex-col gap-1">
           <div
             class="h-4 w-24 animate-pulse rounded-sm bg-modal-card-background"
@@ -101,7 +101,7 @@
       <!-- Content -->
       <div
         v-else-if="asset && adaptedAsset"
-        class="flex justify-between items-end gap-1.5"
+        class="flex items-end justify-between gap-1.5"
       >
         <!-- Left side: Media name and metadata -->
         <div class="flex flex-col gap-1">
diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue
index daa39f6f92..80cbc94776 100644
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-3 items-center">
+  <div class="flex items-center gap-3">
     <SearchBox
       :model-value="searchQuery"
       :placeholder="
@@ -7,7 +7,7 @@
       "
       @update:model-value="handleSearchChange"
     />
-    <div class="flex gap-1.5 items-center">
+    <div class="flex items-center gap-1.5">
       <MediaAssetFilterButton
         v-if="isCloud"
         v-tooltip.top="{ value: $t('assetBrowser.filterBy') }"
diff --git a/src/platform/assets/components/MediaAssetFilterMenu.vue b/src/platform/assets/components/MediaAssetFilterMenu.vue
index 2d9df72ed2..0df3dac9be 100644
--- a/src/platform/assets/components/MediaAssetFilterMenu.vue
+++ b/src/platform/assets/components/MediaAssetFilterMenu.vue
@@ -11,7 +11,7 @@ TODO: Extract checkbox pattern into reusable Checkbox component
 - Benefits: Consistent checkbox UI, better maintainability, reusable design system component
 -->
 <template>
-  <div class="flex flex-col gap-0 p-0 m-0">
+  <div class="m-0 flex flex-col gap-0 p-0">
     <div
       v-for="filter in filters"
       :key="filter.type"
@@ -27,7 +27,7 @@ TODO: Extract checkbox pattern into reusable Checkbox component
         class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
         :class="
           mediaTypeFilters.includes(filter.type)
-            ? 'bg-primary-background border-primary-background'
+            ? 'border-primary-background bg-primary-background'
             : 'bg-secondary-background'
         "
       >
diff --git a/src/platform/assets/components/MediaAssetSettingsMenu.vue b/src/platform/assets/components/MediaAssetSettingsMenu.vue
index b3bf8f8713..6d4e1cc2c6 100644
--- a/src/platform/assets/components/MediaAssetSettingsMenu.vue
+++ b/src/platform/assets/components/MediaAssetSettingsMenu.vue
@@ -10,7 +10,7 @@
         <span>{{ $t('sideToolbar.queueProgressOverlay.viewList') }}</span>
       </span>
       <i
-        class="icon-[lucide--check] ml-auto size-4"
+        class="ml-auto icon-[lucide--check] size-4"
         :class="viewMode !== 'list' && 'opacity-0'"
       />
     </Button>
@@ -25,13 +25,13 @@
         <span>{{ $t('sideToolbar.queueProgressOverlay.viewGrid') }}</span>
       </span>
       <i
-        class="icon-[lucide--check] ml-auto size-4"
+        class="ml-auto icon-[lucide--check] size-4"
         :class="viewMode !== 'grid' && 'opacity-0'"
       />
     </Button>
 
     <template v-if="showSortOptions">
-      <div class="border-b w-full border-border-subtle my-1" />
+      <div class="my-1 w-full border-b border-border-subtle" />
 
       <Button
         variant="textonly"
@@ -40,7 +40,7 @@
       >
         <span>{{ $t('sideToolbar.mediaAssets.sortNewestFirst') }}</span>
         <i
-          class="icon-[lucide--check] ml-auto size-4"
+          class="ml-auto icon-[lucide--check] size-4"
           :class="sortBy !== 'newest' && 'opacity-0'"
         />
       </Button>
@@ -52,7 +52,7 @@
       >
         <span>{{ $t('sideToolbar.mediaAssets.sortOldestFirst') }}</span>
         <i
-          class="icon-[lucide--check] ml-auto size-4"
+          class="ml-auto icon-[lucide--check] size-4"
           :class="sortBy !== 'oldest' && 'opacity-0'"
         />
       </Button>
@@ -65,7 +65,7 @@
         >
           <span>{{ $t('sideToolbar.mediaAssets.sortLongestFirst') }}</span>
           <i
-            class="icon-[lucide--check] ml-auto size-4"
+            class="ml-auto icon-[lucide--check] size-4"
             :class="sortBy !== 'longest' && 'opacity-0'"
           />
         </Button>
@@ -77,7 +77,7 @@
         >
           <span>{{ $t('sideToolbar.mediaAssets.sortFastestFirst') }}</span>
           <i
-            class="icon-[lucide--check] ml-auto size-4"
+            class="ml-auto icon-[lucide--check] size-4"
             :class="sortBy !== 'fastest' && 'opacity-0'"
           />
         </Button>
diff --git a/src/platform/assets/components/MediaTitle.vue b/src/platform/assets/components/MediaTitle.vue
index 897f1c74f9..6b4a27153a 100644
--- a/src/platform/assets/components/MediaTitle.vue
+++ b/src/platform/assets/components/MediaTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <p
-    class="m-0 line-clamp-2 text-sm/tight text-base-foreground break-all"
+    class="m-0 line-clamp-2 text-sm/tight break-all text-base-foreground"
     :title="fileName"
   >
     {{ fileName }}
diff --git a/src/platform/assets/components/ModelImportProgressDialog.vue b/src/platform/assets/components/ModelImportProgressDialog.vue
index ed27d7dc3f..80c1716af5 100644
--- a/src/platform/assets/components/ModelImportProgressDialog.vue
+++ b/src/platform/assets/components/ModelImportProgressDialog.vue
@@ -144,7 +144,7 @@ function closeDialog() {
       <div class="relative max-h-75 overflow-y-auto p-4">
         <div
           v-if="filteredJobs.length > 3"
-          class="absolute right-1 top-4 h-12 w-1 rounded-full bg-muted-foreground"
+          class="absolute top-4 right-1 h-12 w-1 rounded-full bg-muted-foreground"
         />
 
         <div class="flex flex-col gap-2">
@@ -208,7 +208,7 @@ function closeDialog() {
         <div class="flex shrink-0 items-center gap-2">
           <span
             v-if="isInProgress"
-            class="whitespace-nowrap text-sm text-muted-foreground"
+            class="text-sm whitespace-nowrap text-muted-foreground"
           >
             {{
               t('progressToast.progressCount', {
diff --git a/src/platform/assets/components/UploadModelDialogHeader.vue b/src/platform/assets/components/UploadModelDialogHeader.vue
index 799b1dc948..2d4e3aa311 100644
--- a/src/platform/assets/components/UploadModelDialogHeader.vue
+++ b/src/platform/assets/components/UploadModelDialogHeader.vue
@@ -2,7 +2,7 @@
   <div class="flex items-center gap-2 p-4 font-bold">
     <span>{{ $t('assetBrowser.uploadModelGeneric') }}</span>
     <span
-      class="rounded-full bg-white px-1.5 py-0 text-xxs font-inter font-semibold uppercase text-black"
+      class="rounded-full bg-white px-1.5 py-0 font-inter text-xxs font-semibold text-black uppercase"
     >
       {{ $t('g.beta') }}
     </span>
diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 4db94dfc3d..6e8e7741f5 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-end gap-2 w-full">
+  <div class="flex w-full justify-end gap-2">
     <div v-if="currentStep === 1" class="mr-auto flex items-center gap-2">
       <i class="icon-[lucide--circle-question-mark] text-muted-foreground" />
       <Button
diff --git a/src/platform/assets/components/UploadModelProgress.vue b/src/platform/assets/components/UploadModelProgress.vue
index 6f169aa7dc..09240b6b1a 100644
--- a/src/platform/assets/components/UploadModelProgress.vue
+++ b/src/platform/assets/components/UploadModelProgress.vue
@@ -72,7 +72,7 @@
         <p class="m-0 text-sm font-bold">
           {{ $t('assetBrowser.uploadFailed') }}
         </p>
-        <p v-if="error" class="text-sm text-muted mb-0">
+        <p v-if="error" class="mb-0 text-sm text-muted">
           {{ error }}
         </p>
       </div>
diff --git a/src/platform/assets/components/UploadModelUpgradeModal.vue b/src/platform/assets/components/UploadModelUpgradeModal.vue
index 17fe28ac81..2ba3e6d19b 100644
--- a/src/platform/assets/components/UploadModelUpgradeModal.vue
+++ b/src/platform/assets/components/UploadModelUpgradeModal.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col justify-between gap-10 p-4 border-t border-border-default w-auto max-w-[min(500px,90vw)]"
+    class="flex w-auto max-w-[min(500px,90vw)] flex-col justify-between gap-10 border-t border-border-default p-4"
   >
     <UploadModelUpgradeModalBody />
 
diff --git a/src/platform/assets/components/UploadModelUpgradeModalFooter.vue b/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
index b030a7c3a2..777aa54410 100644
--- a/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
+++ b/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-wrap justify-end gap-2 w-full">
+  <div class="flex w-full flex-wrap justify-end gap-2">
     <a
       href="https://blog.comfy.org/p/comfy-cloud-new-features-and-pricing"
       target="_blank"
       rel="noopener noreferrer"
-      class="text-muted-foreground mr-auto underline flex items-center gap-2"
+      class="mr-auto flex items-center gap-2 text-muted-foreground underline"
     >
       <i class="icon-[lucide--external-link]" />
       <span>{{ $t('g.learnMore') }}</span>
diff --git a/src/platform/assets/components/UploadModelUrlInput.vue b/src/platform/assets/components/UploadModelUrlInput.vue
index 916bdeb525..baf5dd0c6f 100644
--- a/src/platform/assets/components/UploadModelUrlInput.vue
+++ b/src/platform/assets/components/UploadModelUrlInput.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="flex flex-col justify-between h-full gap-6 text-sm">
+  <div class="flex h-full flex-col justify-between gap-6 text-sm">
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
-        <p class="m-0 text-foreground">
+        <p class="text-foreground m-0">
           {{ $t('assetBrowser.uploadModelDescription1Generic') }}
         </p>
         <div class="m-0">
           <p class="m-0 text-muted-foreground">
             {{ $t('assetBrowser.uploadModelDescription2Generic') }}
           </p>
-          <span class="inline-flex items-center gap-1 flex-wrap mt-2">
+          <span class="mt-2 inline-flex flex-wrap items-center gap-1">
             <span class="inline-flex items-center gap-1">
               <img
                 :src="civitaiIcon"
@@ -65,7 +65,7 @@
             <Button
               variant="textonly"
               size="unset"
-              class="text-muted-foreground underline p-0"
+              class="p-0 text-muted-foreground underline"
               @click="openSecretsSettings"
             >
               {{ $t('assetBrowser.apiKeyHintLink') }}
diff --git a/src/platform/assets/components/modelInfo/ModelInfoField.vue b/src/platform/assets/components/modelInfo/ModelInfoField.vue
index 448c9a0b61..251c215cdf 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoField.vue
+++ b/src/platform/assets/components/modelInfo/ModelInfoField.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-2 px-4 py-2 text-sm text-base-foreground">
-    <div class="flex items-center justify-between relative">
+    <div class="relative flex items-center justify-between">
       <span class="select-none">{{ label }}</span>
       <slot name="label-action" />
     </div>
diff --git a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
index d0eeb2e964..75076cca0e 100644
--- a/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
+++ b/src/platform/assets/components/modelInfo/ModelInfoPanel.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     data-component-id="ModelInfoPanel"
-    class="flex h-full flex-col scrollbar-custom"
+    class="flex scrollbar-custom h-full flex-col"
   >
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter select-none">
+        <span class="font-inter text-xs uppercase select-none">
           {{ t('assetBrowser.modelInfo.basicInfo') }}
         </span>
       </template>
@@ -14,7 +14,7 @@
           <EditableText
             :model-value="displayName"
             :is-editing="isEditingDisplayName"
-            :class="cn('break-all text-muted-foreground flex-auto')"
+            :class="cn('flex-auto break-all text-muted-foreground')"
             @dblclick="isEditingDisplayName = !isImmutable"
             @edit="handleDisplayNameEdit"
             @cancel="isEditingDisplayName = false"
@@ -23,11 +23,11 @@
             v-if="!isImmutable && !isEditingDisplayName"
             size="icon-sm"
             variant="muted-textonly"
-            class="transition-opacity opacity-0 group-hover:opacity-100"
+            class="opacity-0 transition-opacity group-hover:opacity-100"
             :aria-label="t('assetBrowser.modelInfo.editDisplayName')"
             @click="isEditingDisplayName = !isImmutable"
           >
-            <i class="icon-[lucide--square-pen] self-center size-4" />
+            <i class="icon-[lucide--square-pen] size-4 self-center" />
           </Button>
         </div>
       </ModelInfoField>
@@ -42,7 +42,7 @@
           :href="sourceUrl"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors hover:text-foreground"
+          class="hover:text-foreground inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors"
         >
           <img
             v-if="sourceName === 'Civitai'"
@@ -64,7 +64,7 @@
 
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter select-none">
+        <span class="font-inter text-xs uppercase select-none">
           {{ t('assetBrowser.modelInfo.modelTagging') }}
         </span>
       </template>
@@ -140,7 +140,7 @@
 
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter select-none">
+        <span class="font-inter text-xs uppercase select-none">
           {{ t('assetBrowser.modelInfo.modelDescription') }}
         </span>
       </template>
@@ -157,7 +157,7 @@
             class="p-0"
             @click="copyToClipboard(triggerPhrases.join(', '))"
           >
-            <i class="icon-[lucide--copy] size-4 min-w-4 min-h-4 opacity-60" />
+            <i class="icon-[lucide--copy] size-4 min-h-4 min-w-4 opacity-60" />
           </Button>
         </template>
         <div class="flex flex-wrap gap-1 pt-1">
@@ -167,11 +167,11 @@
             variant="muted-textonly"
             size="unset"
             :title="t('g.copyToClipboard')"
-            class="text-pretty whitespace-normal text-left text-xs"
+            class="text-left text-xs text-pretty whitespace-normal"
             @click="copyToClipboard(phrase)"
           >
             {{ phrase }}
-            <i class="icon-[lucide--copy] size-4 min-w-4 min-h-4 opacity-60" />
+            <i class="icon-[lucide--copy] size-4 min-h-4 min-w-4 opacity-60" />
           </Button>
         </div>
       </ModelInfoField>
@@ -194,7 +194,7 @@
           rows="3"
           :class="
             cn(
-              'w-full resize-y rounded-lg border border-transparent bg-transparent px-3 py-2 text-sm text-component-node-foreground outline-none transition-colors focus:bg-component-node-widget-background',
+              'w-full resize-y rounded-lg border border-transparent bg-transparent px-3 py-2 text-sm text-component-node-foreground transition-colors outline-none focus:bg-component-node-widget-background',
               isImmutable && 'cursor-not-allowed'
             )
           "
@@ -251,7 +251,7 @@ const descriptionTextarea = useTemplateRef<HTMLTextAreaElement>(
 )
 
 const accordionClass = cn(
-  'bg-modal-panel-background border-t border-border-default'
+  'border-t border-border-default bg-modal-panel-background'
 )
 
 const { asset, cacheKey } = defineProps<{
diff --git a/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
index ebc410a537..3ca7907623 100644
--- a/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
+++ b/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>
diff --git a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
index 285d2989c3..6d5f626f87 100644
--- a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
+++ b/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
diff --git a/src/platform/cloud/subscription/components/FreeTierDialogContent.vue b/src/platform/cloud/subscription/components/FreeTierDialogContent.vue
index 8f8723c15a..74ff5f37bb 100644
--- a/src/platform/cloud/subscription/components/FreeTierDialogContent.vue
+++ b/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)"
     >
diff --git a/src/platform/cloud/subscription/components/PricingTable.vue b/src/platform/cloud/subscription/components/PricingTable.vue
index e9b3ccdfdb..7a90ac5dc0 100644
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/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') }}
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index 6ddde0a790..2f82b3bf2d 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/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>
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue b/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
index 039eebe9da..b43dac7b42 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue
+++ b/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>
diff --git a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
index 27e2f983c8..48787a4ee4 100644
--- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
+++ b/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);'
diff --git a/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue b/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
index 14893fe539..5508623203 100644
--- a/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
+++ b/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-col w-full mb-4">
+  <div class="mb-4 flex w-full flex-col">
     <!-- Type header row: type name + chevron -->
-    <div class="flex h-8 items-center w-full">
-      <p class="flex-1 min-w-0 text-sm font-medium truncate text-foreground">
+    <div class="flex h-8 w-full items-center">
+      <p class="text-foreground min-w-0 flex-1 truncate text-sm font-medium">
         {{ `${group.type} (${group.nodeTypes.length})` }}
       </p>
 
@@ -32,7 +32,7 @@
     <TransitionCollapse>
       <div
         v-if="expanded"
-        class="flex flex-col gap-0.5 pl-2 mb-2 overflow-hidden"
+        class="mb-2 flex flex-col gap-0.5 overflow-hidden pl-2"
       >
         <div
           v-for="nodeType in group.nodeTypes"
@@ -45,18 +45,18 @@
               typeof nodeType !== 'string' &&
               nodeType.nodeId != null
             "
-            class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold mr-1"
+            class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
           >
             #{{ nodeType.nodeId }}
           </span>
-          <p class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
+          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
             {{ getLabel(nodeType) }}
           </p>
           <Button
             v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
             variant="textonly"
             size="icon-sm"
-            class="size-6 text-muted-foreground hover:text-base-foreground shrink-0 mr-1"
+            class="mr-1 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
             :aria-label="t('rightSidePanel.locateNode', 'Locate Node')"
             @click="handleLocateNode(nodeType)"
           >
@@ -67,25 +67,25 @@
     </TransitionCollapse>
 
     <!-- Description rows: what it is replaced by -->
-    <div class="flex flex-col text-[13px] mb-2 mt-1 px-1 gap-0.5">
+    <div class="mt-1 mb-2 flex flex-col gap-0.5 px-1 text-[13px]">
       <span class="text-muted-foreground">{{
         t('nodeReplacement.willBeReplacedBy', 'This node will be replaced by:')
       }}</span>
-      <span class="font-bold text-foreground">{{
+      <span class="text-foreground font-bold">{{
         group.newNodeId ?? t('nodeReplacement.unknownNode', 'Unknown')
       }}</span>
     </div>
 
     <!-- Replace Action Button -->
-    <div class="flex items-start w-full py-1">
+    <div class="flex w-full items-start py-1">
       <Button
         variant="secondary"
         size="md"
-        class="flex flex-1 w-full"
+        class="flex w-full flex-1"
         @click="handleReplaceNode"
       >
-        <i class="icon-[lucide--repeat] size-4 text-foreground shrink-0 mr-1" />
-        <span class="text-sm text-foreground truncate min-w-0">
+        <i class="text-foreground mr-1 icon-[lucide--repeat] size-4 shrink-0" />
+        <span class="text-foreground min-w-0 truncate text-sm">
           {{ t('nodeReplacement.replaceNode', 'Replace Node') }}
         </span>
       </Button>
diff --git a/src/platform/nodeReplacement/components/SwapNodesCard.vue b/src/platform/nodeReplacement/components/SwapNodesCard.vue
index 1a3758203f..bd40872a4a 100644
--- a/src/platform/nodeReplacement/components/SwapNodesCard.vue
+++ b/src/platform/nodeReplacement/components/SwapNodesCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-4 pb-2 mt-2">
+  <div class="mt-2 px-4 pb-2">
     <!-- Sub-label: guidance message shown above all swap groups -->
     <p class="m-0 pb-5 text-sm/relaxed text-muted-foreground">
       {{
diff --git a/src/platform/secrets/components/SecretFormDialog.vue b/src/platform/secrets/components/SecretFormDialog.vue
index e720547efe..65be26f59e 100644
--- a/src/platform/secrets/components/SecretFormDialog.vue
+++ b/src/platform/secrets/components/SecretFormDialog.vue
@@ -74,7 +74,7 @@
         </small>
       </div>
 
-      <span v-if="apiError" class="text-sm text-destructive">
+      <span v-if="apiError" class="text-destructive text-sm">
         {{ apiError }}
       </span>
 
diff --git a/src/platform/secrets/components/SecretListItem.vue b/src/platform/secrets/components/SecretListItem.vue
index 02fca29f76..20e6cb3115 100644
--- a/src/platform/secrets/components/SecretListItem.vue
+++ b/src/platform/secrets/components/SecretListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center justify-between rounded-lg border border-border-default bg-base-raised-surface p-4"
+    class="bg-base-raised-surface flex items-center justify-between rounded-lg border border-border-default p-4"
   >
     <div class="flex flex-col gap-1">
       <div class="flex items-center gap-2">
@@ -13,7 +13,7 @@
         />
         <span
           v-else-if="secret.provider"
-          class="rounded-sm bg-base-surface px-2 py-0.5 text-xs text-muted"
+          class="bg-base-surface rounded-sm px-2 py-0.5 text-xs text-muted"
         >
           {{ providerLabel }}
         </span>
diff --git a/src/platform/secrets/components/SecretsPanel.vue b/src/platform/secrets/components/SecretsPanel.vue
index 7299ab2f79..68dd1f57a4 100644
--- a/src/platform/secrets/components/SecretsPanel.vue
+++ b/src/platform/secrets/components/SecretsPanel.vue
@@ -11,8 +11,8 @@
 
       <Divider class="my-4" />
 
-      <div class="flex items-center justify-between my-4">
-        <h3 class="text-lg font-semibold my-0">
+      <div class="my-4 flex items-center justify-between">
+        <h3 class="my-0 text-lg font-semibold">
           {{ $t('secrets.modelProviders') }}
         </h3>
         <Button @click="openCreateDialog">
diff --git a/src/platform/settings/components/SettingDialog.vue b/src/platform/settings/components/SettingDialog.vue
index 69cbf44fe1..89baba3013 100644
--- a/src/platform/settings/components/SettingDialog.vue
+++ b/src/platform/settings/components/SettingDialog.vue
@@ -18,7 +18,7 @@
 
       <nav
         ref="navRef"
-        class="scrollbar-hide flex flex-1 flex-col gap-1 overflow-y-auto px-3 py-4"
+        class="flex scrollbar-hide flex-1 flex-col gap-1 overflow-y-auto px-3 py-4"
       >
         <div
           v-for="(group, index) in navGroups"
diff --git a/src/platform/surveys/NightlySurveyPopover.vue b/src/platform/surveys/NightlySurveyPopover.vue
index 30836307c1..b4784e727a 100644
--- a/src/platform/surveys/NightlySurveyPopover.vue
+++ b/src/platform/surveys/NightlySurveyPopover.vue
@@ -108,7 +108,7 @@ function handleOptOut() {
       <div
         v-if="isVisible"
         data-testid="nightly-survey-popover"
-        class="fixed bottom-4 right-4 z-10000 w-80 rounded-lg border border-border-subtle bg-base-background p-4 shadow-lg"
+        class="fixed right-4 bottom-4 z-10000 w-80 rounded-lg border border-border-subtle bg-base-background p-4 shadow-lg"
       >
         <div class="mb-3 flex items-start justify-between">
           <h3 class="text-sm font-medium text-text-primary">
@@ -127,7 +127,7 @@ function handleOptOut() {
           {{ t('nightlySurvey.description') }}
         </p>
 
-        <div v-if="typeformError" class="mb-4 text-sm text-danger">
+        <div v-if="typeformError" class="text-danger mb-4 text-sm">
           {{ t('nightlySurvey.loadError') }}
         </div>
 
diff --git a/src/platform/updates/components/ReleaseNotificationToast.vue b/src/platform/updates/components/ReleaseNotificationToast.vue
index d8c855b63f..ff1cad8de4 100644
--- a/src/platform/updates/components/ReleaseNotificationToast.vue
+++ b/src/platform/updates/components/ReleaseNotificationToast.vue
@@ -1,25 +1,25 @@
 <template>
   <div v-if="shouldShow" class="release-toast-popup">
     <div
-      class="w-96 max-h-96 bg-base-background border border-border-default rounded-lg shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)] flex flex-col"
+      class="flex max-h-96 w-96 flex-col rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
     >
       <!-- Main content -->
-      <div class="p-4 flex flex-col gap-4 flex-1 min-h-0">
+      <div class="flex min-h-0 flex-1 flex-col gap-4 p-4">
         <!-- Header section with icon and text -->
         <div class="flex items-center gap-4">
           <div
-            class="p-3 bg-primary-background-hover rounded-lg flex items-center justify-center shrink-0"
+            class="flex shrink-0 items-center justify-center rounded-lg bg-primary-background-hover p-3"
           >
             <i class="icon-[lucide--rocket] size-4 text-white" />
           </div>
           <div class="flex flex-col gap-1">
             <div
-              class="text-sm font-normal text-base-foreground leading-[1.429]"
+              class="text-sm leading-[1.429] font-normal text-base-foreground"
             >
               {{ $t('releaseToast.newVersionAvailable') }}
             </div>
             <div
-              class="text-sm font-normal text-muted-foreground leading-[1.21]"
+              class="text-sm leading-[1.21] font-normal text-muted-foreground"
             >
               {{ latestRelease?.version }}
             </div>
@@ -28,15 +28,15 @@
 
         <!-- Description section -->
         <div
-          class="pl-14 text-sm font-normal text-muted-foreground leading-[1.21] overflow-y-auto flex-1 min-h-0"
+          class="min-h-0 flex-1 overflow-y-auto pl-14 text-sm leading-[1.21] font-normal text-muted-foreground"
           v-html="formattedContent"
         ></div>
       </div>
 
       <!-- Footer section -->
-      <div class="flex justify-between items-center px-4 pb-4">
+      <div class="flex items-center justify-between px-4 pb-4">
         <a
-          class="flex items-center gap-2 text-sm font-normal py-1 text-muted-foreground hover:text-base-foreground"
+          class="flex items-center gap-2 py-1 text-sm font-normal text-muted-foreground hover:text-base-foreground"
           :href="changelogUrl"
           target="_blank"
           rel="noopener noreferrer"
@@ -47,13 +47,13 @@
         </a>
         <div class="flex items-center gap-4">
           <button
-            class="h-6 px-0 bg-transparent border-none text-sm font-normal text-muted-foreground hover:text-base-foreground cursor-pointer"
+            class="h-6 cursor-pointer border-none bg-transparent px-0 text-sm font-normal text-muted-foreground hover:text-base-foreground"
             @click="handleSkip"
           >
             {{ $t('releaseToast.skip') }}
           </button>
           <button
-            class="h-10 px-4 bg-secondary-background hover:bg-secondary-background-hover rounded-lg border-none text-sm font-normal text-base-foreground cursor-pointer"
+            class="h-10 cursor-pointer rounded-lg border-none bg-secondary-background px-4 text-sm font-normal text-base-foreground hover:bg-secondary-background-hover"
             @click="handleUpdate"
           >
             {{ $t('releaseToast.update') }}
diff --git a/src/platform/updates/components/WhatsNewPopup.vue b/src/platform/updates/components/WhatsNewPopup.vue
index 3a5c08f8f4..d5fae81122 100644
--- a/src/platform/updates/components/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -3,7 +3,7 @@
     <div class="whats-new-popup" @click.stop>
       <!-- Close Button -->
       <Button
-        class="close-button absolute top-2 right-2 z-10 size-8 p-2 rounded-lg opacity-50"
+        class="close-button absolute top-2 right-2 z-10 size-8 rounded-lg p-2 opacity-50"
         :aria-label="$t('g.close')"
         size="icon-sm"
         variant="muted-textonly"
@@ -13,7 +13,7 @@
       </Button>
 
       <!-- Modal Body -->
-      <div class="modal-body flex flex-col gap-4 px-0 pt-0 pb-2 flex-1">
+      <div class="modal-body flex flex-1 flex-col gap-4 px-0 pt-0 pb-2">
         <!-- Release Content -->
         <div
           class="content-text max-h-96 overflow-y-auto"
@@ -23,10 +23,10 @@
 
       <!-- Modal Footer -->
       <div
-        class="modal-footer flex justify-between items-center gap-4 px-4 pb-4"
+        class="modal-footer flex items-center justify-between gap-4 px-4 pb-4"
       >
         <a
-          class="learn-more-link flex items-center gap-2 text-sm font-normal py-1"
+          class="learn-more-link flex items-center gap-2 py-1 text-sm font-normal"
           :href="changelogUrl"
           target="_blank"
           rel="noopener noreferrer"
diff --git a/src/platform/workflow/sharing/components/AssetSectionList.vue b/src/platform/workflow/sharing/components/AssetSectionList.vue
index 88626f99dd..8690386250 100644
--- a/src/platform/workflow/sharing/components/AssetSectionList.vue
+++ b/src/platform/workflow/sharing/components/AssetSectionList.vue
@@ -33,7 +33,7 @@
         :data-testid="`section-content-${section.id}`"
         class="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
       >
-        <ul class="max-h-25 overflow-y-auto px-6 pb-1 pt-0.5">
+        <ul class="max-h-25 overflow-y-auto px-6 pt-0.5 pb-1">
           <li
             v-for="item in section.items"
             :key="item.id"
diff --git a/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue b/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue
index c7439f9961..8b0a5a468c 100644
--- a/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue
+++ b/src/platform/workflow/sharing/components/OpenSharedWorkflowDialogContent.vue
@@ -31,7 +31,7 @@
     </template>
 
     <template v-else-if="error">
-      <main class="flex flex-col items-center gap-4 px-8 py-8">
+      <main class="flex flex-col items-center gap-4 p-8">
         <i
           class="icon-[lucide--circle-alert] size-8 text-warning-background"
           aria-hidden="true"
diff --git a/src/platform/workflow/sharing/components/ShareAssetWarningBox.vue b/src/platform/workflow/sharing/components/ShareAssetWarningBox.vue
index 88a7765910..0772ad0db0 100644
--- a/src/platform/workflow/sharing/components/ShareAssetWarningBox.vue
+++ b/src/platform/workflow/sharing/components/ShareAssetWarningBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg flex flex-col gap-3">
+  <div class="flex flex-col gap-3 rounded-lg">
     <CollapsibleRoot
       v-model:open="isWarningExpanded"
       class="overflow-hidden rounded-lg bg-secondary-background"
diff --git a/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue b/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue
index 76f25adc81..ef48689609 100644
--- a/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue
+++ b/src/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue
@@ -88,7 +88,7 @@
           </p>
           <p
             v-if="isLoadingAssets"
-            class="m-0 text-sm italic text-muted-foreground"
+            class="m-0 text-sm text-muted-foreground italic"
           >
             {{ $t('shareWorkflow.checkingAssets') }}
           </p>
diff --git a/src/platform/workflow/sharing/components/profile/ComfyHubCreateProfileForm.vue b/src/platform/workflow/sharing/components/profile/ComfyHubCreateProfileForm.vue
index 8e4e697bb9..1570afd255 100644
--- a/src/platform/workflow/sharing/components/profile/ComfyHubCreateProfileForm.vue
+++ b/src/platform/workflow/sharing/components/profile/ComfyHubCreateProfileForm.vue
@@ -24,7 +24,7 @@
           {{ $t('comfyHubProfile.chooseProfilePicture') }}
         </label>
         <label
-          class="flex size-13 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-b from-green-600/50 to-green-900"
+          class="flex size-13 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-linear-to-b from-green-600/50 to-green-900"
         >
           <input
             id="profile-picture"
@@ -68,7 +68,7 @@
             <span
               :class="
                 cn(
-                  'pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-sm',
+                  'pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-sm',
                   username ? 'text-base-foreground' : 'text-muted-foreground'
                 )
               "
diff --git a/src/platform/workflow/sharing/components/profile/ComfyHubPublishIntroPanel.vue b/src/platform/workflow/sharing/components/profile/ComfyHubPublishIntroPanel.vue
index cd2b708bc8..badb4476b1 100644
--- a/src/platform/workflow/sharing/components/profile/ComfyHubPublishIntroPanel.vue
+++ b/src/platform/workflow/sharing/components/profile/ComfyHubPublishIntroPanel.vue
@@ -13,7 +13,7 @@
     </div>
 
     <!-- Content -->
-    <section class="flex flex-col items-center gap-4 px-4 pb-6 pt-4">
+    <section class="flex flex-col items-center gap-4 px-4 pt-4 pb-6">
       <h2 class="m-0 text-base font-semibold text-base-foreground">
         {{ $t('comfyHubProfile.introTitle') }}
       </h2>
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubDescribeStep.vue b/src/platform/workflow/sharing/components/publish/ComfyHubDescribeStep.vue
index f6b898534b..e06bf25c0f 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubDescribeStep.vue
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubDescribeStep.vue
@@ -57,7 +57,7 @@
       <TagsInput
         v-slot="{ isEmpty }"
         always-editing
-        class="select-none bg-secondary-background"
+        class="bg-secondary-background select-none"
         :model-value="tags"
         @update:model-value="$emit('update:tags', $event as string[])"
       >
@@ -70,18 +70,18 @@
 
       <TagsInput
         disabled
-        class="bg-transparent hover:bg-transparent hover-within:bg-transparent p-0"
+        class="hover-within:bg-transparent bg-transparent p-0 hover:bg-transparent"
       >
         <div
           v-if="displayedSuggestions.length > 0"
-          class="basis-full flex flex-wrap gap-2"
+          class="flex basis-full flex-wrap gap-2"
         >
           <TagsInputItem
             v-for="tag in displayedSuggestions"
             :key="tag"
             v-auto-animate
             :value="tag"
-            class="cursor-pointer select-none transition-colors bg-secondary-background hover:bg-secondary-background-selected text-muted-foreground px-2"
+            class="cursor-pointer bg-secondary-background px-2 text-muted-foreground transition-colors select-none hover:bg-secondary-background-selected"
             @click="addTag(tag)"
           >
             <TagsInputItemText />
@@ -91,7 +91,7 @@
           v-if="shouldShowSuggestionToggle"
           variant="muted-textonly"
           size="unset"
-          class="text-xs px-0 hover:bg-unset"
+          class="hover:bg-unset px-0 text-xs"
           @click="showAllSuggestions = !showAllSuggestions"
         >
           {{
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubExamplesStep.vue b/src/platform/workflow/sharing/components/publish/ComfyHubExamplesStep.vue
index 53e7986015..2621bbeb20 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubExamplesStep.vue
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubExamplesStep.vue
@@ -15,7 +15,7 @@
         tabindex="0"
         role="button"
         :aria-label="$t('comfyHubPublish.uploadExampleImage')"
-        class="flex h-25 aspect-square text-center cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border-default transition-colors hover:border-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        class="focus-visible:outline-ring flex aspect-square h-25 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border-default text-center transition-colors hover:border-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2"
         @dragenter.stop
         @dragleave.stop
         @dragover.prevent.stop
@@ -49,7 +49,7 @@
         :class="
           cn(
             'relative h-25 cursor-pointer overflow-hidden rounded-sm p-0',
-            isSelected(image.id) ? 'ring-2 ring-ring' : 'ring-0'
+            isSelected(image.id) ? 'ring-ring ring-2' : 'ring-0'
           )
         "
         @click="toggleSelection(image.id)"
@@ -57,7 +57,7 @@
         <img
           :src="image.url"
           :alt="$t('comfyHubPublish.exampleImage', { index: index + 1 })"
-          class="h-full w-full object-cover"
+          class="size-full object-cover"
         />
         <div
           v-if="isSelected(image.id)"
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue b/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue
index 776acf5251..045d188869 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishDialog.vue
@@ -6,7 +6,7 @@
     size="md"
   >
     <template #leftPanelHeaderTitle>
-      <h2 class="flex-1 select-none text-base font-semibold">
+      <h2 class="flex-1 text-base font-semibold select-none">
         {{ $t('comfyHubPublish.title') }}
       </h2>
     </template>
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishNav.vue b/src/platform/workflow/sharing/components/publish/ComfyHubPublishNav.vue
index b318b46cc4..217ab8a20b 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubPublishNav.vue
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishNav.vue
@@ -34,7 +34,7 @@
             severity="contrast"
             :class="
               cn(
-                'size-5 shrink-0 border text-xs font-bold font-inter bg-transparent',
+                'size-5 shrink-0 border bg-transparent font-inter text-xs font-bold',
                 isCurrentStep(step.name)
                   ? 'border-base-foreground bg-base-foreground text-base-background'
                   : isCompletedStep(step.name)
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.vue b/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.vue
index ba28d3f36a..a9a0be5e71 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.vue
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubPublishWizardContent.vue
@@ -7,7 +7,7 @@
       :on-close="onGateClose"
       :show-close-button="false"
     />
-    <div v-else class="flex min-h-0 flex-1 flex-col px-6 pb-2 pt-4">
+    <div v-else class="flex min-h-0 flex-1 flex-col px-6 pt-4 pb-2">
       <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
         <ComfyHubDescribeStep
           v-if="currentStep === 'describe'"
diff --git a/src/platform/workflow/sharing/components/publish/ComfyHubThumbnailStep.vue b/src/platform/workflow/sharing/components/publish/ComfyHubThumbnailStep.vue
index de741adb01..91eafd7d87 100644
--- a/src/platform/workflow/sharing/components/publish/ComfyHubThumbnailStep.vue
+++ b/src/platform/workflow/sharing/components/publish/ComfyHubThumbnailStep.vue
@@ -40,7 +40,7 @@
 
       <template v-if="thumbnailType === 'imageComparison'">
         <div
-          class="flex-1 grid grid-cols-1 grid-rows-1 place-content-center-safe"
+          class="grid flex-1 grid-cols-1 grid-rows-1 place-content-center-safe"
         >
           <div
             v-if="hasBothComparisonImages"
@@ -50,12 +50,12 @@
             <img
               :src="comparisonPreviewUrls.after!"
               :alt="$t('comfyHubPublish.uploadComparisonAfterPrompt')"
-              class="h-full w-full object-contain"
+              class="size-full object-contain"
             />
             <img
               :src="comparisonPreviewUrls.before!"
               :alt="$t('comfyHubPublish.uploadComparisonBeforePrompt')"
-              class="absolute inset-0 h-full w-full object-contain"
+              class="absolute inset-0 size-full object-contain"
               :style="{
                 clipPath: `inset(0 ${100 - previewSliderPosition}% 0 0)`
               }"
diff --git a/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue b/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
index 1f45945ca9..89195d9cb6 100644
--- a/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
+++ b/src/platform/workspace/components/CurrentUserPopoverWorkspace.vue
@@ -1,10 +1,10 @@
 <!-- A popover that shows current user information and actions -->
 <template>
   <div
-    class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+    class="current-user-popover -m-3 w-80 rounded-lg border border-border-default bg-base-background p-2 shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
   >
     <!-- User Info Section -->
-    <div class="flex flex-col items-center px-0 py-3 mb-4">
+    <div class="mb-4 flex flex-col items-center px-0 py-3">
       <UserAvatar
         class="mb-1"
         :photo-url="userPhotoUrl"
@@ -70,7 +70,7 @@
       }}</span>
       <i
         v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-        class="icon-[lucide--circle-help] mr-auto cursor-help text-base text-muted-foreground"
+        class="mr-auto icon-[lucide--circle-help] cursor-help text-base text-muted-foreground"
       />
       <!-- Upgrade to add credits (free tier) -->
       <Button
diff --git a/src/platform/workspace/components/PricingTableWorkspace.vue b/src/platform/workspace/components/PricingTableWorkspace.vue
index 55374c003a..7b2001a0ea 100644
--- a/src/platform/workspace/components/PricingTableWorkspace.vue
+++ b/src/platform/workspace/components/PricingTableWorkspace.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-8">
-    <h2 class="text-xl lg:text-2xl text-muted-foreground m-0 text-center">
+    <h2 class="m-0 text-center text-xl text-muted-foreground lg:text-2xl">
       {{ t('subscription.chooseBestPlanWorkspace') }}
     </h2>
 
@@ -34,7 +34,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>
@@ -42,19 +42,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"
             >
@@ -62,7 +62,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>
@@ -71,11 +71,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"
                   >
                     ${{ getMonthlyPrice(tier) }}
                   </span>
@@ -99,13 +99,13 @@
             </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="text-sm font-normal text-foreground">
+              <span class="text-foreground text-sm font-normal">
                 {{ t('subscription.monthlyCreditsPerMemberLabel') }}
               </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"
                 >
@@ -115,7 +115,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.maxMembersLabel') }}
               </span>
               <span
@@ -126,7 +126,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
@@ -137,42 +137,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') }}
@@ -198,8 +198,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)"
@@ -234,7 +234,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') }}
@@ -245,7 +245,7 @@
     </Popover>
     <!-- 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">
diff --git a/src/platform/workspace/components/SubscriptionAddPaymentPreviewWorkspace.vue b/src/platform/workspace/components/SubscriptionAddPaymentPreviewWorkspace.vue
index 3a4a683a4e..4f5909cc2f 100644
--- a/src/platform/workspace/components/SubscriptionAddPaymentPreviewWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionAddPaymentPreviewWorkspace.vue
@@ -1,14 +1,14 @@
 <template>
-  <h2 class="text-xl lg:text-2xl text-muted-foreground m-0 text-center mb-8">
+  <h2 class="m-0 mb-8 text-center text-xl text-muted-foreground lg:text-2xl">
     {{ $t('subscription.preview.confirmPayment') }}
   </h2>
   <div
-    class="flex flex-col justify-between items-stretch max-w-[400px] mx-auto text-sm h-full"
+    class="mx-auto flex h-full max-w-[400px] flex-col items-stretch justify-between text-sm"
   >
     <div class="">
       <!-- Plan Header -->
       <div class="flex flex-col gap-2">
-        <span class="text-base-foreground text-sm">
+        <span class="text-sm text-base-foreground">
           {{ tierName }}
         </span>
         <div class="flex items-baseline gap-2">
@@ -31,7 +31,7 @@
             {{ $t('subscription.preview.eachMonthCreditsRefill') }}
           </span>
           <div class="flex 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-bold text-base-foreground">
               {{ displayCredits }}
             </span>
@@ -43,7 +43,7 @@
 
         <!-- Expandable Features -->
         <button
-          class="flex items-center justify-end gap-1 text-sm text-muted-foreground hover:text-base-foreground cursor-pointer bg-transparent border-none p-0"
+          class="flex cursor-pointer items-center justify-end gap-1 border-none bg-transparent p-0 text-sm text-muted-foreground hover:text-base-foreground"
           @click="isFeaturesCollapsed = !isFeaturesCollapsed"
         >
           <span>
@@ -75,13 +75,13 @@
             <span class="text-sm text-base-foreground">
               {{ $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 items-center justify-between">
             <span class="text-sm text-base-foreground">
               {{ $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 items-center justify-between">
             <span class="text-sm text-base-foreground">
@@ -89,7 +89,7 @@
             </span>
             <i
               v-if="hasCustomLoRAs"
-              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-muted-foreground" />
           </div>
@@ -98,7 +98,7 @@
 
       <!-- Total Due Section -->
       <div class="flex flex-col gap-2 border-t border-border-subtle pt-8">
-        <div class="flex text-base items-center justify-between">
+        <div class="flex items-center justify-between text-base">
           <span class="text-base-foreground">
             {{ $t('subscription.preview.totalDueToday') }}
           </span>
@@ -106,7 +106,7 @@
             ${{ totalDueToday }}
           </span>
         </div>
-        <span class="text-muted-foreground text-sm">
+        <span class="text-sm text-muted-foreground">
           {{
             $t('subscription.preview.nextPaymentDue', {
               date: nextPaymentDate
@@ -118,7 +118,7 @@
     <!-- Footer -->
     <div class="flex flex-col gap-2 pt-8">
       <!-- Terms Agreement -->
-      <p class="text-xs text-muted-foreground text-center">
+      <p class="text-center text-xs text-muted-foreground">
         <i18n-t keypath="subscription.preview.termsAgreement" tag="span">
           <template #terms>
             <a
@@ -157,7 +157,7 @@
       <!-- Back Link -->
       <Button
         variant="textonly"
-        class="text-muted-foreground hover:text-base-foreground hover:bg-none text-center cursor-pointer transition-colors text-xs"
+        class="cursor-pointer text-center text-xs text-muted-foreground transition-colors hover:bg-none hover:text-base-foreground"
         @click="$emit('back')"
       >
         {{ $t('subscription.preview.backToAllPlans') }}
diff --git a/src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue b/src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue
index 6167d3c868..656842163e 100644
--- a/src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue
@@ -5,7 +5,7 @@
       v-if="isSettingUp"
       class="rounded-2xl border border-interface-stroke p-6"
     >
-      <div class="flex items-center gap-2 text-muted-foreground py-4">
+      <div class="flex items-center gap-2 py-4 text-muted-foreground">
         <i class="pi pi-spin pi-spinner" />
         <span>{{ $t('billingOperation.subscriptionProcessing') }}</span>
       </div>
@@ -23,10 +23,10 @@
           <i class="pi pi-info-circle" />
         </div>
         <div class="flex flex-col gap-2">
-          <h2 class="text-sm font-bold text-text-primary m-0 pt-1.5">
+          <h2 class="m-0 pt-1.5 text-sm font-bold text-text-primary">
             {{ $t('subscription.canceledCard.title') }}
           </h2>
-          <p class="text-sm text-text-secondary m-0">
+          <p class="m-0 text-sm text-text-secondary">
             {{
               $t('subscription.canceledCard.description', {
                 date: formattedEndDate
@@ -147,7 +147,7 @@
                     v-if="!isFreeTierPlan"
                     size="lg"
                     variant="secondary"
-                    class="rounded-lg px-4 text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
+                    class="rounded-lg bg-interface-menu-component-surface-selected px-4 text-sm font-normal text-text-primary"
                     @click="manageSubscription"
                   >
                     {{ $t('subscription.managePayment') }}
@@ -177,11 +177,11 @@
           </div>
         </div>
 
-        <div class="flex flex-col lg:flex-row lg:items-stretch gap-6 pt-6">
+        <div class="flex flex-col gap-6 pt-6 lg:flex-row lg:items-stretch">
           <div class="flex flex-col">
-            <div class="flex flex-col gap-3 h-full">
+            <div class="flex h-full flex-col gap-3">
               <div
-                class="relative flex flex-col gap-6 rounded-2xl p-5 bg-secondary-background justify-between h-full"
+                class="relative flex h-full flex-col justify-between gap-6 rounded-2xl bg-secondary-background p-5"
               >
                 <Button
                   variant="muted-textonly"
@@ -190,7 +190,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">
@@ -211,7 +211,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"
@@ -226,7 +226,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"
@@ -257,7 +257,7 @@
                   <Button
                     v-if="isFreeTierPlan"
                     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') }}
@@ -265,7 +265,7 @@
                   <Button
                     v-else
                     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') }}
@@ -316,20 +316,20 @@
           !isInPersonalWorkspace &&
           permissions.canManageSubscription
         "
-        class="mt-6 flex gap-1 rounded-2xl border border-interface-stroke p-6 justify-between items-center text-sm"
+        class="mt-6 flex items-center justify-between gap-1 rounded-2xl border border-interface-stroke p-6 text-sm"
       >
         <div class="flex flex-col gap-2">
-          <h4 class="text-sm text-text-primary m-0">
+          <h4 class="m-0 text-sm text-text-primary">
             {{ $t('subscription.nextMonthInvoice') }}
           </h4>
           <span
-            class="text-muted-foreground underline cursor-pointer"
+            class="cursor-pointer text-muted-foreground underline"
             @click="manageSubscription"
           >
             {{ $t('subscription.invoiceHistory') }}
           </span>
         </div>
-        <div class="flex flex-col gap-2 items-end">
+        <div class="flex flex-col items-end gap-2">
           <h4 class="m-0 font-bold">${{ nextMonthInvoice }}</h4>
           <h5 class="m-0 text-muted-foreground">
             {{ $t('subscription.memberCount', memberCount) }}
@@ -347,7 +347,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>
diff --git a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
index 2cb1ffbac0..8b36540958 100644
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    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
       v-if="checkoutStep === 'preview'"
       size="icon"
       variant="muted-textonly"
-      class="rounded-full shrink-0 text-text-secondary hover:bg-white/10 absolute left-2.5 top-2.5"
+      class="absolute top-2.5 left-2.5 shrink-0 rounded-full text-text-secondary hover:bg-white/10"
       :aria-label="$t('g.back')"
       @click="handleBackToPricing"
     >
@@ -16,7 +16,7 @@
     <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"
     >
@@ -24,7 +24,7 @@
     </Button>
 
     <div v-if="reason === 'out_of_credits'" 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('credits.topUp.insufficientTitle') }}
       </h2>
       <p class="m-0 mt-2 text-sm text-text-secondary">
diff --git a/src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue b/src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue
index f7d450a447..69e47964be 100644
--- a/src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue
@@ -1,16 +1,16 @@
 <template>
-  <h2 class="text-xl lg:text-2xl text-muted-foreground m-0 text-center mb-8">
+  <h2 class="m-0 mb-8 text-center text-xl text-muted-foreground lg:text-2xl">
     {{ $t('subscription.preview.confirmPlanChange') }}
   </h2>
   <div
-    class="flex flex-col justify-between items-stretch mx-auto text-sm h-full"
+    class="mx-auto flex h-full flex-col items-stretch justify-between text-sm"
   >
     <div>
       <!-- Plan Comparison Header -->
       <div class="flex items-center gap-4">
         <!-- Current Plan -->
-        <div class="flex flex-col gap-1 w-[250px]">
-          <span class="text-base-foreground text-sm">
+        <div class="flex w-[250px] flex-col gap-1">
+          <span class="text-sm text-base-foreground">
             {{ currentTierName }}
           </span>
           <div class="flex items-baseline gap-1">
@@ -21,14 +21,14 @@
               {{ $t('subscription.usdPerMonthPerMember') }}
             </span>
           </div>
-          <div class="flex items-center gap-1 text-muted-foreground text-sm">
-            <i class="icon-[lucide--component] text-amber-400 text-xs" />
+          <div class="flex items-center gap-1 text-sm text-muted-foreground">
+            <i class="icon-[lucide--component] text-xs text-amber-400" />
             <span
               >{{ currentDisplayCredits }}
               {{ $t('subscription.perMonth') }}</span
             >
           </div>
-          <span class="text-muted-foreground text-sm inline">
+          <span class="inline text-sm text-muted-foreground">
             {{
               $t('subscription.preview.ends', { date: currentPeriodEndDate })
             }}
@@ -36,11 +36,11 @@
         </div>
 
         <!-- Arrow -->
-        <i class="pi pi-arrow-right text-muted-foreground size-8" />
+        <i class="pi pi-arrow-right size-8 text-muted-foreground" />
 
         <!-- New Plan -->
         <div class="flex flex-col gap-1">
-          <span class="text-base-foreground text-sm font-semibold">
+          <span class="text-sm font-semibold text-base-foreground">
             {{ newTierName }}
           </span>
           <div class="flex items-baseline gap-1">
@@ -51,13 +51,13 @@
               {{ $t('subscription.usdPerMonthPerMember') }}
             </span>
           </div>
-          <div class="flex items-center gap-1 text-muted-foreground text-sm">
-            <i class="icon-[lucide--component] text-amber-400 text-xs" />
+          <div class="flex items-center gap-1 text-sm text-muted-foreground">
+            <i class="icon-[lucide--component] text-xs text-amber-400" />
             <span
               >{{ newDisplayCredits }} {{ $t('subscription.perMonth') }}</span
             >
           </div>
-          <span class="text-muted-foreground text-sm">
+          <span class="text-sm text-muted-foreground">
             {{ $t('subscription.preview.starting', { date: effectiveDate }) }}
           </span>
         </div>
@@ -70,7 +70,7 @@
             {{ $t('subscription.preview.eachMonthCreditsRefill') }}
           </span>
           <div class="flex 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-bold text-base-foreground">
               {{ newDisplayCredits }}
             </span>
@@ -111,7 +111,7 @@
 
       <!-- Total Due Section -->
       <div class="flex flex-col gap-2 border-t border-border-subtle pt-6">
-        <div class="flex text-base items-center justify-between">
+        <div class="flex items-center justify-between text-base">
           <span class="text-base-foreground">
             {{ $t('subscription.preview.totalDueToday') }}
           </span>
@@ -119,7 +119,7 @@
             ${{ totalDueToday }}
           </span>
         </div>
-        <span class="text-muted-foreground text-sm">
+        <span class="text-sm text-muted-foreground">
           {{
             $t('subscription.preview.nextPaymentDue', {
               date: nextPaymentDate
@@ -143,7 +143,7 @@
 
       <Button
         variant="textonly"
-        class="text-muted-foreground hover:text-base-foreground hover:bg-none text-center cursor-pointer transition-colors text-xs"
+        class="cursor-pointer text-center text-xs text-muted-foreground transition-colors hover:bg-none hover:text-base-foreground"
         @click="$emit('back')"
       >
         {{ $t('subscription.preview.backToAllPlans') }}
diff --git a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
index 12fe47ad8d..cced9c7d96 100644
--- a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
@@ -3,8 +3,8 @@
     class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
   >
     <!-- Header -->
-    <div class="flex p-8 items-center justify-between">
-      <h2 class="text-lg font-bold text-base-foreground m-0">
+    <div class="flex items-center justify-between p-8">
+      <h2 class="m-0 text-lg font-bold text-base-foreground">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
@@ -12,7 +12,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         @click="() => handleClose()"
       >
         <i class="icon-[lucide--x] size-6" />
@@ -20,7 +20,7 @@
     </div>
     <p
       v-if="isInsufficientCredits"
-      class="text-sm text-muted-foreground m-0 px-8"
+      class="m-0 px-8 text-sm text-muted-foreground"
     >
       {{ $t('credits.topUp.insufficientWorkflowMessage') }}
     </p>
@@ -39,7 +39,7 @@
           size="lg"
           :class="
             cn(
-              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
+              'focus-visible:ring-secondary-foreground h-10 w-full text-base font-medium',
               selectedPreset === amount && 'bg-secondary-background-selected'
             )
           "
@@ -95,7 +95,7 @@
 
     <p
       v-if="isBelowMin"
-      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+      class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
     >
       <i class="icon-[lucide--component] size-4" />
       {{
@@ -106,7 +106,7 @@
     </p>
     <p
       v-if="showCeilingWarning"
-      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
+      class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
     >
       <i class="icon-[lucide--component] size-4" />
       {{
@@ -123,7 +123,7 @@
       >
     </p>
 
-    <div class="p-8 flex flex-col gap-8">
+    <div class="flex flex-col gap-8 p-8">
       <Button
         :disabled="!isValidAmount || loading || isPolling"
         :loading="loading || isPolling"
diff --git a/src/platform/workspace/components/WorkspaceSwitcherPopover.vue b/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
index b9de74c833..555aff44ed 100644
--- a/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
+++ b/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
@@ -48,7 +48,7 @@
                     </span>
                     <span
                       v-if="getTierLabel(workspace)"
-                      class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                      class="rounded-full bg-base-foreground px-1 py-0.5 text-[10px] font-bold text-base-background uppercase"
                     >
                       {{ getTierLabel(workspace) }}
                     </span>
diff --git a/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
index 99b897ea09..46345d62bb 100644
--- a/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.createWorkspaceDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
@@ -30,7 +30,7 @@
         <input
           v-model="workspaceName"
           type="text"
-          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          class="focus:ring-secondary-foreground w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:ring-1 focus:outline-none"
           :placeholder="
             $t('workspacePanel.createWorkspaceDialog.namePlaceholder')
           "
diff --git a/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
index e8c599c5d8..c2e49a1669 100644
--- a/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.deleteDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
index 3a06e2597c..6e47844636 100644
--- a/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.editWorkspaceDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
@@ -27,7 +27,7 @@
         <input
           v-model="newWorkspaceName"
           type="text"
-          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          class="focus:ring-secondary-foreground w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:ring-1 focus:outline-none"
           @keydown.enter="isValidName && onSave()"
         />
       </div>
diff --git a/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue b/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
index d8fb7af7b4..69f0a4bac6 100644
--- a/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
@@ -14,7 +14,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
@@ -31,7 +31,7 @@
         <input
           v-model="email"
           type="email"
-          class="w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-secondary-foreground"
+          class="focus:ring-secondary-foreground w-full rounded-lg border border-border-default bg-transparent px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus:ring-1 focus:outline-none"
           :placeholder="$t('workspacePanel.inviteMemberDialog.placeholder')"
         />
       </div>
@@ -70,7 +70,7 @@
             @click="onSelectLink"
           />
           <div
-            class="absolute right-3 top-2.5 cursor-pointer"
+            class="absolute top-2.5 right-3 cursor-pointer"
             @click="onCopyLink"
           >
             <i
diff --git a/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue b/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
index 9f8ea12c4b..5e6bd17bd3 100644
--- a/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
@@ -14,7 +14,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         @click="onDismiss"
       >
diff --git a/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
index 0df80c4f24..eeca98b0e8 100644
--- a/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.leaveDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue b/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
index 590de87a57..1cd02f7dd2 100644
--- a/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.removeMemberDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue b/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
index f408243f36..8bdd4c41dc 100644
--- a/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.revokeInviteDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue b/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue
index 9f8d303173..6808150533 100644
--- a/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue
+++ b/src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="grow overflow-auto pt-6">
     <div
-      class="flex size-full flex-col gap-2 rounded-2xl border border-interface-stroke border-inter p-6"
+      class="border-inter flex size-full flex-col gap-2 rounded-2xl border border-interface-stroke p-6"
     >
       <!-- Section Header -->
       <div class="flex w-full items-center gap-9">
@@ -153,7 +153,7 @@
                       </span>
                       <span
                         v-if="uiConfig.showRoleBadge"
-                        class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                        class="rounded-full bg-base-foreground px-1 py-0.5 text-[10px] font-bold text-base-background uppercase"
                       >
                         {{ $t('workspaceSwitcher.roleOwner') }}
                       </span>
@@ -202,7 +202,7 @@
                       </span>
                       <span
                         v-if="uiConfig.showRoleBadge"
-                        class="text-[10px] font-bold uppercase text-base-background bg-base-foreground px-1 py-0.5 rounded-full"
+                        class="rounded-full bg-base-foreground px-1 py-0.5 text-[10px] font-bold text-base-background uppercase"
                       >
                         {{ getRoleBadgeLabel(member.role) }}
                       </span>
@@ -215,7 +215,7 @@
                 <!-- Join date -->
                 <span
                   v-if="uiConfig.showDateColumn && !isSingleSeatPlan"
-                  class="text-sm text-muted-foreground text-right"
+                  class="text-right text-sm text-muted-foreground"
                 >
                   {{ formatDate(member.joinDate) }}
                 </span>
@@ -248,9 +248,9 @@
           <!-- Upsell Banner -->
           <div
             v-if="isSingleSeatPlan"
-            class="flex items-center gap-2 rounded-xl border bg-secondary-background border-border-default px-4 py-3 mt-4 justify-center"
+            class="mt-4 flex items-center justify-center gap-2 rounded-xl border border-border-default bg-secondary-background px-4 py-3"
           >
-            <p class="m-0 text-sm text-foreground">
+            <p class="text-foreground m-0 text-sm">
               {{
                 isActiveSubscription
                   ? $t('workspacePanel.members.upsellBannerUpgrade')
@@ -259,7 +259,7 @@
             </p>
             <Button
               variant="muted-textonly"
-              class="cursor-pointer underline text-sm"
+              class="cursor-pointer text-sm underline"
               @click="showSubscriptionDialog()"
             >
               {{ $t('workspacePanel.members.viewPlans') }}
@@ -351,7 +351,7 @@
         {{ $t('workspacePanel.members.personalWorkspaceMessage') }}
       </p>
       <button
-        class="underline bg-transparent border-none cursor-pointer"
+        class="cursor-pointer border-none bg-transparent underline"
         @click="handleCreateWorkspace"
       >
         {{ $t('workspacePanel.members.createNewWorkspace') }}
diff --git a/src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue b/src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue
index 5cc9162353..3e65977db5 100644
--- a/src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue
+++ b/src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue
@@ -53,7 +53,7 @@
             :class="
               !isSingleSeatPlan &&
               isInviteLimitReached &&
-              'opacity-50 cursor-not-allowed'
+              'cursor-not-allowed opacity-50'
             "
             :aria-label="$t('workspacePanel.inviteMember')"
             @click="handleInviteMember"
@@ -82,7 +82,7 @@
                   :disabled="!!item.disabled"
                   :class="
                     cn(
-                      'flex w-full items-center gap-2 px-3 py-2 bg-transparent border-none cursor-pointer',
+                      'flex w-full cursor-pointer items-center gap-2 border-none bg-transparent px-3 py-2',
                       item.class,
                       item.disabled && 'pointer-events-auto cursor-not-allowed'
                     )
diff --git a/src/platform/workspace/components/toasts/InviteAcceptedToast.vue b/src/platform/workspace/components/toasts/InviteAcceptedToast.vue
index 622dbf112e..6c0fd26d59 100644
--- a/src/platform/workspace/components/toasts/InviteAcceptedToast.vue
+++ b/src/platform/workspace/components/toasts/InviteAcceptedToast.vue
@@ -1,12 +1,12 @@
 <template>
   <Toast group="invite-accepted" position="top-right">
     <template #message="slotProps">
-      <div class="flex items-center gap-2 justify-between w-full">
+      <div class="flex w-full items-center justify-between gap-2">
         <div class="flex flex-col justify-start">
           <div class="text-base">
             {{ slotProps.message.summary }}
           </div>
-          <div class="mt-1 text-sm text-foreground">
+          <div class="text-foreground mt-1 text-sm">
             {{ slotProps.message.detail.text }} <br />
             {{ slotProps.message.detail.workspaceName }}
           </div>
diff --git a/src/renderer/core/layout/transform/TransformPane.vue b/src/renderer/core/layout/transform/TransformPane.vue
index 9eda8f7613..26bf9c6b93 100644
--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -3,7 +3,7 @@
     data-testid="transform-pane"
     :class="
       cn(
-        'absolute inset-0 size-full pointer-events-none',
+        'pointer-events-none absolute inset-0 size-full',
         isInteracting ? 'transform-pane--interacting' : 'will-change-auto'
       )
     "
diff --git a/src/renderer/extensions/linearMode/AppInput.vue b/src/renderer/extensions/linearMode/AppInput.vue
index 06fcf92fa0..9e855f61fd 100644
--- a/src/renderer/extensions/linearMode/AppInput.vue
+++ b/src/renderer/extensions/linearMode/AppInput.vue
@@ -26,7 +26,7 @@ function togglePromotion() {
 <template>
   <div
     v-if="isSelectInputsMode"
-    class="col-span-2 flex flex-row pointer-events-auto cursor-pointer gap-1 relative"
+    class="pointer-events-auto relative col-span-2 flex cursor-pointer flex-row gap-1"
     @pointerdown.capture.stop.prevent="togglePromotion"
     @click.capture.stop.prevent
     @pointerup.capture.stop.prevent
@@ -36,27 +36,27 @@ function togglePromotion() {
     <div
       :class="
         cn(
-          'border-primary-background border rounded-sm size-4 self-center m-1',
-          isPromoted && 'bg-primary-background flex items-center'
+          'm-1 size-4 self-center rounded-sm border border-primary-background',
+          isPromoted && 'flex items-center bg-primary-background'
         )
       "
     >
       <i
         v-if="isPromoted"
-        class="icon-[lucide--check] bg-primary-foreground place-center"
+        class="bg-primary-foreground place-center icon-[lucide--check]"
       />
     </div>
     <div
       :class="
         cn(
-          'grid grid-cols-2 items-stretch ring-primary-background rounded-lg pointer-events-none flex-1',
+          'pointer-events-none grid flex-1 grid-cols-2 items-stretch rounded-lg ring-primary-background',
           isPromoted && 'ring-2'
         )
       "
     >
       <slot />
     </div>
-    <div class="absolute size-full hover:bg-primary-background/10 rounded-lg" />
+    <div class="absolute size-full rounded-lg hover:bg-primary-background/10" />
   </div>
   <slot v-else />
 </template>
diff --git a/src/renderer/extensions/linearMode/AppOutput.vue b/src/renderer/extensions/linearMode/AppOutput.vue
index a5e2d7f517..33b7fa559c 100644
--- a/src/renderer/extensions/linearMode/AppOutput.vue
+++ b/src/renderer/extensions/linearMode/AppOutput.vue
@@ -25,7 +25,7 @@ function togglePromotion() {
   <div
     :class="
       cn(
-        'absolute size-full pointer-events-auto ring-warning-background/50 ring-5 rounded-2xl',
+        'pointer-events-auto absolute size-full rounded-2xl ring-5 ring-warning-background/50',
         isPromoted && 'ring-warning-background'
       )
     "
@@ -38,13 +38,13 @@ function togglePromotion() {
     <div class="absolute top-0 right-0 size-8">
       <div
         v-if="isPromoted"
-        class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg"
+        class="absolute -top-1/2 -right-1/2 size-full rounded-lg bg-warning-background p-2"
       >
-        <i class="icon-[lucide--check] bg-text-foreground size-full" />
+        <i class="bg-text-foreground icon-[lucide--check] size-full" />
       </div>
       <div
         v-else
-        class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg"
+        class="absolute -top-1/2 -right-1/2 size-full rounded-lg bg-component-node-background ring-4 ring-warning-background/50 ring-inset"
       />
     </div>
   </div>
diff --git a/src/renderer/extensions/linearMode/DropZone.vue b/src/renderer/extensions/linearMode/DropZone.vue
index c8fd3b9c18..349534c33e 100644
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -44,8 +44,8 @@ const { isOverDropZone } = useDropZone(dropZoneRef, {
     ref="dropZoneRef"
     :class="
       cn(
-        'rounded-lg ring-inset ring-primary-500',
-        canAcceptDrop && isOverDropZone && 'ring-4 bg-primary-500/10'
+        'rounded-lg ring-primary-500 ring-inset',
+        canAcceptDrop && isOverDropZone && 'bg-primary-500/10 ring-4'
       )
     "
   >
@@ -54,7 +54,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, {
       v-if="dropIndicator"
       :class="
         cn(
-          'flex flex-col items-center justify-center gap-2 border-dashed rounded-lg border h-25 border-border-subtle m-3 py-2',
+          'm-3 flex h-25 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border-subtle py-2',
           dropIndicator?.onClick && 'cursor-pointer'
         )
       "
diff --git a/src/renderer/extensions/linearMode/ImagePreview.vue b/src/renderer/extensions/linearMode/ImagePreview.vue
index ca41f7ec19..6c920ffe09 100644
--- a/src/renderer/extensions/linearMode/ImagePreview.vue
+++ b/src/renderer/extensions/linearMode/ImagePreview.vue
@@ -13,7 +13,7 @@ const width = ref('')
 const height = ref('')
 </script>
 <template>
-  <ZoomPane v-if="!mobile" v-slot="slotProps" class="flex-1 w-full">
+  <ZoomPane v-if="!mobile" v-slot="slotProps" class="w-full flex-1">
     <img
       ref="imageRef"
       :src
@@ -31,7 +31,7 @@ const height = ref('')
   <img
     v-else
     ref="imageRef"
-    class="contain-size grow object-contain"
+    class="grow object-contain contain-size"
     :src
     @load="
       () => {
diff --git a/src/renderer/extensions/linearMode/LatentPreview.vue b/src/renderer/extensions/linearMode/LatentPreview.vue
index 85c9f9a7dd..8e03e9f972 100644
--- a/src/renderer/extensions/linearMode/LatentPreview.vue
+++ b/src/renderer/extensions/linearMode/LatentPreview.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex-1 min-h-0 w-full flex items-center justify-center">
+  <div class="flex min-h-0 w-full flex-1 items-center justify-center">
     <div
-      class="aspect-square size-[min(50vw,50vh)] rounded-lg skeleton-shimmer"
+      class="skeleton-shimmer aspect-square size-[min(50vw,50vh)] rounded-lg"
     />
   </div>
 </template>
diff --git a/src/renderer/extensions/linearMode/LinearArrange.vue b/src/renderer/extensions/linearMode/LinearArrange.vue
index dd970208ca..0e8e9b1021 100644
--- a/src/renderer/extensions/linearMode/LinearArrange.vue
+++ b/src/renderer/extensions/linearMode/LinearArrange.vue
@@ -15,12 +15,12 @@ const { hasOutputs } = storeToRefs(useAppModeStore())
     v-if="hasOutputs"
     role="article"
     data-testid="arrange-preview"
-    class="flex flex-col items-center justify-center h-full w-3/4 gap-6 p-8 mx-auto"
+    class="mx-auto flex h-full w-3/4 flex-col items-center justify-center gap-6 p-8"
   >
     <div
-      class="border-warning-background border-2 border-dashed rounded-2xl w-full h-4/5 flex items-center justify-center flex-col p-12"
+      class="flex h-4/5 w-full flex-col items-center justify-center rounded-2xl border-2 border-dashed border-warning-background p-12"
     >
-      <p class="text-base-foreground font-bold mb-0">
+      <p class="mb-0 font-bold text-base-foreground">
         {{ t('linearMode.arrange.outputs') }}
       </p>
       <p>{{ t('linearMode.arrange.resultsLabel') }}</p>
@@ -30,18 +30,18 @@ const { hasOutputs } = storeToRefs(useAppModeStore())
     v-else
     role="article"
     data-testid="arrange-no-outputs"
-    class="flex flex-col items-center justify-center h-full gap-6 p-8 w-lg mx-auto text-center"
+    class="mx-auto flex h-full w-lg flex-col items-center justify-center gap-6 p-8 text-center"
   >
     <p class="m-0 text-base-foreground">
       {{ t('linearMode.arrange.noOutputs') }}
     </p>
 
-    <div class="flex flex-col gap-1 text-muted-foreground w-lg text-[14px]">
+    <div class="flex w-lg flex-col gap-1 text-[14px] text-muted-foreground">
       <p class="mt-0 p-0">{{ t('linearMode.arrange.switchToOutputs') }}</p>
 
       <i18n-t keypath="linearMode.arrange.connectAtLeastOne" tag="div">
         <template #atLeastOne>
-          <span class="italic font-bold">
+          <span class="font-bold italic">
             {{ t('linearMode.arrange.atLeastOne') }}
           </span>
         </template>
diff --git a/src/renderer/extensions/linearMode/LinearControls.vue b/src/renderer/extensions/linearMode/LinearControls.vue
index 05e4aec2a6..c33ef374df 100644
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -165,23 +165,23 @@ defineExpose({ runButtonClick })
 <template>
   <div
     v-if="!isBuilderMode && hasOutputs"
-    class="flex flex-col min-w-80 h-full"
+    class="flex h-full min-w-80 flex-col"
     v-bind="$attrs"
   >
     <section
       v-if="!mobile"
       data-testid="linear-workflow-info"
-      class="h-12 border-x border-border-subtle py-2 px-4 gap-2 bg-comfy-menu-bg flex items-center contain-size"
+      class="flex h-12 items-center gap-2 border-x border-border-subtle bg-comfy-menu-bg px-4 py-2 contain-size"
     >
       <span
-        class="font-bold truncate"
+        class="truncate font-bold"
         v-text="workflowStore.activeWorkflow?.filename"
       />
       <div class="flex-1" />
       <Popover
         v-if="partitionedNodes[0].length"
         align="end"
-        class="overflow-y-auto overflow-x-clip max-h-(--reka-popover-content-available-height) z-100"
+        class="z-100 max-h-(--reka-popover-content-available-height) overflow-x-clip overflow-y-auto"
         side="bottom"
         :side-offset="-8"
       >
@@ -201,7 +201,7 @@ defineExpose({ runButtonClick })
             />
             <NodeWidgets
               :node-data
-              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 *:has-[textarea]:h-50 rounded-lg max-w-100"
+              class="max-w-100 gap-y-3 rounded-lg py-3 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1"
             />
           </template>
         </div>
@@ -209,7 +209,7 @@ defineExpose({ runButtonClick })
       <Button v-if="false"> {{ t('menuLabels.publish') }} </Button>
     </section>
     <div
-      class="border-x md:border-y gap-2 h-full border-(--interface-stroke) bg-comfy-menu-bg flex flex-col px-2"
+      class="flex h-full flex-col gap-2 border-x border-(--interface-stroke) bg-comfy-menu-bg px-2 md:border-y"
     >
       <section
         data-testid="linear-widgets"
@@ -235,9 +235,9 @@ defineExpose({ runButtonClick })
               :node-data
               :class="
                 cn(
-                  'py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 *:has-[textarea]:h-50 rounded-lg **:[.h-7]:h-10',
+                  'gap-y-3 rounded-lg py-3 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1 **:[.h-7]:h-10',
                   nodeData.hasErrors &&
-                    'ring-2 ring-inset ring-node-stroke-error'
+                    'ring-2 ring-node-stroke-error ring-inset'
                 )
               "
             />
@@ -251,7 +251,7 @@ defineExpose({ runButtonClick })
         :to="toastTo"
       >
         <div
-          class="bg-base-foreground md:bg-secondary-background text-base-background md:text-base-foreground rounded-lg flex h-10 md:h-8 p-1 pr-2 gap-2 items-center"
+          class="flex h-10 items-center gap-2 rounded-lg bg-base-foreground p-1 pr-2 text-base-background md:h-8 md:bg-secondary-background md:text-base-foreground"
         >
           <template v-if="pendingJobQueues === 0">
             <i
@@ -275,13 +275,13 @@ defineExpose({ runButtonClick })
       <section
         v-if="mobile"
         data-testid="linear-run-button"
-        class="p-4 pb-6 border-t border-node-component-border"
+        class="border-t border-node-component-border p-4 pb-6"
       >
         <SubscribeToRunButton
           v-if="!isActiveSubscription"
-          class="w-full mt-4"
+          class="mt-4 w-full"
         />
-        <div v-else class="flex mt-4">
+        <div v-else class="mt-4 flex">
           <Popover side="top" @open-auto-focus.prevent>
             <template #button>
               <Button size="lg" class="-mr-3 pr-7">
@@ -290,7 +290,7 @@ defineExpose({ runButtonClick })
               </Button>
             </template>
             <div
-              class="mb-2 m-1 text-node-component-slot-text"
+              class="m-1 mb-2 text-node-component-slot-text"
               v-text="t('linearMode.runCount')"
             />
             <ScrubableNumberInput
@@ -315,10 +315,10 @@ defineExpose({ runButtonClick })
       <section
         v-else
         data-testid="linear-run-button"
-        class="p-4 pb-6 border-t border-node-component-border"
+        class="border-t border-node-component-border p-4 pb-6"
       >
         <div
-          class="mb-2 m-1 text-node-component-slot-text"
+          class="m-1 mb-2 text-node-component-slot-text"
           v-text="t('linearMode.runCount')"
         />
         <ScrubableNumberInput
@@ -330,12 +330,12 @@ defineExpose({ runButtonClick })
         />
         <SubscribeToRunButton
           v-if="!isActiveSubscription"
-          class="w-full mt-4"
+          class="mt-4 w-full"
         />
         <Button
           v-else
           variant="primary"
-          class="w-full mt-4 text-sm"
+          class="mt-4 w-full text-sm"
           size="lg"
           @click="runButtonClick"
         >
diff --git a/src/renderer/extensions/linearMode/LinearFeedback.vue b/src/renderer/extensions/linearMode/LinearFeedback.vue
index 48e0142b63..b625dbd219 100644
--- a/src/renderer/extensions/linearMode/LinearFeedback.vue
+++ b/src/renderer/extensions/linearMode/LinearFeedback.vue
@@ -22,7 +22,7 @@ const visible = computed(() => sidebarOnLeft.value === (side === 'left'))
   <div
     :class="
       cn(
-        'flex items-center gap-2 px-4 text-nowrap text-base-foreground self-end pb-4',
+        'flex items-center gap-2 self-end px-4 pb-4 text-nowrap text-base-foreground',
         side === 'right' && 'flex-row-reverse',
         !visible && 'invisible'
       )
diff --git a/src/renderer/extensions/linearMode/LinearPreview.vue b/src/renderer/extensions/linearMode/LinearPreview.vue
index 7bf2201165..78045d368a 100644
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -91,7 +91,7 @@ async function rerun(e: Event) {
   <section
     v-if="selectedItem || selectedOutput || !executionStore.isIdle"
     data-testid="linear-output-info"
-    class="flex flex-wrap gap-2 p-4 w-full md:z-10 tabular-nums justify-center text-sm"
+    class="flex w-full flex-wrap justify-center gap-2 p-4 text-sm tabular-nums md:z-10"
   >
     <template v-if="selectedItem">
       <Button size="md" @click="rerun">
@@ -102,7 +102,7 @@ async function rerun(e: Event) {
         {{ t('linearMode.reuseParameters') }}
         <i class="icon-[lucide--list-restart]" />
       </Button>
-      <div class="border-r border-border-subtle mx-1" />
+      <div class="mx-1 border-r border-border-subtle" />
     </template>
     <Button
       v-if="selectedOutput"
@@ -153,17 +153,17 @@ async function rerun(e: Event) {
   <VideoPreview
     v-else-if="getMediaType(selectedOutput) === 'video'"
     :src="selectedOutput!.url"
-    class="object-contain flex-1 md:contain-size md:p-3"
+    class="flex-1 object-contain md:p-3 md:contain-size"
   />
   <audio
     v-else-if="getMediaType(selectedOutput) === 'audio'"
-    class="w-full m-auto"
+    class="m-auto w-full"
     controls
     :src="selectedOutput!.url"
   />
   <article
     v-else-if="getMediaType(selectedOutput) === 'text'"
-    class="w-full max-w-lg m-auto my-12 overflow-y-auto"
+    class="m-auto my-12 w-full max-w-lg overflow-y-auto"
     v-text="selectedOutput!.url"
   />
   <Preview3d
diff --git a/src/renderer/extensions/linearMode/LinearWelcome.vue b/src/renderer/extensions/linearMode/LinearWelcome.vue
index 2a629000a2..02d6a7a674 100644
--- a/src/renderer/extensions/linearMode/LinearWelcome.vue
+++ b/src/renderer/extensions/linearMode/LinearWelcome.vue
@@ -17,7 +17,7 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
   <div
     role="article"
     data-testid="linear-welcome"
-    class="flex flex-col items-center justify-center h-full gap-6 p-8 max-w-lg mx-auto text-center"
+    class="mx-auto flex h-full max-w-lg flex-col items-center justify-center gap-6 p-8 text-center"
   >
     <div class="flex flex-col gap-2">
       <h2 class="text-3xl font-semibold text-muted-foreground">
@@ -25,7 +25,7 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
       </h2>
     </div>
 
-    <div class="flex flex-col gap-3 text-muted-foreground max-w-md text-[14px]">
+    <div class="flex max-w-md flex-col gap-3 text-[14px] text-muted-foreground">
       <p class="mt-0">{{ t('linearMode.welcome.message') }}</p>
       <p class="mt-0">{{ t('linearMode.welcome.controls') }}</p>
       <p class="mt-0">{{ t('linearMode.welcome.sharing') }}</p>
@@ -35,7 +35,7 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
         <i18n-t keypath="linearMode.welcome.getStarted" tag="span">
           <template #runButton>
             <span
-              class="inline-flex items-center px-3.5 py-0.5 mx-0.5 transform -translate-y-0.5 rounded-sm bg-primary-background text-base-foreground text-xxs font-medium cursor-default"
+              class="mx-0.5 inline-flex -translate-y-0.5 transform cursor-default items-center rounded-sm bg-primary-background px-3.5 py-0.5 text-xxs font-medium text-base-foreground"
             >
               {{ t('menu.run') }}
             </span>
@@ -44,7 +44,7 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
       </p>
     </div>
     <template v-else>
-      <p v-if="!hasNodes" class="mt-0 text-base-foreground text-sm max-w-md">
+      <p v-if="!hasNodes" class="mt-0 max-w-md text-sm text-base-foreground">
         {{ t('linearMode.emptyWorkflowExplanation') }}
       </p>
       <div class="flex flex-row gap-2">
@@ -68,7 +68,7 @@ const templateSelectorDialog = useWorkflowTemplateSelectorDialog()
           <i class="icon-[lucide--hammer]" />
           {{ t('linearMode.welcome.buildApp') }}
           <div
-            class="bg-base-foreground text-base-background text-xxs rounded-full absolute -top-2 -right-2 px-1"
+            class="absolute -top-2 -right-2 rounded-full bg-base-foreground px-1 text-xxs text-base-background"
           >
             {{ t('g.experimental') }}
           </div>
diff --git a/src/renderer/extensions/linearMode/MobileDisplay.vue b/src/renderer/extensions/linearMode/MobileDisplay.vue
index ac0d49ff89..e279dff8f8 100644
--- a/src/renderer/extensions/linearMode/MobileDisplay.vue
+++ b/src/renderer/extensions/linearMode/MobileDisplay.vue
@@ -149,9 +149,9 @@ const menuEntries = computed<MenuItem[]>(() => [
 ])
 </script>
 <template>
-  <section class="absolute size-full flex flex-col bg-secondary-background">
+  <section class="absolute flex size-full flex-col bg-secondary-background">
     <header
-      class="w-full h-16 px-4 py-3 flex border-border-subtle border-b items-center gap-3 bg-base-background"
+      class="flex h-16 w-full items-center gap-3 border-b border-border-subtle bg-base-background px-4 py-3"
     >
       <DropdownMenu :entries="menuEntries" />
       <Popover
@@ -162,52 +162,52 @@ const menuEntries = computed<MenuItem[]>(() => [
         <template #button>
           <!--TODO: Use button here? Probably too much work to destyle-->
           <div
-            class="bg-secondary-background h-10 rounded-sm grow flex items-center p-2 gap-2"
+            class="flex h-10 grow items-center gap-2 rounded-sm bg-secondary-background p-2"
           >
             <i
-              class="shrink-0 icon-[lucide--panels-top-left] bg-primary-background"
+              class="icon-[lucide--panels-top-left] shrink-0 bg-primary-background"
             />
             <span
-              class="truncate contain-size size-full"
+              class="size-full truncate contain-size"
               v-text="workflowStore.activeWorkflow?.filename"
             />
             <i
-              class="shrink-0 icon-[lucide--chevron-down] bg-muted-foreground"
+              class="icon-[lucide--chevron-down] shrink-0 bg-muted-foreground"
             />
           </div>
         </template>
       </Popover>
       <CurrentUserButton v-if="isLoggedIn" :show-arrow="false" />
     </header>
-    <div class="size-full contain-content rounded-b-4xl">
+    <div class="size-full rounded-b-4xl contain-content">
       <div
         :class="
-          cn('size-full relative', !isSwiping && 'transition-[translate]')
+          cn('relative size-full', !isSwiping && 'transition-[translate]')
         "
         :style="{ translate }"
       >
-        <div class="overflow-y-auto contain-size h-full w-screen absolute">
+        <div class="absolute h-full w-screen overflow-y-auto contain-size">
           <LinearControls mobile @navigate-assets="activeIndex = 2" />
         </div>
         <div
-          class="w-screen absolute h-full bg-base-background left-[100vw] top-0 flex flex-col"
+          class="absolute top-0 left-[100vw] flex h-full w-screen flex-col bg-base-background"
         >
           <LinearPreview mobile />
         </div>
         <AssetsSidebarTab
-          class="h-full w-screen absolute bg-base-background left-[200vw] top-0"
+          class="absolute top-0 left-[200vw] h-full w-screen bg-base-background"
         />
       </div>
     </div>
     <div
       ref="sliderPaneRef"
-      class="h-22 p-4 w-full flex gap-4 items-center justify-around bg-secondary-background"
+      class="flex h-22 w-full items-center justify-around gap-4 bg-secondary-background p-4"
     >
       <Button
         v-for="([label, icon], index) in tabs"
         :key="label"
         :variant="index === activeIndex ? 'secondary' : 'muted-textonly'"
-        class="flex-col h-14 grow"
+        class="h-14 grow flex-col"
         @click="onClick(index)"
       >
         <div class="relative size-4">
@@ -218,7 +218,7 @@ const menuEntries = computed<MenuItem[]>(() => [
               (queueStore.runningTasks.length > 0 ||
                 queueStore.pendingTasks.length > 0)
             "
-            class="absolute bg-primary-background size-2 -top-1 -right-1 rounded-full animate-pulse"
+            class="absolute -top-1 -right-1 size-2 animate-pulse rounded-full bg-primary-background"
           />
         </div>
         {{ t(label) }}
diff --git a/src/renderer/extensions/linearMode/OutputHistory.vue b/src/renderer/extensions/linearMode/OutputHistory.vue
index b281910fe6..1df42f494c 100644
--- a/src/renderer/extensions/linearMode/OutputHistory.vue
+++ b/src/renderer/extensions/linearMode/OutputHistory.vue
@@ -41,7 +41,7 @@ const queueCount = computed(
 )
 
 const itemClass = cn(
-  'shrink-0 cursor-pointer p-1 rounded-lg border-2 border-transparent outline-none',
+  'shrink-0 cursor-pointer rounded-lg border-2 border-transparent p-1 outline-none',
   'data-[state=checked]:border-interface-panel-job-progress-border'
 )
 
@@ -284,15 +284,15 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
     <article
       ref="outputsRef"
       data-testid="linear-outputs"
-      class="py-3 overflow-y-clip overflow-x-auto min-w-0"
+      class="min-w-0 overflow-x-auto overflow-y-clip py-3"
     >
-      <div class="flex items-start gap-0.5 mx-auto w-fit h-21">
+      <div class="mx-auto flex h-21 w-fit items-start gap-0.5">
         <div
           v-if="queueCount > 0 || hasActiveContent"
           :class="
             cn(
-              'sticky left-0 z-10 shrink-0 flex items-start gap-0.5',
-              'bg-comfy-menu-bg md:bg-comfy-menu-secondary-bg'
+              'sticky left-0 z-10 flex shrink-0 items-start gap-0.5',
+              'md:bg-comfy-menu-secondary-bg bg-comfy-menu-bg'
             )
           "
         >
@@ -331,14 +331,14 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
 
           <div
             v-if="hasActiveContent && visibleHistory.length > 0"
-            class="border-l border-border-default h-12 shrink-0 mx-4"
+            class="mx-4 h-12 shrink-0 border-l border-border-default"
           />
         </div>
 
         <template v-for="(asset, aIdx) in visibleHistory" :key="asset.id">
           <div
             v-if="aIdx > 0"
-            class="border-l border-border-default h-12 shrink-0 mx-4"
+            class="mx-4 h-12 shrink-0 border-l border-border-default"
           />
           <div
             v-for="(output, key) in toValue(allOutputs(asset))"
diff --git a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
index 07706ed742..f0a3e1f17a 100644
--- a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
+++ b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
@@ -20,7 +20,7 @@ function clearQueue(close: () => void) {
 </script>
 <template>
   <div
-    class="shrink-0 p-1 border-2 border-transparent relative"
+    class="relative shrink-0 border-2 border-transparent p-1"
     data-testid="linear-job"
   >
     <Popover side="top" :show-arrow="false" @focus-outside.prevent>
@@ -30,7 +30,7 @@ function clearQueue(close: () => void) {
           :aria-label="t('linearMode.queue.clickToClear')"
           variant="textonly"
           size="unset"
-          class="size-10 rounded-sm bg-secondary-background flex items-center justify-center"
+          class="flex size-10 items-center justify-center rounded-sm bg-secondary-background"
         >
           <Loader size="sm" class="text-muted-foreground" />
         </Button>
@@ -39,7 +39,7 @@ function clearQueue(close: () => void) {
         <Button
           :disabled="queueCount === 0"
           variant="textonly"
-          class="text-destructive-background px-4 text-sm"
+          class="px-4 text-sm text-destructive-background"
           @click="clearQueue(close)"
         >
           <i class="icon-[lucide--list-x]" />
@@ -50,7 +50,7 @@ function clearQueue(close: () => void) {
     <div
       v-if="queueCount > 0"
       aria-hidden="true"
-      class="absolute top-0 right-0 min-w-4 h-4 flex justify-center items-center rounded-full bg-primary-background text-text-primary text-xs"
+      class="absolute top-0 right-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary-background text-xs text-text-primary"
       v-text="queueCount"
     />
   </div>
diff --git a/src/renderer/extensions/linearMode/OutputHistoryItem.vue b/src/renderer/extensions/linearMode/OutputHistoryItem.vue
index 23c7ea6643..35ce86ebe3 100644
--- a/src/renderer/extensions/linearMode/OutputHistoryItem.vue
+++ b/src/renderer/extensions/linearMode/OutputHistoryItem.vue
@@ -13,7 +13,7 @@ const { output } = defineProps<{
 <template>
   <img
     v-if="getMediaType(output) === 'images'"
-    class="block size-10 rounded-sm object-cover bg-secondary-background"
+    class="block size-10 rounded-sm bg-secondary-background object-cover"
     loading="lazy"
     width="40"
     height="40"
diff --git a/src/renderer/extensions/linearMode/OutputPreviewItem.vue b/src/renderer/extensions/linearMode/OutputPreviewItem.vue
index 20003ccc5e..7f252726e5 100644
--- a/src/renderer/extensions/linearMode/OutputPreviewItem.vue
+++ b/src/renderer/extensions/linearMode/OutputPreviewItem.vue
@@ -12,7 +12,7 @@ const { latentPreview } = defineProps<{
       class="block size-10 rounded-sm object-cover"
       :src="latentPreview"
     />
-    <div v-else class="size-10 rounded-sm skeleton-shimmer" />
-    <LinearProgressBar class="w-10 h-1 mt-1" rounded />
+    <div v-else class="skeleton-shimmer size-10 rounded-sm" />
+    <LinearProgressBar class="mt-1 h-1 w-10" rounded />
   </div>
 </template>
diff --git a/src/renderer/extensions/linearMode/Preview3d.vue b/src/renderer/extensions/linearMode/Preview3d.vue
index 1ab5bba8d5..2c4f02d861 100644
--- a/src/renderer/extensions/linearMode/Preview3d.vue
+++ b/src/renderer/extensions/linearMode/Preview3d.vue
@@ -24,7 +24,7 @@ watch([containerRef, () => modelUrl], async () => {
 <template>
   <div
     ref="containerRef"
-    class="relative size-full md:w-[calc(100%-150px)] self-center"
+    class="relative size-full self-center md:w-[calc(100%-150px)]"
     @mouseenter="viewer.handleMouseEnter"
     @mouseleave="viewer.handleMouseLeave"
     @resize="viewer.handleResize"
diff --git a/src/renderer/extensions/linearMode/VideoPreview.vue b/src/renderer/extensions/linearMode/VideoPreview.vue
index 57504fc25f..76bf6c053d 100644
--- a/src/renderer/extensions/linearMode/VideoPreview.vue
+++ b/src/renderer/extensions/linearMode/VideoPreview.vue
@@ -23,5 +23,5 @@ const height = ref('')
       }
     "
   />
-  <span class="self-center z-10" v-text="`${width} x ${height}`" />
+  <span class="z-10 self-center" v-text="`${width} x ${height}`" />
 </template>
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index b85b9e1883..d870ec597a 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -21,7 +21,7 @@
       <div
         v-if="videoError"
         role="alert"
-        class="flex flex-auto flex-col items-center justify-center bg-muted-background text-center text-base-foreground py-8"
+        class="flex flex-auto flex-col items-center justify-center bg-muted-background py-8 text-center text-base-foreground"
       >
         <i class="mb-2 icon-[lucide--video-off] size-12 text-base-foreground" />
         <p class="text-sm text-base-foreground">
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 9898c8b6af..1056714c5e 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/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"
       />
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index c9851f0a5c..81e03ef01e 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/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'
           )
         "
       >
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 64973785c3..b8f5037120 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/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
           "
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index 666f3a402d..8bcdf4c650 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/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" />
diff --git a/src/renderer/extensions/vueNodes/components/LivePreview.vue b/src/renderer/extensions/vueNodes/components/LivePreview.vue
index 9bf681cdb2..f088637cde 100644
--- a/src/renderer/extensions/vueNodes/components/LivePreview.vue
+++ b/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"
     />
diff --git a/src/renderer/extensions/vueNodes/components/NodeBadge.vue b/src/renderer/extensions/vueNodes/components/NodeBadge.vue
index 52bada6111..be14d193e8 100644
--- a/src/renderer/extensions/vueNodes/components/NodeBadge.vue
+++ b/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
diff --git a/src/renderer/extensions/vueNodes/components/NodeBadges.vue b/src/renderer/extensions/vueNodes/components/NodeBadges.vue
index ac73d78dff..79598519f3 100644
--- a/src/renderer/extensions/vueNodes/components/NodeBadges.vue
+++ b/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"
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
index a0537d924a..7bed771916 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/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
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index e5ab1952b9..5cbab50b28 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/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>
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
index 0a8b9e483b..c25f999257 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/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'
   )
 )
 
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 14d1f57094..3c1319f703 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/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"
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 31fea03d9f..2b9fab2813 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/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',
     {
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
index 5bfae0b768..4f74083f21 100644
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
+++ b/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
       )
     "
diff --git a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
index b469935f04..a4d8bbaabb 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
@@ -51,10 +51,10 @@ const controlMode = defineModel<ControlOptions>()
 </script>
 
 <template>
-  <div class="w-113 max-w-md p-4 space-y-4">
+  <div class="w-113 max-w-md space-y-4 p-4">
     <div class="text-sm/tight text-muted-foreground">
       {{ $t('widgets.valueControl.header.prefix') }}
-      <span class="text-base-foreground font-medium">
+      <span class="font-medium text-base-foreground">
         {{
           widgetControlMode === 'before'
             ? $t('widgets.valueControl.header.before')
@@ -71,12 +71,12 @@ const controlMode = defineModel<ControlOptions>()
         as="label"
         variant="textonly"
         size="lg"
-        class="flex w-full h-[unset] text-left items-center justify-between py-2 gap-7"
+        class="flex h-[unset] w-full items-center justify-between gap-7 py-2 text-left"
         :for="option.mode"
       >
-        <div class="flex items-center gap-2 flex-1 min-w-0 text-wrap">
+        <div class="flex min-w-0 flex-1 items-center gap-2 text-wrap">
           <div
-            class="flex items-center justify-center size-8 rounded-lg shrink-0 bg-secondary-background border border-border-subtle"
+            class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-secondary-background"
           >
             <i
               v-if="option.icon"
@@ -91,7 +91,7 @@ const controlMode = defineModel<ControlOptions>()
             </span>
           </div>
 
-          <div class="flex flex-col gap-0.5 min-w-0 flex-1">
+          <div class="flex min-w-0 flex-1 flex-col gap-0.5">
             <div class="text-sm/tight font-normal text-base-foreground">
               <span>
                 {{ $t(`widgets.valueControl.${option.title}`) }}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 8609202f4b..a7933dca8d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <Button
-      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
+      class="w-full border-0 bg-component-node-widget-background p-2 text-base-foreground"
       :aria-label="widget.label"
       size="sm"
       variant="textonly"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index e3a163076e..41982d1f6b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -3,7 +3,7 @@
   <WidgetLayoutField :widget="widget">
     <label
       :class="
-        cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full px-4 py-2')
+        cn(WidgetInputBaseClass, 'flex w-full items-center gap-2 px-4 py-2')
       "
     >
       <ColorPicker
@@ -17,7 +17,7 @@
         @update:model-value="onPickerUpdate"
       />
       <span
-        class="text-xs truncate min-w-[4ch]"
+        class="min-w-[4ch] truncate text-xs"
         data-testid="widget-color-text"
         >{{ toHexFromFormat(localValue, format) }}</span
       >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberGradientSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberGradientSlider.vue
index 0cf03bedc9..d31d49e2e5 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberGradientSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberGradientSlider.vue
@@ -1,6 +1,6 @@
 <template>
   <WidgetLayoutField :widget="widget">
-    <div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')">
+    <div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')">
       <GradientSlider
         v-model="modelValue"
         :stops="gradientStops"
@@ -9,7 +9,7 @@
         :step="stepValue"
         :disabled="widget.options?.disabled"
         :aria-label="widget.name"
-        class="flex-1 min-w-0"
+        class="min-w-0 flex-1"
       />
       <InputNumber
         :key="timesEmptied"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index 267e3537af..3728e78f9b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -170,7 +170,7 @@ const inputAriaAttrs = computed(() => ({
       :hide-buttons="buttonsDisabled"
       :parse-value="parseWidgetValue"
       :input-attrs="inputAriaAttrs"
-      :class="cn(WidgetInputBaseClass, 'grow text-xs flex h-7 relative')"
+      :class="cn(WidgetInputBaseClass, 'relative flex h-7 grow text-xs')"
       @keydown.up.prevent="updateValueBy(stepValue)"
       @keydown.down.prevent="updateValueBy(-stepValue)"
       @keydown.page-up.prevent="updateValueBy(10 * stepValue)"
@@ -178,10 +178,10 @@ const inputAriaAttrs = computed(() => ({
     >
       <template #background>
         <div
-          class="absolute size-full rounded-lg pointer-events-none overflow-clip"
+          class="pointer-events-none absolute size-full overflow-clip rounded-lg"
         >
           <div
-            class="bg-primary-background/15 size-full"
+            class="size-full bg-primary-background/15"
             :style="{ width: `${sliderWidth}%` }"
           />
         </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index 1e353b5bcc..83622f4bc9 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -1,6 +1,6 @@
 <template>
   <WidgetLayoutField :widget="widget">
-    <div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')">
+    <div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')">
       <Slider
         :model-value="[modelValue]"
         v-bind="filteredProps"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
index b105747dd3..4c41701a3a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -4,7 +4,7 @@
       <Loader
         v-if="loading"
         size="sm"
-        class="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-component-node-foreground"
+        class="absolute top-1/2 left-3 z-10 -translate-y-1/2 text-component-node-foreground"
       />
       <InputText
         v-model="modelValue"
@@ -13,7 +13,7 @@
           cn(
             WidgetInputBaseClass,
             'w-full px-4 hover:bg-component-node-widget-background-hovered',
-            size === 'large' ? 'text-sm py-3' : 'text-xs py-2',
+            size === 'large' ? 'py-3 text-sm' : 'py-2 text-xs',
             loading && 'pl-9'
           )
         "
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index fc87ff9b86..7a0a7bdcf3 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -2,7 +2,7 @@
   <div class="relative" @pointerdown.stop>
     <div class="mb-4">
       <Button
-        class="text-base-foreground w-full border-0 bg-secondary-background hover:bg-secondary-background-hover"
+        class="w-full border-0 bg-secondary-background text-base-foreground hover:bg-secondary-background-hover"
         :disabled="isRecording || readonly"
         @click="handleStartRecording"
       >
@@ -12,7 +12,7 @@
     </div>
     <div
       v-if="isRecording || isPlaying || recordedURL"
-      class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg px-3 bg-node-component-surface text-text-secondary"
+      class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg bg-node-component-surface px-3 text-text-secondary"
     >
       <!-- Recording Status -->
       <div class="flex shrink-0 items-center gap-1">
@@ -45,7 +45,7 @@
       <button
         v-if="isRecording"
         :title="t('g.stopRecording', 'Stop Recording')"
-        class="flex shrink-0 size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex size-8 shrink-0 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopRecording"
       >
         <div class="size-2.5 rounded-sm bg-danger-100" />
@@ -54,19 +54,19 @@
       <button
         v-else-if="!isRecording && recordedURL && !isPlaying"
         :title="t('g.playRecording') || 'Play Recording'"
-        class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex size-8 shrink-0 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handlePlayRecording"
       >
-        <i class="text-text-secondary icon-[lucide--play] size-4" />
+        <i class="icon-[lucide--play] size-4 text-text-secondary" />
       </button>
 
       <button
         v-else-if="isPlaying"
         :title="t('g.stopPlayback') || 'Stop Playback'"
-        class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex size-8 shrink-0 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopPlayback"
       >
-        <i class="text-text-secondary icon-[lucide--square] size-4" />
+        <i class="icon-[lucide--square] size-4 text-text-secondary" />
       </button>
     </div>
     <audio
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
index 5705d60a7a..2803b57708 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
@@ -13,7 +13,7 @@
       :pt="{
         option: 'text-xs',
         dropdown: 'w-8',
-        label: cn('truncate min-w-[4ch]', $slots.default && 'mr-5'),
+        label: cn('min-w-[4ch] truncate', $slots.default && 'mr-5'),
         overlay: 'w-fit min-w-full'
       }"
       data-capture-wheel="true"
@@ -24,7 +24,7 @@
         />
       </template>
     </SelectPlus>
-    <div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5 flex">
+    <div class="absolute top-5 right-8 flex h-4 w-7 -translate-y-4/5">
       <slot />
     </div>
   </WidgetLayoutField>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 8949b2a0ef..4023deaa33 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'group relative rounded-lg hover:bg-component-node-widget-background-hovered focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+        'group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered',
         widget.borderStyle
       )
     "
@@ -10,7 +10,7 @@
     <label
       v-if="!hideLayoutField"
       :for="id"
-      class="pointer-events-none absolute left-3 top-1.5 z-10 text-xxs text-muted-foreground"
+      class="pointer-events-none absolute top-1.5 left-3 z-10 text-xxs text-muted-foreground"
     >
       {{ displayName }}
     </label>
@@ -21,7 +21,7 @@
       :class="
         cn(
           WidgetInputBaseClass,
-          'size-full text-xs resize-none',
+          'size-full resize-none text-xs',
           !hideLayoutField && 'pt-5'
         )
       "
@@ -37,7 +37,7 @@
       v-if="isReadOnly"
       variant="textonly"
       size="icon"
-      class="invisible absolute top-1.5 right-1.5 z-10 hover:bg-base-foreground/10 group-hover:visible group-focus-within:visible"
+      class="invisible absolute top-1.5 right-1.5 z-10 group-focus-within:visible group-hover:visible hover:bg-base-foreground/10"
       :title="$t('g.copyToClipboard')"
       :aria-label="$t('g.copyToClipboard')"
       @click="handleCopy"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
index 3f61493040..9aab71160e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -9,7 +9,7 @@
       :class="
         cn(
           WidgetInputBaseClass,
-          'w-full min-w-0 p-1 flex items-center justify-center gap-1'
+          'flex w-full min-w-0 items-center justify-center gap-1 p-1'
         )
       "
       @update:model-value="(v) => handleOptionChange(v as string)"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue
index e4e1220bf6..89eed58847 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue
@@ -45,10 +45,10 @@ watch(controlModel, props.widget.controlWidget.update)
           <Button
             variant="textonly"
             size="sm"
-            class="h-4 w-7 p-0 self-center rounded-xl bg-primary-background/30 hover:bg-primary-background-hover/30"
+            class="h-4 w-7 self-center rounded-xl bg-primary-background/30 p-0 hover:bg-primary-background-hover/30"
           >
             <i
-              :class="`${controlButtonIcon} text-primary-background text-xs w-full`"
+              :class="`${controlButtonIcon} w-full text-xs text-primary-background`"
             />
           </Button>
         </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index 623b1c4304..c6f3cac331 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -2,7 +2,7 @@
   <div class="relative" @pointerdown.stop>
     <div
       v-if="!hideWhenEmpty || modelValue"
-      class="bg-component-node-widget-background box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0"
+      class="relative box-border flex h-16 w-full items-center justify-start gap-4 rounded-lg bg-component-node-widget-background px-4 py-0"
     >
       <!-- Hidden audio element -->
       <audio
@@ -108,7 +108,7 @@
         popup
         class="audio-player-menu"
         :pt:root:class="
-          cn('bg-component-node-widget-background border-component-node-border')
+          cn('border-component-node-border bg-component-node-widget-background')
         "
         :pt:submenu:class="cn('bg-component-node-widget-background')"
       >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
index b945aef045..8a6f329a6c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
@@ -65,9 +65,9 @@ function handleFocus(event: FocusEvent) {
     :class="
       cn(
         'group',
-        'bg-component-node-widget-background rounded-lg transition-all duration-150',
-        'flex-1 flex items-center',
-        'text-base-foreground border-0',
+        'rounded-lg bg-component-node-widget-background transition-all duration-150',
+        'flex flex-1 items-center',
+        'border-0 text-base-foreground',
         'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80',
         customClass
       )
@@ -76,27 +76,27 @@ function handleFocus(event: FocusEvent) {
     <i
       :class="
         cn(
-          'size-4 ml-2 shrink-0 transition-colors duration-150',
+          'ml-2 size-4 shrink-0 transition-colors duration-150',
           isQuerying
             ? 'icon-[lucide--loader-circle] animate-spin'
             : 'icon-[lucide--search]',
           searchQuery?.trim() !== ''
             ? 'text-base-foreground'
-            : 'text-muted-foreground group-hover:text-base-foreground group-focus-within:text-base-foreground'
+            : 'text-muted-foreground group-focus-within:text-base-foreground group-hover:text-base-foreground'
         )
       "
     />
     <input
       v-model="searchQuery"
       type="text"
-      class="bg-transparent border-0 outline-0 ring-0 h-5 w-full my-1.5 mx-2 min-w-0"
+      class="mx-2 my-1.5 h-5 w-full min-w-0 border-0 bg-transparent ring-0 outline-0"
       :placeholder="$t('g.searchPlaceholder', { subject: '' })"
       :autofocus
       @focus="handleFocus"
     />
     <button
       v-if="searchQuery.trim().length > 0"
-      class="text-muted-foreground hover:text-base-foreground bg-transparent shrink-0 border-0 outline-0 ring-0 p-0 m-0 pr-3 pl-1 flex items-center justify-center transition-all duration-150 hover:scale-108"
+      class="m-0 flex shrink-0 items-center justify-center border-0 bg-transparent p-0 pr-3 pl-1 text-muted-foreground ring-0 outline-0 transition-all duration-150 hover:scale-108 hover:text-base-foreground"
       :aria-label="$t('g.clear')"
       @click="searchQuery = ''"
     >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index 0aa72c4aef..65670fbf1d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="
-      cn(WidgetInputBaseClass, 'w-full p-1 flex min-w-0 items-center gap-1')
+      cn(WidgetInputBaseClass, 'flex w-full min-w-0 items-center gap-1 p-1')
     "
   >
     <button
@@ -9,15 +9,15 @@
       :key="getOptionValue(option, index)"
       :class="
         cn(
-          'flex-1 min-w-0 h-6 px-5 py-[5px] rounded-sm flex justify-center items-center gap-1 transition-all duration-150 ease-in-out truncate',
-          'bg-transparent border-none',
+          'flex h-6 min-w-0 flex-1 items-center justify-center gap-1 truncate rounded-sm px-5 py-[5px] transition-all duration-150 ease-in-out',
+          'border-none bg-transparent',
           'text-center text-xs font-normal',
           {
             'bg-interface-menu-component-surface-selected':
               isSelected(index) && !disabled,
             'hover:bg-interface-menu-component-surface-selected/50':
               !isSelected(index) && !disabled,
-            'opacity-50 cursor-not-allowed': disabled,
+            'cursor-not-allowed opacity-50': disabled,
             'cursor-pointer': !disabled
           },
           isSelected(index) && !disabled
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
index ee52710d5f..e2356394ed 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
@@ -43,10 +43,10 @@ const selectedItems = computed(() => {
 
 const theButtonStyle = computed(() =>
   cn(
-    'border-0 bg-component-node-widget-background outline-none text-text-secondary',
+    'border-0 bg-component-node-widget-background text-text-secondary outline-none',
     disabled
       ? 'cursor-not-allowed'
-      : 'hover:bg-component-node-widget-background-hovered cursor-pointer',
+      : 'cursor-pointer hover:bg-component-node-widget-background-hovered',
     selectedItems.value.length > 0 && 'text-text-primary'
   )
 )
@@ -56,7 +56,7 @@ const theButtonStyle = computed(() =>
   <div
     :class="
       cn(WidgetInputBaseClass, 'flex text-base leading-none', {
-        'opacity-50 cursor-not-allowed outline-node-component-border': disabled
+        'cursor-not-allowed opacity-50 outline-node-component-border': disabled
       })
     "
   >
@@ -64,7 +64,7 @@ const theButtonStyle = computed(() =>
       :class="
         cn(
           theButtonStyle,
-          'flex justify-between items-center flex-1 min-w-0 h-8',
+          'flex h-8 min-w-0 flex-1 items-center justify-between',
           {
             'rounded-l-lg': uploadable,
             'rounded-lg': !uploadable
@@ -73,7 +73,7 @@ const theButtonStyle = computed(() =>
       "
       @click="emit('select-click', $event)"
     >
-      <span class="min-w-0 flex-1 px-1 py-2 text-left truncate">
+      <span class="min-w-0 flex-1 truncate px-1 py-2 text-left">
         <span v-if="!selectedItems.length">
           {{ placeholder }}
         </span>
@@ -85,7 +85,7 @@ const theButtonStyle = computed(() =>
         class="icon-[lucide--chevron-down]"
         :class="
           cn(
-            'mr-2 size-4 transition-transform duration-200 shrink-0 text-component-node-foreground-secondary',
+            'mr-2 size-4 shrink-0 text-component-node-foreground-secondary transition-transform duration-200',
             isOpen && 'rotate-180'
           )
         "
@@ -97,7 +97,7 @@ const theButtonStyle = computed(() =>
         cn(
           theButtonStyle,
           'relative',
-          'size-8 flex justify-center items-center border-l rounded-r-lg border-node-component-border'
+          'flex size-8 items-center justify-center rounded-r-lg border-l border-node-component-border'
         )
       "
     >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index dbe5450199..e1c3a783ce 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -42,7 +42,7 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
 })
 
 const actionButtonStyle = cn(
-  'h-8 bg-zinc-500/20 rounded-lg outline-1 -outline-offset-1 outline-node-component-border transition-all duration-150'
+  'h-8 rounded-lg bg-zinc-500/20 outline-1 -outline-offset-1 outline-node-component-border transition-all duration-150'
 )
 
 const layoutSwitchItemStyle =
@@ -114,7 +114,7 @@ function toggleBaseModelSelection(item: FilterOption) {
         cn(
           actionButtonStyle,
           'hover:outline-component-node-widget-background-highlighted/80',
-          'focus-within:outline-component-node-widget-background-highlighted/80 focus-within:ring-0'
+          'focus-within:ring-0 focus-within:outline-component-node-widget-background-highlighted/80'
         )
       "
     />
@@ -155,7 +155,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       <div
         :class="
           cn(
-            'flex flex-col gap-2 p-2 min-w-32',
+            'flex min-w-32 flex-col gap-2 p-2',
             'bg-component-node-background',
             'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
@@ -166,7 +166,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           :key="item.name"
           variant="textonly"
           size="unset"
-          :class="cn('flex justify-between items-center h-6 text-left')"
+          :class="cn('flex h-6 items-center justify-between text-left')"
           @click="handleSortSelected(item)"
         >
           <span>{{ item.name }}</span>
@@ -217,7 +217,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       <div
         :class="
           cn(
-            'flex flex-col gap-2 p-2 min-w-32',
+            'flex min-w-32 flex-col gap-2 p-2',
             'bg-component-node-background',
             'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
@@ -228,7 +228,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           :key="item.value"
           variant="textonly"
           size="unset"
-          :class="cn('flex justify-between items-center h-6 text-left')"
+          :class="cn('flex h-6 items-center justify-between text-left')"
           @click="handleOwnershipSelected(item)"
         >
           <span>{{ item.name }}</span>
@@ -279,7 +279,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       <div
         :class="
           cn(
-            'flex flex-col gap-2 p-2 min-w-32',
+            'flex min-w-32 flex-col gap-2 p-2',
             'bg-component-node-background',
             'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
@@ -290,7 +290,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           :key="item.value"
           variant="textonly"
           size="unset"
-          :class="cn('flex justify-between items-center h-6 text-left')"
+          :class="cn('flex h-6 items-center justify-between text-left')"
           @click="toggleBaseModelSelection(item)"
         >
           <span>{{ item.name }}</span>
@@ -303,7 +303,7 @@ function toggleBaseModelSelection(item: FilterOption) {
         <Button
           variant="textonly"
           size="unset"
-          :class="cn('flex justify-between items-center h-6 text-left')"
+          :class="cn('flex h-6 items-center justify-between text-left')"
           @click="baseModelSelected = new Set()"
         >
           {{ t('g.clearFilters') }}
@@ -315,7 +315,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       :class="
         cn(
           actionButtonStyle,
-          'flex justify-center items-center p-1 gap-1 hover:outline-component-node-widget-background-highlighted'
+          'flex items-center justify-center gap-1 p-1 hover:outline-component-node-widget-background-highlighted'
         )
       "
     >
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index 3151a63f8c..aba537a3aa 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -18,7 +18,7 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
 </script>
 
 <template>
-  <div class="text-secondary mb-4 flex gap-1 px-4 justify-start">
+  <div class="text-secondary mb-4 flex justify-start gap-1 px-4">
     <button
       v-for="option in filterOptions"
       :key="option.value"
@@ -26,9 +26,9 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
       :disabled="singleFilterOption"
       :class="
         cn(
-          'px-4 py-2 rounded-md inline-flex justify-center items-center select-none appearance-none border-0 text-base-foreground',
+          'inline-flex appearance-none items-center justify-center rounded-md border-0 px-4 py-2 text-base-foreground select-none',
           !singleFilterOption &&
-            'transition-all duration-150 hover:text-base-foreground hover:bg-interface-menu-component-surface-hovered cursor-pointer active:scale-95',
+            'cursor-pointer transition-all duration-150 hover:bg-interface-menu-component-surface-hovered hover:text-base-foreground active:scale-95',
           !singleFilterOption && filterSelected === option.value
             ? 'bg-interface-menu-component-surface-selected! text-base-foreground'
             : 'bg-transparent'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
index eee59ca567..ba43401d9a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
@@ -55,13 +55,13 @@ function handleVideoLoad(event: Event) {
   <div
     :class="
       cn(
-        'flex gap-1 select-none group/item cursor-pointer bg-component-node-widget-background',
+        'group/item flex cursor-pointer gap-1 bg-component-node-widget-background select-none',
         'transition-[transform,box-shadow,background-color] duration-150',
         {
           'flex-col text-center': layout === 'grid',
-          'flex-row text-left max-h-16 rounded-lg hover:scale-102 active:scale-98':
+          'max-h-16 flex-row rounded-lg text-left hover:scale-102 active:scale-98':
             layout === 'list',
-          'flex-row text-left hover:bg-component-node-widget-background-hovered rounded-lg':
+          'flex-row rounded-lg text-left hover:bg-component-node-widget-background-hovered':
             layout === 'list-small',
           // selection
           'ring-2 ring-component-node-widget-background-highlighted':
@@ -77,10 +77,10 @@ function handleVideoLoad(event: Event) {
       :class="
         cn(
           'relative',
-          'w-full aspect-square overflow-hidden outline-1 -outline-offset-1 outline-interface-stroke',
+          'aspect-square w-full overflow-hidden outline-1 -outline-offset-1 outline-interface-stroke',
           'transition-[transform,box-shadow] duration-150',
           {
-            'min-w-16 max-w-16 rounded-l-lg': layout === 'list',
+            'max-w-16 min-w-16 rounded-l-lg': layout === 'list',
             'rounded-sm group-hover/item:scale-108 group-active/item:scale-95':
               layout === 'grid',
             // selection
@@ -96,7 +96,7 @@ function handleVideoLoad(event: Event) {
         class="absolute top-1 left-1 size-4 rounded-full border border-base-foreground bg-primary-background"
       >
         <i
-          class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-base-foreground bold"
+          class="bold icon-[lucide--check] size-3 translate-y-[-0.5px] text-base-foreground"
         />
       </div>
       <video
@@ -125,8 +125,8 @@ function handleVideoLoad(event: Event) {
       :class="
         cn('flex gap-1', {
           'flex-col': layout === 'grid',
-          'flex-col px-4 py-1 w-full justify-center min-w-0': layout === 'list',
-          'flex-row p-2 items-center justify-between w-full':
+          'w-full min-w-0 flex-col justify-center px-4 py-1': layout === 'list',
+          'w-full flex-row items-center justify-between p-2':
             layout === 'list-small'
         })
       "
@@ -135,7 +135,7 @@ function handleVideoLoad(event: Event) {
         v-tooltip="layout === 'grid' ? (label ?? name) : undefined"
         :class="
           cn(
-            'block text-xs line-clamp-2 wrap-break-word overflow-hidden',
+            'line-clamp-2 block overflow-hidden text-xs wrap-break-word',
             'transition-colors duration-150',
             // selection
             !!selected && 'text-base-foreground'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index f89761c88c..5a1fa7af9b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -18,12 +18,12 @@ const hideLayoutField = useHideLayoutField()
   <div
     :class="
       cn(
-        'grid grid-cols-subgrid min-w-0 justify-between gap-1 text-node-component-slot-text',
+        'grid min-w-0 grid-cols-subgrid justify-between gap-1 text-node-component-slot-text',
         rootClass
       )
     "
   >
-    <div v-if="!hideLayoutField" class="truncate content-center-safe">
+    <div v-if="!hideLayoutField" class="content-center-safe truncate">
       <template v-if="widget.name">
         {{ widget.label || widget.name }}
       </template>
@@ -33,7 +33,7 @@ const hideLayoutField = useHideLayoutField()
       <div
         :class="
           cn(
-            'cursor-default min-w-0 rounded-lg focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+            'min-w-0 cursor-default rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted',
             widget.borderStyle
           )
         "
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
index f371c765b9..9cbe080c37 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
@@ -3,7 +3,7 @@ import { cn } from '@comfyorg/tailwind-utils'
 const sharedButtonClasses = cn(
   'inline-flex items-center justify-center border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out',
   'hover:bg-node-component-surface-hovered active:bg-node-component-surface-selected',
-  'disabled:bg-node-component-disabled disabled:text-node-icon-disabled disabled:cursor-not-allowed'
+  'disabled:cursor-not-allowed disabled:bg-node-component-disabled disabled:text-node-icon-disabled'
 )
 
 export function useNumberWidgetButtonPt(options?: {
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 810f8a22f9..46894ea812 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -87,7 +87,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
     </div>
     <Splitter
       :key="isArrangeMode ? 'arrange' : 'normal'"
-      class="h-[calc(100%-var(--workflow-tabs-height))] w-full border-none bg-comfy-menu-secondary-bg"
+      class="bg-comfy-menu-secondary-bg h-[calc(100%-var(--workflow-tabs-height))] w-full border-none"
       :state-key="isArrangeMode ? 'builder-splitter' : undefined"
       :state-storage="isArrangeMode ? 'local' : undefined"
       @resizestart="({ originalEvent }) => originalEvent.preventDefault()"
@@ -104,8 +104,8 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         "
         :class="
           cn(
-            'outline-none arrange-panel',
-            showLeftBuilder ? 'bg-comfy-menu-bg min-w-78' : 'min-w-min'
+            'arrange-panel outline-none',
+            showLeftBuilder ? 'min-w-78 bg-comfy-menu-bg' : 'min-w-min'
           )
         "
       >
@@ -114,7 +114,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         </div>
         <div
           v-else-if="sidebarOnLeft && activeTab"
-          class="flex h-full border-border-subtle border-r"
+          class="flex h-full border-r border-border-subtle"
         >
           <ExtensionSlot :extension="activeTab" />
         </div>
@@ -127,20 +127,20 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       <SplitterPanel
         id="linearCenterPanel"
         :size="isArrangeMode ? CENTER_PANEL_SIZE : 98"
-        class="flex flex-col min-w-0 gap-4 relative text-muted-foreground outline-none"
+        class="relative flex min-w-0 flex-col gap-4 text-muted-foreground outline-none"
       >
         <LinearProgressBar
-          class="absolute top-0 left-0 w-[calc(100%+16px)] z-21"
+          class="absolute top-0 left-0 z-21 w-[calc(100%+16px)]"
         />
         <LinearPreview
           :run-button-click="linearWorkflowRef?.runButtonClick"
           :typeform-widget-id="TYPEFORM_WIDGET_ID"
         />
-        <div class="absolute z-21 top-4 left-4">
+        <div class="absolute top-4 left-4 z-21">
           <AppModeToolbar v-if="!isBuilderMode" />
         </div>
-        <div ref="bottomLeftRef" class="absolute z-20 bottom-7 left-4" />
-        <div ref="bottomRightRef" class="absolute z-20 bottom-7 right-4" />
+        <div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />
+        <div ref="bottomRightRef" class="absolute right-4 bottom-7 z-20" />
       </SplitterPanel>
       <SplitterPanel
         v-if="hasRightPanel"
@@ -152,8 +152,8 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         :style="showLeftBuilder && !activeTab ? { display: 'none' } : undefined"
         :class="
           cn(
-            'outline-none arrange-panel',
-            showRightBuilder ? 'bg-comfy-menu-bg min-w-78' : 'min-w-min'
+            'arrange-panel outline-none',
+            showRightBuilder ? 'min-w-78 bg-comfy-menu-bg' : 'min-w-min'
           )
         "
       >
@@ -167,7 +167,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         />
         <div
           v-else-if="activeTab"
-          class="flex h-full border-border-subtle border-l"
+          class="flex h-full border-l border-border-subtle"
         >
           <ExtensionSlot :extension="activeTab" />
         </div>
diff --git a/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue b/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
index e5343f2019..064df4932e 100644
--- a/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
@@ -6,7 +6,7 @@
         <div
           v-for="pkg in importFailedPackages"
           :key="pkg.packageId"
-          class="flex flex-col gap-2 max-h-60 overflow-x-hidden overflow-y-auto scrollbar-custom"
+          class="flex scrollbar-custom max-h-60 flex-col gap-2 overflow-x-hidden overflow-y-auto"
           role="region"
           :aria-label="`Error traceback for ${pkg.packageId}`"
           tabindex="0"
@@ -14,7 +14,7 @@
           <!-- Error Message -->
           <div
             v-if="pkg.traceback || pkg.errorMessage"
-            class="text-xs p-4 rounded-md bg-secondary-background font-mono"
+            class="rounded-md bg-secondary-background p-4 font-mono text-xs"
           >
             {{ pkg.traceback || pkg.errorMessage }}
           </div>
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
index 879f98b035..8bdf696a0b 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
@@ -28,7 +28,7 @@
             :complete-on-focus="false"
             :delay="8"
             option-label="query"
-            class="w-full min-w-md max-w-lg"
+            class="w-full max-w-lg min-w-md"
             :pt="{
               root: { class: 'relative' },
               pcInputText: {
@@ -55,7 +55,7 @@
           >
             <template #dropdownicon>
               <i
-                class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+                class="pi pi-search absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
               />
             </template>
           </AutoCompletePlus>
@@ -125,7 +125,7 @@
     </template>
 
     <template #content>
-      <div v-if="isLoading" class="scrollbar-hide size-full overflow-auto">
+      <div v-if="isLoading" class="size-full scrollbar-hide overflow-auto">
         <GridSkeleton :grid-style="GRID_STYLE" :skeleton-card-count />
       </div>
       <NoResultsPlaceholder
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index d53c51372a..2fdb82e9b1 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -51,7 +51,7 @@
             v-for="(packageName, i) in importFailedConflicts"
             :key="i"
             :aria-label="`Import failed package: ${packageName}`"
-            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
+            class="flex min-h-6 shrink-0 items-center justify-between px-4 py-1 hover:bg-node-component-surface-hovered"
           >
             <span class="text-xs text-muted">
               {{ packageName }}
@@ -100,7 +100,7 @@
             v-for="(conflict, i) in allConflictDetails"
             :key="i"
             :aria-label="`Conflict: ${getConflictMessage(conflict, t)}`"
-            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
+            class="flex min-h-6 shrink-0 items-center justify-between px-4 py-1 hover:bg-node-component-surface-hovered"
           >
             <span class="text-xs text-muted">{{
               getConflictMessage(conflict, t)
@@ -148,7 +148,7 @@
           <div
             v-for="conflictResult in conflictData"
             :key="conflictResult.package_id"
-            class="flex min-h-6 shrink-0 hover:bg-node-component-surface-hovered items-center justify-between px-4 py-1"
+            class="flex min-h-6 shrink-0 items-center justify-between px-4 py-1 hover:bg-node-component-surface-hovered"
           >
             <span class="text-xs text-muted">
               {{ conflictResult.package_name }}
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
index 9537b540b5..edd4ab7861 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
@@ -2,11 +2,11 @@
   <template v-if="nodePack">
     <div
       ref="scrollContainer"
-      class="flex h-full flex-col overflow-y-auto scrollbar-custom"
+      class="flex scrollbar-custom h-full flex-col overflow-y-auto"
     >
       <PropertiesAccordionItem v-if="!importFailed" :class="accordionClass">
         <template #label>
-          <span class="text-xs uppercase font-inter">
+          <span class="font-inter text-xs uppercase">
             {{ t('manager.actions') }}
           </span>
         </template>
@@ -35,7 +35,7 @@
 
       <PropertiesAccordionItem :class="accordionClass">
         <template #label>
-          <span class="text-xs uppercase font-inter">
+          <span class="font-inter text-xs uppercase">
             {{ t('manager.basicInfo') }}
           </span>
         </template>
@@ -74,7 +74,7 @@
 
       <PropertiesAccordionItem :class="accordionClass">
         <template #label>
-          <span class="text-xs uppercase font-inter">
+          <span class="font-inter text-xs uppercase">
             {{ t('g.description') }}
           </span>
         </template>
@@ -86,7 +86,7 @@
         :class="accordionClass"
       >
         <template #label>
-          <span class="text-xs uppercase font-inter">
+          <span class="font-inter text-xs uppercase">
             ⚠️ {{ importFailed ? t('g.error') : t('g.warning') }}
           </span>
         </template>
@@ -97,7 +97,7 @@
 
       <PropertiesAccordionItem :class="accordionClass">
         <template #label>
-          <span class="text-xs uppercase font-inter">
+          <span class="font-inter text-xs uppercase">
             {{ t('g.nodes') }}
           </span>
         </template>
@@ -158,7 +158,7 @@ const { nodePack } = defineProps<{
 const scrollContainer = ref<HTMLElement | null>(null)
 
 const accordionClass = cn(
-  'bg-modal-panel-background border-t border-border-default'
+  'border-t border-border-default bg-modal-panel-background'
 )
 
 const managerStore = useComfyManagerStore()
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
index bafb544106..dd1faf0f78 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="nodePacks?.length"
-    class="flex h-full flex-col overflow-y-auto scrollbar-custom"
+    class="flex scrollbar-custom h-full flex-col overflow-y-auto"
   >
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter">
+        <span class="font-inter text-xs uppercase">
           {{ t('manager.actions') }}
         </span>
       </template>
@@ -42,7 +42,7 @@
 
     <PropertiesAccordionItem :class="accordionClass">
       <template #label>
-        <span class="text-xs uppercase font-inter">
+        <span class="font-inter text-xs uppercase">
           {{ t('manager.basicInfo') }}
         </span>
       </template>
@@ -97,7 +97,7 @@ const { nodePacks } = defineProps<{
 const { t } = useI18n()
 
 const accordionClass = cn(
-  'bg-modal-panel-background border-t border-border-default'
+  'border-t border-border-default bg-modal-panel-background'
 )
 
 const managerStore = useComfyManagerStore()
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
index 5ba39872d4..c1c8651cb5 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
@@ -15,7 +15,7 @@
         :href="nodePack.repository"
         target="_blank"
         rel="noopener noreferrer"
-        class="inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors hover:text-foreground"
+        class="hover:text-foreground inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors"
       >
         <i
           v-if="isGitHubLink(nodePack.repository)"
@@ -31,12 +31,12 @@
         :href="licenseInfo.text"
         target="_blank"
         rel="noopener noreferrer"
-        class="inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors hover:text-foreground"
+        class="hover:text-foreground inline-flex items-center gap-1.5 text-muted-foreground no-underline transition-colors"
       >
         <span class="break-all">{{ licenseInfo.text }}</span>
         <i class="icon-[lucide--external-link] size-4 shrink-0" />
       </a>
-      <span v-else class="text-muted-foreground break-all">
+      <span v-else class="break-all text-muted-foreground">
         {{ licenseInfo.text }}
       </span>
     </ModelInfoField>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
index 764ca6ef15..2023dff279 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -11,7 +11,7 @@
           v-if="conflict.required_value"
           class="overflow-x-hidden rounded-sm"
         >
-          <p class="m-0 text-xs text-muted-foreground break-all font-mono">
+          <p class="m-0 font-mono text-xs break-all text-muted-foreground">
             {{ conflict.required_value }}
           </p>
         </div>
diff --git a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
index 6080e93343..bed348671d 100644
--- a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
+++ b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="aspect-7/3 w-full overflow-hidden z-0">
+  <div class="z-0 aspect-7/3 w-full overflow-hidden">
     <!-- default banner show -->
     <div v-if="showDefaultBanner" class="size-full">
       <img
@@ -25,8 +25,8 @@
         :alt="nodePack.name + ' banner'"
         :class="
           isImageError
-            ? 'relative size-full object-cover z-10'
-            : 'relative size-full object-contain z-10'
+            ? 'relative z-10 size-full object-cover'
+            : 'relative z-10 size-full object-contain'
         "
         @error="isImageError = true"
       />
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
index 196b229696..f142284bc7 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'flex size-full flex-col overflow-hidden rounded-lg bg-modal-card-background transition-colors duration-200 cursor-pointer select-none',
+        'flex size-full cursor-pointer flex-col overflow-hidden rounded-lg bg-modal-card-background transition-colors duration-200 select-none',
         isSelected
           ? 'ring-3 ring-modal-card-border-highlighted'
           : 'hover:bg-modal-card-background-hovered',
@@ -16,8 +16,8 @@
     </div>
 
     <!-- Content -->
-    <div class="flex flex-1 flex-col rounded-lg min-h-0">
-      <div class="size-full py-2 px-3">
+    <div class="flex min-h-0 flex-1 flex-col rounded-lg">
+      <div class="size-full px-3 py-2">
         <div class="flex size-full flex-col gap-y-1">
           <span
             class="truncate overflow-hidden text-xs font-bold text-ellipsis"