diff --git a/eslint.config.ts b/eslint.config.ts
index 131c63ace6..4e19eba2e4 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -4,36 +4,67 @@ import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
 import { importX } from 'eslint-plugin-import-x'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
+import tailwind from 'eslint-plugin-tailwindcss'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
 import { defineConfig } from 'eslint/config'
 import globals from 'globals'
-import tseslint from 'typescript-eslint'
+import {
+  configs as tseslintConfigs,
+  parser as tseslintParser
+} from 'typescript-eslint'
 import vueParser from 'vue-eslint-parser'
 
 const extraFileExtensions = ['.vue']
 
+const commonGlobals = {
+  ...globals.browser,
+  __COMFYUI_FRONTEND_VERSION__: 'readonly'
+} as const
+
+const settings = {
+  'import/resolver': {
+    typescript: true,
+    node: true
+  },
+  tailwindcss: {
+    config: `${import.meta.dirname}/packages/design-system/src/css/style.css`,
+    functions: ['cn', 'clsx', 'tw']
+  }
+} as const
+
+const commonParserOptions = {
+  parser: tseslintParser,
+  projectService: true,
+  tsConfigRootDir: import.meta.dirname,
+  ecmaVersion: 2020,
+  sourceType: 'module',
+  extraFileExtensions
+} as const
+
 export default defineConfig([
   {
     ignores: [
-      'src/scripts/*',
-      'src/extensions/core/*',
-      'src/types/vue-shim.d.ts',
+      '.i18nrc.cjs',
+      'components.d.ts',
+      'lint-staged.config.js',
+      'vitest.setup.ts',
+      '**/vite.config.*.timestamp*',
+      '**/vitest.config.*.timestamp*',
       'packages/registry-types/src/comfyRegistryTypes.ts',
+      'src/extensions/core/*',
+      'src/scripts/*',
       'src/types/generatedManagerTypes.ts',
-      '**/vite.config.*.timestamp*',
-      '**/vitest.config.*.timestamp*'
+      'src/types/vue-shim.d.ts'
     ]
   },
   {
     files: ['./**/*.{ts,mts}'],
+    settings,
     languageOptions: {
-      globals: {
-        ...globals.browser,
-        __COMFYUI_FRONTEND_VERSION__: 'readonly'
-      },
+      globals: commonGlobals,
       parserOptions: {
-        parser: tseslint.parser,
+        ...commonParserOptions,
         projectService: {
           allowDefaultProject: [
             'vite.config.mts',
@@ -42,47 +73,26 @@ export default defineConfig([
             'playwright.config.ts',
             'playwright.i18n.config.ts'
           ]
-        },
-        tsConfigRootDir: import.meta.dirname,
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        extraFileExtensions
-      }
-    },
-    settings: {
-      'import/resolver': {
-        typescript: true,
-        node: true
+        }
       }
     }
   },
   {
     files: ['./**/*.vue'],
+    settings,
     languageOptions: {
-      globals: {
-        ...globals.browser,
-        __COMFYUI_FRONTEND_VERSION__: 'readonly'
-      },
+      globals: commonGlobals,
       parser: vueParser,
-      parserOptions: {
-        parser: tseslint.parser,
-        projectService: true,
-        tsConfigRootDir: import.meta.dirname,
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        extraFileExtensions
-      }
-    },
-    settings: {
-      'import/resolver': {
-        typescript: true,
-        node: true
-      }
+      parserOptions: commonParserOptions
     }
   },
   pluginJs.configs.recommended,
-  // eslint-disable-next-line import-x/no-named-as-default-member
-  tseslint.configs.recommended,
+
+  tseslintConfigs.recommended,
+  // Difference in typecheck on CI vs Local
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Bad types in the plugin
+  tailwind.configs['flat/recommended'],
   pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
   storybook.configs['flat/recommended'],
@@ -114,6 +124,7 @@ export default defineConfig([
       'import-x/no-relative-packages': 'error',
       'unused-imports/no-unused-imports': 'error',
       'no-console': ['error', { allow: ['warn', 'error'] }],
+      'tailwindcss/no-custom-classname': 'off', // TODO: fix
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
diff --git a/package.json b/package.json
index 43ce2d1fb3..b631ab2243 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
     "@trivago/prettier-plugin-sort-imports": "catalog:",
+    "@types/eslint-plugin-tailwindcss": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -73,6 +74,7 @@
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-storybook": "catalog:",
+    "eslint-plugin-tailwindcss": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
     "fs-extra": "^11.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8bb996c7da..3b362bc15b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,9 @@ catalogs:
     '@trivago/prettier-plugin-sort-imports':
       specifier: ^5.2.0
       version: 5.2.2
+    '@types/eslint-plugin-tailwindcss':
+      specifier: ^3.17.0
+      version: 3.17.0
     '@types/fs-extra':
       specifier: ^11.0.4
       version: 11.0.4
@@ -147,6 +150,9 @@ catalogs:
     eslint-plugin-storybook:
       specifier: ^9.1.6
       version: 9.1.6
+    eslint-plugin-tailwindcss:
+      specifier: 4.0.0-beta.0
+      version: 4.0.0-beta.0
     eslint-plugin-unused-imports:
       specifier: ^4.2.0
       version: 4.2.0
@@ -274,6 +280,9 @@ catalogs:
       specifier: ^3.3.0
       version: 3.3.0
 
+overrides:
+  '@types/eslint': '-'
+
 importers:
 
   .:
@@ -489,6 +498,9 @@ importers:
       '@trivago/prettier-plugin-sort-imports':
         specifier: 'catalog:'
         version: 5.2.2(@vue/compiler-sfc@3.5.13)(prettier@3.3.2)
+      '@types/eslint-plugin-tailwindcss':
+        specifier: 'catalog:'
+        version: 3.17.0
       '@types/fs-extra':
         specifier: 'catalog:'
         version: 11.0.4
@@ -537,6 +549,9 @@ importers:
       eslint-plugin-storybook:
         specifier: 'catalog:'
         version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))(typescript@5.9.2)
+      eslint-plugin-tailwindcss:
+        specifier: 'catalog:'
+        version: 4.0.0-beta.0(tailwindcss@4.1.12)
       eslint-plugin-unused-imports:
         specifier: 'catalog:'
         version: 4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))
@@ -2990,6 +3005,9 @@ packages:
   '@types/diff-match-patch@1.0.36':
     resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
 
+  '@types/eslint-plugin-tailwindcss@3.17.0':
+    resolution: {integrity: sha512-ucQGf2YIdTcndYcxRU3UdZgmhUHsOlbIF4BaRtl0op+7k2JmqM2i3aXZ6XIcfZgVq1ZKov7VM5c/BR81ukmkyg==}
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -4508,7 +4526,7 @@ packages:
     resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      '@types/eslint': '>=8.0.0'
+      '@types/eslint': '*'
       eslint: '>=8.0.0'
       eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
       prettier: '>=3.0.0'
@@ -4525,6 +4543,12 @@ packages:
       eslint: '>=8'
       storybook: ^9.1.6
 
+  eslint-plugin-tailwindcss@4.0.0-beta.0:
+    resolution: {integrity: sha512-WWCajZgQu38Sd67ZCl2W6i3MRzqB0d+H8s4qV9iB6lBJbsDOIpIlj6R1Fj2FXkoWErbo05pZnZYbCGIU9o/DsA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      tailwindcss: ^3.4.0 || ^4.0.0
+
   eslint-plugin-unused-imports@4.2.0:
     resolution: {integrity: sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==}
     peerDependencies:
@@ -6966,6 +6990,11 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
+  tailwind-api-utils@1.0.3:
+    resolution: {integrity: sha512-KpzUHkH1ug1sq4394SLJX38ZtpeTiqQ1RVyFTTSY2XuHsNSTWUkRo108KmyyrMWdDbQrLYkSHaNKj/a3bmA4sQ==}
+    peerDependencies:
+      tailwindcss: ^3.3.0 || ^4.0.0 || ^4.0.0-beta
+
   tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
@@ -10336,6 +10365,8 @@ snapshots:
 
   '@types/diff-match-patch@1.0.36': {}
 
+  '@types/eslint-plugin-tailwindcss@3.17.0': {}
+
   '@types/estree@1.0.5': {}
 
   '@types/estree@1.0.8': {}
@@ -10748,7 +10779,7 @@ snapshots:
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
       magic-string: 0.30.19
-      postcss: 8.5.1
+      postcss: 8.5.6
       source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.13':
@@ -12097,6 +12128,14 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-plugin-tailwindcss@4.0.0-beta.0(tailwindcss@4.1.12):
+    dependencies:
+      fast-glob: 3.3.3
+      postcss: 8.5.6
+      synckit: 0.11.11
+      tailwind-api-utils: 1.0.3(tailwindcss@4.1.12)
+      tailwindcss: 4.1.12
+
   eslint-plugin-unused-imports@4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
@@ -15115,6 +15154,13 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tailwind-api-utils@1.0.3(tailwindcss@4.1.12):
+    dependencies:
+      enhanced-resolve: 5.18.3
+      jiti: 2.5.1
+      local-pkg: 1.1.2
+      tailwindcss: 4.1.12
+
   tailwind-merge@2.6.0: {}
 
   tailwindcss-primeui@0.6.1(tailwindcss@4.1.12):
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 936e0ce8b4..f3b1ce3763 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -29,6 +29,7 @@ catalog:
   '@storybook/vue3-vite': ^9.1.1
   '@tailwindcss/vite': ^4.1.12
   '@trivago/prettier-plugin-sort-imports': ^5.2.0
+  '@types/eslint-plugin-tailwindcss': ^3.17.0
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^20.14.8
@@ -50,6 +51,7 @@ catalog:
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-prettier: ^5.5.4
   eslint-plugin-storybook: ^9.1.6
+  eslint-plugin-tailwindcss: 4.0.0-beta.0
   eslint-plugin-unused-imports: ^4.2.0
   eslint-plugin-vue: ^10.4.0
   firebase: ^11.6.0
@@ -95,6 +97,9 @@ catalog:
 
 cleanupUnusedCatalogs: true
 
+overrides:
+  '@types/eslint': '-'
+
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs
diff --git a/src/App.vue b/src/App.vue
index 6f6f10a1ea..c0c9fdd201 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <router-view />
   <ProgressSpinner
     v-if="isLoading"
-    class="absolute inset-0 flex justify-center items-center h-[unset]"
+    class="absolute inset-0 flex h-[unset] items-center justify-center"
   />
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />
diff --git a/src/components/bottomPanel/BottomPanel.vue b/src/components/bottomPanel/BottomPanel.vue
index 0ed71bffa5..cffa74f76a 100644
--- a/src/components/bottomPanel/BottomPanel.vue
+++ b/src/components/bottomPanel/BottomPanel.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex h-full flex-col">
     <Tabs
       :key="$i18n.locale"
       v-model:value="bottomPanelStore.activeBottomPanelTabId"
     >
       <TabList pt:tab-list="border-none">
-        <div class="w-full flex justify-between">
+        <div class="flex w-full justify-between">
           <div class="tabs-container">
             <Tab
               v-for="tab in bottomPanelStore.bottomPanelTabs"
               :key="tab.id"
               :value="tab.id"
-              class="p-3 border-none"
+              class="border-none p-3"
             >
               <span class="font-bold">
                 {{ getTabDisplayTitle(tab) }}
@@ -41,7 +41,7 @@
       </TabList>
     </Tabs>
     <!-- h-0 to force the div to grow -->
-    <div class="grow h-0">
+    <div class="h-0 grow">
       <ExtensionSlot
         v-if="
           bottomPanelStore.bottomPanelVisible &&
diff --git a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
index 459d095ae2..fb143ca01b 100644
--- a/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full flex flex-col p-4">
-    <div class="flex-1 min-h-0 overflow-auto">
+  <div class="flex h-full flex-col p-4">
+    <div class="min-h-0 flex-1 overflow-auto">
       <ShortcutsList
         :commands="essentialsCommands"
         :subcategories="essentialsSubcategories"
diff --git a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
index 7bc8cbf25f..1481b012f7 100644
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="shortcuts-list flex justify-center">
-    <div class="grid gap-4 md:gap-24 h-full grid-cols-1 md:grid-cols-3 w-[90%]">
+    <div class="grid h-full w-[90%] grid-cols-1 gap-4 md:grid-cols-3 md:gap-24">
       <div
         v-for="(subcategoryCommands, subcategory) in filteredSubcategories"
         :key="subcategory"
         class="flex flex-col"
       >
         <h3
-          class="subcategory-title text-xs font-bold uppercase tracking-wide text-surface-600 dark-theme:text-surface-400 mb-4"
+          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-surface-600 uppercase dark-theme:text-surface-400"
         >
           {{ getSubcategoryTitle(subcategory) }}
         </h3>
@@ -16,7 +16,7 @@
           <div
             v-for="command in subcategoryCommands"
             :key="command.id"
-            class="shortcut-item flex justify-between items-center py-2 rounded hover:bg-surface-100 dark-theme:hover:bg-surface-700 transition-colors duration-200"
+            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200 hover:bg-surface-100 dark-theme:hover:bg-surface-700"
           >
             <div class="shortcut-info grow pr-4">
               <div class="shortcut-name text-sm font-medium">
@@ -32,7 +32,7 @@
                 <span
                   v-for="key in command.keybinding!.combo.getKeySequences()"
                   :key="key"
-                  class="key-badge px-2 py-1 text-xs font-mono bg-surface-200 dark-theme:bg-surface-600 rounded border min-w-6 text-center"
+                  class="key-badge min-w-6 rounded border bg-surface-200 px-2 py-1 text-center font-mono text-xs dark-theme:bg-surface-600"
                 >
                   {{ formatKey(key) }}
                 </span>
diff --git a/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue b/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
index 4852e9d0ac..42ca7461e7 100644
--- a/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full flex flex-col p-4">
-    <div class="flex-1 min-h-0 overflow-auto">
+  <div class="flex h-full flex-col p-4">
+    <div class="min-h-0 flex-1 overflow-auto">
       <ShortcutsList
         :commands="viewControlsCommands"
         :subcategories="viewControlsSubcategories"
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index ca0dcf34ec..e632d0d473 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
+    class="relative h-full w-full overflow-hidden bg-neutral-900"
   >
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
+    <div class="p-terminal h-full w-full rounded-none p-2">
+      <div ref="terminalEl" class="terminal-host h-full" />
     </div>
     <Button
       v-tooltip.left="{
diff --git a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
index 19b2fd6ccb..20a518a6de 100644
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="bg-black h-full w-full">
+  <div class="h-full w-full bg-black">
     <p v-if="errorMessage" class="p-4 text-center">
       {{ errorMessage }}
     </p>
     <ProgressSpinner
       v-else-if="loading"
-      class="relative inset-0 flex justify-center items-center h-full z-10"
+      class="relative inset-0 z-10 flex h-full items-center justify-center"
     />
     <BaseTerminal v-show="!loading" @created="terminalCreated" />
   </div>
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index a8162b21b6..c48afc6767 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -6,7 +6,7 @@
       showDelay: 512
     }"
     href="#"
-    class="cursor-pointer p-breadcrumb-item-link"
+    class="p-breadcrumb-item-link cursor-pointer"
     :class="{
       'flex items-center gap-1': isActive,
       'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
@@ -37,7 +37,7 @@
     v-if="isEditing"
     ref="itemInputRef"
     v-model="itemLabel"
-    class="fixed z-10000 text-[.8rem] px-2 py-2"
+    class="fixed z-10000 px-2 py-2 text-[.8rem]"
     @blur="inputBlur(true)"
     @click.stop
     @keydown.enter="inputBlur(true)"
diff --git a/src/components/button/MoreButton.vue b/src/components/button/MoreButton.vue
index 876af7e215..71693ea3a3 100644
--- a/src/components/button/MoreButton.vue
+++ b/src/components/button/MoreButton.vue
@@ -14,7 +14,7 @@
       unstyled
       :pt="pt"
     >
-      <div class="flex flex-col gap-2 p-2 min-w-40">
+      <div class="flex min-w-40 flex-col gap-2 p-2">
         <slot :close="hide" />
       </div>
     </Popover>
diff --git a/src/components/card/CardDescription.vue b/src/components/card/CardDescription.vue
index 6085fcf8e3..0b5e2de5c2 100644
--- a/src/components/card/CardDescription.vue
+++ b/src/components/card/CardDescription.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-zinc-500 dark-theme:text-zinc-400 text-xs line-clamp-2 h-7">
+  <div class="line-clamp-2 h-7 text-xs text-zinc-500 dark-theme:text-zinc-400">
     <slot></slot>
   </div>
 </template>
diff --git a/src/components/card/CardTop.vue b/src/components/card/CardTop.vue
index cdfe0d449e..d7df341986 100644
--- a/src/components/card/CardTop.vue
+++ b/src/components/card/CardTop.vue
@@ -1,31 +1,31 @@
 <template>
   <div :class="topStyle">
-    <slot class="absolute top-0 left-0 w-full h-full"></slot>
+    <slot class="absolute top-0 left-0 h-full w-full"></slot>
 
     <div
       v-if="slots['top-left']"
-      class="absolute top-2 left-2 flex gap-2 flex-wrap justify-start"
+      class="absolute top-2 left-2 flex flex-wrap justify-start gap-2"
     >
       <slot name="top-left"></slot>
     </div>
 
     <div
       v-if="slots['top-right']"
-      class="absolute top-2 right-2 flex gap-2 flex-wrap justify-end"
+      class="absolute top-2 right-2 flex flex-wrap justify-end gap-2"
     >
       <slot name="top-right"></slot>
     </div>
 
     <div
       v-if="slots['bottom-left']"
-      class="absolute bottom-2 left-2 flex gap-2 flex-wrap justify-start"
+      class="absolute bottom-2 left-2 flex flex-wrap justify-start gap-2"
     >
       <slot name="bottom-left"></slot>
     </div>
 
     <div
       v-if="slots['bottom-right']"
-      class="absolute bottom-2 right-2 flex gap-2 flex-wrap justify-end"
+      class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-2"
     >
       <slot name="bottom-right"></slot>
     </div>
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
index c886b089b2..d4d16f6bcd 100644
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex justify-center items-center gap-1 shrink-0 py-1 px-2 text-xs bg-[#D9D9D966]/40 rounded font-bold text-white/90"
+    class="inline-flex shrink-0 items-center justify-center gap-1 rounded bg-[#D9D9D966]/40 px-2 py-1 text-xs font-bold text-white/90"
   >
     <slot name="icon" class="text-xs text-white/90"></slot>
     <span>{{ label }}</span>
diff --git a/src/components/common/FileDownload.vue b/src/components/common/FileDownload.vue
index f54c2dc8ee..ecb43fa0bc 100644
--- a/src/components/common/FileDownload.vue
+++ b/src/components/common/FileDownload.vue
@@ -11,7 +11,7 @@
         icon="pi pi-exclamation-triangle"
         size="small"
         variant="outlined"
-        class="h-min my-2 px-1 max-w-xs"
+        class="my-2 h-min max-w-xs px-1"
         :title="props.error"
         :pt="{
           text: { class: 'overflow-hidden text-ellipsis' }
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
index efb09c9008..0e7703f13a 100644
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="image-upload-wrapper">
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <div
-        class="preview-box border rounded p-2 w-16 h-16 flex items-center justify-center"
+        class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
         :class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
       >
         <img
           v-if="modelValue"
           :src="modelValue"
-          class="max-w-full max-h-full object-contain"
+          class="max-h-full max-w-full object-contain"
         />
-        <i v-else class="pi pi-image text-gray-400 text-xl" />
+        <i v-else class="pi pi-image text-xl text-gray-400" />
       </div>
 
       <div class="flex flex-col gap-2">
diff --git a/src/components/common/LazyImage.vue b/src/components/common/LazyImage.vue
index 371968fba6..dd41247d78 100644
--- a/src/components/common/LazyImage.vue
+++ b/src/components/common/LazyImage.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="containerRef"
-    class="relative overflow-hidden w-full h-full flex items-center justify-center"
+    class="relative flex h-full w-full items-center justify-center overflow-hidden"
   >
     <Skeleton
       v-if="!isImageLoaded"
@@ -22,7 +22,7 @@
     />
     <div
       v-if="hasError"
-      class="absolute inset-0 flex items-center justify-center bg-surface-50 dark-theme:bg-surface-800 text-muted"
+      class="absolute inset-0 flex items-center justify-center bg-surface-50 text-muted dark-theme:bg-surface-800"
     >
       <img
         src="/assets/images/default-template.png"
diff --git a/src/components/common/NoResultsPlaceholder.vue b/src/components/common/NoResultsPlaceholder.vue
index fbf8ca83d6..79d0da4c79 100644
--- a/src/components/common/NoResultsPlaceholder.vue
+++ b/src/components/common/NoResultsPlaceholder.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="no-results-placeholder p-8 h-full" :class="props.class">
+  <div class="no-results-placeholder h-full p-8" :class="props.class">
     <Card>
       <template #content>
         <div class="flex flex-col items-center">
           <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem" />
           <h3>{{ title }}</h3>
-          <p :class="textClass" class="whitespace-pre-line text-center">
+          <p :class="textClass" class="text-center whitespace-pre-line">
             {{ message }}
           </p>
           <Button
diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 192e8b9dab..8fbf3a34a0 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -28,7 +28,7 @@
     </IconField>
     <div
       v-if="filters?.length"
-      class="search-filters pt-2 flex flex-wrap gap-2"
+      class="search-filters flex flex-wrap gap-2 pt-2"
     >
       <SearchFilterChip
         v-for="filter in filters"
diff --git a/src/components/common/SystemStatsPanel.vue b/src/components/common/SystemStatsPanel.vue
index 546d2b887b..1d3612aa24 100644
--- a/src/components/common/SystemStatsPanel.vue
+++ b/src/components/common/SystemStatsPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <h2 class="text-2xl font-semibold mb-4">
+      <h2 class="mb-4 text-2xl font-semibold">
         {{ $t('g.systemInfo') }}
       </h2>
       <div class="grid grid-cols-2 gap-2">
@@ -17,7 +17,7 @@
     <Divider />
 
     <div>
-      <h2 class="text-2xl font-semibold mb-4">
+      <h2 class="mb-4 text-2xl font-semibold">
         {{ $t('g.devices') }}
       </h2>
       <TabView v-if="props.stats.devices.length > 1">
diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 17d8d90091..c6a3dbe60e 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -2,7 +2,7 @@
   <Tree
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
-    class="tree-explorer py-0 px-2 2xl:px-4"
+    class="tree-explorer px-2 py-0 2xl:px-4"
     :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"
diff --git a/src/components/common/UrlInput.vue b/src/components/common/UrlInput.vue
index 9e400ae93a..df40ba0c40 100644
--- a/src/components/common/UrlInput.vue
+++ b/src/components/common/UrlInput.vue
@@ -12,9 +12,9 @@
       :class="{
         'pi pi-spin pi-spinner text-neutral-400':
           validationState === ValidationState.LOADING,
-        'pi pi-check text-green-500 cursor-pointer':
+        'pi pi-check cursor-pointer text-green-500':
           validationState === ValidationState.VALID,
-        'pi pi-times text-red-500 cursor-pointer':
+        'pi pi-times cursor-pointer text-red-500':
           validationState === ValidationState.INVALID
       }"
       @click="validateUrl(props.modelValue)"
diff --git a/src/components/common/UserCredit.vue b/src/components/common/UserCredit.vue
index e1abb7598b..aac405b90c 100644
--- a/src/components/common/UserCredit.vue
+++ b/src/components/common/UserCredit.vue
@@ -11,7 +11,7 @@
       severity="secondary"
       icon="pi pi-dollar"
       rounded
-      class="text-amber-400 p-1"
+      class="p-1 text-amber-400"
     />
     <div :class="textClass">{{ formattedBalance }}</div>
   </div>
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index 908366cb21..12e9490ed2 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -36,7 +36,7 @@
     </template>
 
     <template #contentFilter>
-      <div class="relative px-6 pt-2 pb-4 flex gap-2 flex-wrap">
+      <div class="relative flex flex-wrap gap-2 px-6 pt-2 pb-4">
         <!-- Model Filter -->
         <MultiSelect
           v-model="selectedModelObjects"
@@ -97,7 +97,7 @@
       </div>
       <div
         v-if="!isLoading"
-        class="px-6 pt-4 pb-2 text-2xl font-semibold text-neutral"
+        class="text-neutral px-6 pt-4 pb-2 text-2xl font-semibold"
       >
         <span>
           {{ pageTitle }}
@@ -109,10 +109,10 @@
       <!-- No Results State (only show when loaded and no results) -->
       <div
         v-if="!isLoading && filteredTemplates.length === 0"
-        class="flex flex-col items-center justify-center h-64 text-neutral-500"
+        class="flex h-64 flex-col items-center justify-center text-neutral-500"
       >
-        <i class="icon-[lucide--search] w-12 h-12 mb-4 opacity-50" />
-        <p class="text-lg mb-2">
+        <i class="mb-4 icon-[lucide--search] h-12 w-12 opacity-50" />
+        <p class="mb-2 text-lg">
           {{ $t('templateWorkflows.noResults', 'No templates found') }}
         </p>
         <p class="text-sm">
@@ -128,7 +128,7 @@
         <!-- Title -->
         <span
           v-if="isLoading"
-          class="inline-block h-8 w-48 bg-dialog-surface rounded animate-pulse"
+          class="inline-block h-8 w-48 animate-pulse rounded bg-dialog-surface"
         ></span>
 
         <!-- Template Cards Grid -->
@@ -148,7 +148,7 @@
               <CardTop ratio="landscape">
                 <template #default>
                   <div
-                    class="w-full h-full bg-dialog-surface animate-pulse"
+                    class="h-full w-full animate-pulse bg-dialog-surface"
                   ></div>
                 </template>
               </CardTop>
@@ -157,10 +157,10 @@
               <CardBottom>
                 <div class="px-4 py-3">
                   <div
-                    class="h-6 bg-dialog-surface rounded animate-pulse mb-2"
+                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
                   ></div>
                   <div
-                    class="h-4 bg-dialog-surface rounded animate-pulse"
+                    class="h-4 animate-pulse rounded bg-dialog-surface"
                   ></div>
                 </div>
               </CardBottom>
@@ -184,7 +184,7 @@
                 <template #default>
                   <!-- Template Thumbnail -->
                   <div
-                    class="w-full h-full relative rounded-lg overflow-hidden"
+                    class="relative h-full w-full overflow-hidden rounded-lg"
                   >
                     <template v-if="template.mediaType === 'audio'">
                       <AudioThumbnail :src="getBaseThumbnailSrc(template)" />
@@ -248,7 +248,7 @@
                     </template>
                     <ProgressSpinner
                       v-if="loadingTemplate === template.name"
-                      class="absolute inset-0 z-10 w-12 h-12 m-auto"
+                      class="absolute inset-0 z-10 m-auto h-12 w-12"
                     />
                   </div>
                 </template>
@@ -267,7 +267,7 @@
               <CardBottom>
                 <div class="flex flex-col gap-2 pt-3">
                   <h3
-                    class="line-clamp-1 text-sm m-0"
+                    class="m-0 line-clamp-1 text-sm"
                     :title="
                       getTemplateTitle(
                         template,
@@ -285,7 +285,7 @@
                   <div class="flex justify-between gap-2">
                     <div class="flex-1">
                       <p
-                        class="line-clamp-2 text-sm text-muted m-0"
+                        class="m-0 line-clamp-2 text-sm text-muted"
                         :title="getTemplateDescription(template)"
                       >
                         {{ getTemplateDescription(template) }}
@@ -323,7 +323,7 @@
               <CardTop ratio="square">
                 <template #default>
                   <div
-                    class="w-full h-full bg-dialog-surface animate-pulse"
+                    class="h-full w-full animate-pulse bg-dialog-surface"
                   ></div>
                 </template>
               </CardTop>
@@ -332,10 +332,10 @@
               <CardBottom>
                 <div class="px-4 py-3">
                   <div
-                    class="h-6 bg-dialog-surface rounded animate-pulse mb-2"
+                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
                   ></div>
                   <div
-                    class="h-4 bg-dialog-surface rounded animate-pulse"
+                    class="h-4 animate-pulse rounded bg-dialog-surface"
                   ></div>
                 </div>
               </CardBottom>
@@ -348,7 +348,7 @@
       <div
         v-if="!isLoading && hasMoreTemplates"
         ref="loadTrigger"
-        class="w-full h-4 flex justify-center items-center mt-4"
+        class="mt-4 flex h-4 w-full items-center justify-center"
       >
         <div v-if="isLoadingMore" class="text-sm text-muted">
           {{ $t('templateWorkflows.loadingMore', 'Loading more...') }}
diff --git a/src/components/dialog/content/ApiNodesSignInContent.vue b/src/components/dialog/content/ApiNodesSignInContent.vue
index af6f4fff64..0e12f8a619 100644
--- a/src/components/dialog/content/ApiNodesSignInContent.vue
+++ b/src/components/dialog/content/ApiNodesSignInContent.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
-    <div class="text-2xl font-medium mb-2">
+  <div class="flex h-110 max-w-96 flex-col gap-4 p-2">
+    <div class="mb-2 text-2xl font-medium">
       {{ t('apiNodesSignInDialog.title') }}
     </div>
 
-    <div class="text-base mb-4">
+    <div class="mb-4 text-base">
       {{ t('apiNodesSignInDialog.message') }}
     </div>
 
     <ApiNodesList :node-names="apiNodeNames" />
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <Button :label="t('g.learnMore')" link @click="handleLearnMoreClick" />
       <div class="flex gap-2">
         <Button
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index 662d3af8d1..ee21d76ce2 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,7 +1,7 @@
 <template>
-  <section class="prompt-dialog-content flex flex-col gap-6 m-2 mt-4">
+  <section class="prompt-dialog-content m-2 mt-4 flex flex-col gap-6">
     <span>{{ message }}</span>
-    <ul v-if="itemList?.length" class="pl-4 m-0 flex flex-col gap-2">
+    <ul v-if="itemList?.length" class="m-0 flex flex-col gap-2 pl-4">
       <li v-for="item of itemList" :key="item">
         {{ item }}
       </li>
@@ -15,14 +15,14 @@
     >
       {{ hint }}
     </Message>
-    <div class="flex gap-4 justify-end">
+    <div class="flex justify-end gap-4">
       <div
         v-if="type === 'overwriteBlueprint'"
-        class="flex gap-4 justify-start"
+        class="flex justify-start gap-4"
       >
         <Checkbox
           v-model="doNotAskAgain"
-          class="flex gap-4 justify-start"
+          class="flex justify-start gap-4"
           input-id="doNotAskAgain"
           binary
         />
diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index a4ebadf929..97b0a18d3a 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -13,7 +13,7 @@
       <span class="font-bold">{{ error.extensionFile }}</span>
     </template>
 
-    <div class="flex gap-2 justify-center">
+    <div class="flex justify-center gap-2">
       <Button
         v-show="!reportOpen"
         text
@@ -29,12 +29,12 @@
     </div>
     <template v-if="reportOpen">
       <Divider />
-      <ScrollPanel class="w-full h-[400px] max-w-[80vw]">
-        <pre class="whitespace-pre-wrap break-words">{{ reportContent }}</pre>
+      <ScrollPanel class="h-[400px] w-full max-w-[80vw]">
+        <pre class="break-words whitespace-pre-wrap">{{ reportContent }}</pre>
       </ScrollPanel>
       <Divider />
     </template>
-    <div class="flex gap-4 justify-end">
+    <div class="flex justify-end gap-4">
       <FindIssueButton
         :error-message="error.exceptionMessage"
         :repo-owner="repoOwner"
diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index 17c38c29b6..c97104bdd0 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -16,7 +16,7 @@
     }"
   >
     <template #option="slotProps">
-      <div class="flex align-items-center">
+      <div class="align-items-center flex">
         <span class="node-type">{{ slotProps.option.label }}</span>
         <span v-if="slotProps.option.hint" class="node-hint">{{
           slotProps.option.hint
diff --git a/src/components/dialog/content/MissingCoreNodesMessage.vue b/src/components/dialog/content/MissingCoreNodesMessage.vue
index 10030a9e93..0489ac20b5 100644
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -3,7 +3,7 @@
     v-if="hasMissingCoreNodes"
     severity="info"
     icon="pi pi-info-circle"
-    class="my-2 mx-2"
+    class="mx-2 my-2"
     :pt="{
       root: { class: 'flex-col' },
       text: { class: 'flex-1' }
diff --git a/src/components/dialog/content/MissingModelsWarning.vue b/src/components/dialog/content/MissingModelsWarning.vue
index dc67724d50..1b044e4d33 100644
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -5,7 +5,7 @@
     :title="t('missingModelsDialog.missingModels')"
     :message="t('missingModelsDialog.missingModelsMessage')"
   />
-  <div class="flex gap-1 mb-4">
+  <div class="mb-4 flex gap-1">
     <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
     <label for="doNotAskAgain">{{
       t('missingModelsDialog.doNotAskAgain')
diff --git a/src/components/dialog/content/SignInContent.vue b/src/components/dialog/content/SignInContent.vue
index 29f441a285..a6bb0e890b 100644
--- a/src/components/dialog/content/SignInContent.vue
+++ b/src/components/dialog/content/SignInContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-96 p-2 overflow-x-hidden">
+  <div class="w-96 overflow-x-hidden p-2">
     <ApiKeyForm
       v-if="showApiKeyForm"
       @back="showApiKeyForm = false"
@@ -7,11 +7,11 @@
     />
     <template v-else>
       <!-- Header -->
-      <div class="flex flex-col gap-4 mb-8">
-        <h1 class="text-2xl font-medium leading-normal my-0">
+      <div class="mb-8 flex flex-col gap-4">
+        <h1 class="my-0 text-2xl leading-normal font-medium">
           {{ isSignIn ? t('auth.login.title') : t('auth.signup.title') }}
         </h1>
-        <p class="text-base my-0">
+        <p class="my-0 text-base">
           <span class="text-muted">{{
             isSignIn
               ? t('auth.login.newUser')
@@ -88,17 +88,17 @@
         >
           <img
             src="/assets/images/comfy-logo-mono.svg"
-            class="w-5 h-5 mr-2"
+            class="mr-2 h-5 w-5"
             alt="Comfy"
           />
           {{ t('auth.login.useApiKey') }}
         </Button>
-        <small class="text-muted text-center">
+        <small class="text-center text-muted">
           {{ t('auth.apiKey.helpText') }}
           <a
             :href="`${COMFY_PLATFORM_BASE_URL}/login`"
             target="_blank"
-            class="text-blue-500 cursor-pointer"
+            class="cursor-pointer text-blue-500"
           >
             {{ t('auth.apiKey.generateKey') }}
           </a>
@@ -115,12 +115,12 @@
       </div>
 
       <!-- Terms & Contact -->
-      <p class="text-xs text-muted mt-8">
+      <p class="mt-8 text-xs text-muted">
         {{ t('auth.login.termsText') }}
         <a
           href="https://www.comfy.org/terms-of-service"
           target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
         >
           {{ t('auth.login.termsLink') }}
         </a>
@@ -128,12 +128,12 @@
         <a
           href="https://www.comfy.org/privacy"
           target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
         >
           {{ t('auth.login.privacyLink') }} </a
         >.
         {{ t('auth.login.questionsContactPrefix') }}
-        <a href="mailto:hello@comfy.org" class="text-blue-500 cursor-pointer">
+        <a href="mailto:hello@comfy.org" class="cursor-pointer text-blue-500">
           hello@comfy.org</a
         >.
       </p>
diff --git a/src/components/dialog/content/TopUpCreditsDialogContent.vue b/src/components/dialog/content/TopUpCreditsDialogContent.vue
index d15b752899..8f1cdd797c 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col w-96 p-2 gap-10">
+  <div class="flex w-96 flex-col gap-10 p-2">
     <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
-      <h1 class="text-2xl font-medium leading-normal my-0">
+      <h1 class="my-0 text-2xl leading-normal font-medium">
         {{ $t('credits.topUp.insufficientTitle') }}
       </h1>
-      <p class="text-base my-0">
+      <p class="my-0 text-base">
         {{ $t('credits.topUp.insufficientMessage') }}
       </p>
     </div>
 
     <!-- Balance Section -->
-    <div class="flex justify-between items-center">
-      <div class="flex flex-col gap-2 w-full">
-        <div class="text-muted text-base">
+    <div class="flex items-center justify-between">
+      <div class="flex w-full flex-col gap-2">
+        <div class="text-base text-muted">
           {{ $t('credits.yourCreditBalance') }}
         </div>
-        <div class="flex items-center justify-between w-full">
+        <div class="flex w-full items-center justify-between">
           <UserCredit text-class="text-2xl" />
           <Button
             outlined
@@ -30,7 +30,7 @@
 
     <!-- Amount Input Section -->
     <div class="flex flex-col gap-2">
-      <span class="text-muted text-sm"
+      <span class="text-sm text-muted"
         >{{ $t('credits.topUp.quickPurchase') }}:</span
       >
       <div class="grid grid-cols-[2fr_1fr] gap-2">
diff --git a/src/components/dialog/content/UpdatePasswordContent.vue b/src/components/dialog/content/UpdatePasswordContent.vue
index 6ab4b74df7..dc116e9c21 100644
--- a/src/components/dialog/content/UpdatePasswordContent.vue
+++ b/src/components/dialog/content/UpdatePasswordContent.vue
@@ -1,6 +1,6 @@
 <template>
   <Form
-    class="flex flex-col gap-6 w-96"
+    class="flex w-96 flex-col gap-6"
     :resolver="zodResolver(updatePasswordSchema)"
     @submit="onSubmit"
   >
@@ -10,7 +10,7 @@
     <Button
       type="submit"
       :label="$t('userSettings.updatePassword')"
-      class="h-10 font-medium mt-4"
+      class="mt-4 h-10 font-medium"
       :loading="loading"
     />
   </Form>
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.vue b/src/components/dialog/content/credit/CreditTopUpOption.vue
index 95331dce3d..402df3ac04 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -4,7 +4,7 @@
       severity="secondary"
       icon="pi pi-dollar"
       rounded
-      class="text-amber-400 p-1"
+      class="p-1 text-amber-400"
     />
     <InputNumber
       v-if="editable"
@@ -21,7 +21,7 @@
     />
     <span v-else class="text-xl">{{ amount }}</span>
   </div>
-  <ProgressSpinner v-if="loading" class="w-8 h-8" />
+  <ProgressSpinner v-if="loading" class="h-8 w-8" />
   <Button
     v-else
     :severity="preselected ? 'primary' : 'secondary'"
diff --git a/src/components/dialog/content/setting/AboutPanel.vue b/src/components/dialog/content/setting/AboutPanel.vue
index 9c74f2cd75..33ada1ce30 100644
--- a/src/components/dialog/content/setting/AboutPanel.vue
+++ b/src/components/dialog/content/setting/AboutPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <PanelTemplate value="About" class="about-container">
-    <h2 class="text-2xl font-bold mb-2">
+    <h2 class="mb-2 text-2xl font-bold">
       {{ $t('g.about') }}
     </h2>
     <div class="space-y-2">
diff --git a/src/components/dialog/content/setting/CreditsPanel.vue b/src/components/dialog/content/setting/CreditsPanel.vue
index 374dfbe148..fd1c537d7f 100644
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/src/components/dialog/content/setting/CreditsPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <TabPanel value="Credits" class="credits-container h-full">
-    <div class="flex flex-col h-full">
-      <h2 class="text-2xl font-bold mb-2">
+    <div class="flex h-full flex-col">
+      <h2 class="mb-2 text-2xl font-bold">
         {{ $t('credits.credits') }}
       </h2>
 
@@ -11,7 +11,7 @@
         <h3 class="text-sm font-medium text-muted">
           {{ $t('credits.yourCreditBalance') }}
         </h3>
-        <div class="flex justify-between items-center">
+        <div class="flex items-center justify-between">
           <UserCredit text-class="text-3xl font-bold" />
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
@@ -41,7 +41,7 @@
         </div>
       </div>
 
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
         <h3>{{ $t('credits.activity') }}</h3>
         <Button
           :label="$t('credits.invoiceHistory')"
@@ -66,7 +66,7 @@
               <template #body="{ data }">
                 <div
                   :class="[
-                    'text-base font-medium text-center',
+                    'text-center text-base font-medium',
                     data.isPositive ? 'text-sky-500' : 'text-red-400'
                   ]"
                 >
diff --git a/src/components/dialog/content/setting/KeybindingPanel.vue b/src/components/dialog/content/setting/KeybindingPanel.vue
index dbe61f089a..6117d5ea8f 100644
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/src/components/dialog/content/setting/KeybindingPanel.vue
@@ -51,10 +51,7 @@
         class="max-w-64 2xl:max-w-full"
       >
         <template #body="slotProps">
-          <div
-            class="overflow-hidden text-ellipsis whitespace-nowrap"
-            :title="slotProps.data.id"
-          >
+          <div class="truncate" :title="slotProps.data.id">
             {{ slotProps.data.label }}
           </div>
         </template>
diff --git a/src/components/dialog/content/setting/PanelTemplate.vue b/src/components/dialog/content/setting/PanelTemplate.vue
index d1ff51e351..3521d3f6d0 100644
--- a/src/components/dialog/content/setting/PanelTemplate.vue
+++ b/src/components/dialog/content/setting/PanelTemplate.vue
@@ -1,8 +1,8 @@
 <template>
   <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
-    <div class="flex flex-col h-full w-full gap-2">
+    <div class="flex h-full w-full flex-col gap-2">
       <slot name="header" />
-      <ScrollPanel class="grow h-0 pr-2">
+      <ScrollPanel class="h-0 grow pr-2">
         <slot />
       </ScrollPanel>
       <slot name="footer" />
diff --git a/src/components/dialog/content/setting/UsageLogsTable.vue b/src/components/dialog/content/setting/UsageLogsTable.vue
index 082fb200c7..ba70658700 100644
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/src/components/dialog/content/setting/UsageLogsTable.vue
@@ -30,7 +30,7 @@
           <div class="event-details">
             <!-- Credits Added -->
             <template v-if="data.event_type === EventType.CREDIT_ADDED">
-              <div class="text-green-500 font-semibold">
+              <div class="font-semibold text-green-500">
                 {{ $t('credits.added') }} ${{
                   customerEventService.formatAmount(data.params?.amount)
                 }}
diff --git a/src/components/dialog/content/setting/UserPanel.vue b/src/components/dialog/content/setting/UserPanel.vue
index 7497e926cc..b18a6b37c3 100644
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <TabPanel value="User" class="user-settings-container h-full">
-    <div class="flex flex-col h-full">
-      <h2 class="text-2xl font-bold mb-2">{{ $t('userSettings.title') }}</h2>
+    <div class="flex h-full flex-col">
+      <h2 class="mb-2 text-2xl font-bold">{{ $t('userSettings.title') }}</h2>
       <Divider class="mb-3" />
 
       <!-- Normal User Panel -->
@@ -35,7 +35,7 @@
           <h3 class="font-medium">
             {{ $t('userSettings.provider') }}
           </h3>
-          <div class="text-muted flex items-center gap-1">
+          <div class="flex items-center gap-1 text-muted">
             <i :class="providerIcon" />
             {{ providerName }}
             <Button
@@ -54,7 +54,7 @@
 
         <ProgressSpinner
           v-if="loading"
-          class="w-8 h-8 mt-4"
+          class="mt-4 h-8 w-8"
           style="--pc-spinner-color: #000"
         />
         <div v-else class="mt-4 flex flex-col gap-2">
diff --git a/src/components/dialog/content/signin/ApiKeyForm.vue b/src/components/dialog/content/signin/ApiKeyForm.vue
index dc0b196a4e..2e70345fce 100644
--- a/src/components/dialog/content/signin/ApiKeyForm.vue
+++ b/src/components/dialog/content/signin/ApiKeyForm.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="flex flex-col gap-6">
-    <div class="flex flex-col gap-4 mb-8">
-      <h1 class="text-2xl font-medium leading-normal my-0">
+    <div class="mb-8 flex flex-col gap-4">
+      <h1 class="my-0 text-2xl leading-normal font-medium">
         {{ t('auth.apiKey.title') }}
       </h1>
       <div class="flex flex-col gap-2">
-        <p class="text-base my-0 text-muted">
+        <p class="my-0 text-base text-muted">
           {{ t('auth.apiKey.description') }}
         </p>
         <a
           href="https://docs.comfy.org/interface/user#logging-in-with-an-api-key"
           target="_blank"
-          class="text-blue-500 cursor-pointer"
+          class="cursor-pointer text-blue-500"
         >
           {{ t('g.learnMore') }}
         </a>
@@ -30,7 +30,7 @@
 
       <div class="flex flex-col gap-2">
         <label
-          class="opacity-80 text-base font-medium mb-2"
+          class="mb-2 text-base font-medium opacity-80"
           for="comfy-org-api-key"
         >
           {{ t('auth.apiKey.label') }}
@@ -50,7 +50,7 @@
             <a
               :href="`${COMFY_PLATFORM_BASE_URL}/login`"
               target="_blank"
-              class="text-blue-500 cursor-pointer"
+              class="cursor-pointer text-blue-500"
             >
               {{ t('auth.apiKey.generateKey') }}
             </a>
@@ -58,7 +58,7 @@
             <a
               href="https://docs.comfy.org/tutorials/api-nodes/overview#log-in-with-api-key-on-non-whitelisted-websites"
               target="_blank"
-              class="text-blue-500 cursor-pointer"
+              class="cursor-pointer text-blue-500"
             >
               {{ t('auth.apiKey.whitelistInfo') }}
             </a>
@@ -66,7 +66,7 @@
         </div>
       </div>
 
-      <div class="flex justify-between items-center mt-4">
+      <div class="mt-4 flex items-center justify-between">
         <Button type="button" link @click="$emit('back')">
           {{ t('g.back') }}
         </Button>
diff --git a/src/components/dialog/content/signin/PasswordFields.vue b/src/components/dialog/content/signin/PasswordFields.vue
index 8429904fd1..e57b6828b5 100644
--- a/src/components/dialog/content/signin/PasswordFields.vue
+++ b/src/components/dialog/content/signin/PasswordFields.vue
@@ -1,9 +1,9 @@
 <template>
   <!-- Password Field -->
   <FormField v-slot="$field" name="password" class="flex flex-col gap-2">
-    <div class="flex justify-between items-center mb-2">
+    <div class="mb-2 flex items-center justify-between">
       <label
-        class="opacity-80 text-base font-medium"
+        class="text-base font-medium opacity-80"
         for="comfy-org-sign-up-password"
       >
         {{ t('auth.signup.passwordLabel') }}
@@ -68,7 +68,7 @@
   <!-- Confirm Password Field -->
   <FormField v-slot="$field" name="confirmPassword" class="flex flex-col gap-2">
     <label
-      class="opacity-80 text-base font-medium mb-2"
+      class="mb-2 text-base font-medium opacity-80"
       for="comfy-org-sign-up-confirm-password"
     >
       {{ t('auth.login.confirmPasswordLabel') }}
diff --git a/src/components/dialog/content/signin/SignInForm.vue b/src/components/dialog/content/signin/SignInForm.vue
index 3cbc30bc9c..1560911e09 100644
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -7,7 +7,7 @@
   >
     <!-- Email Field -->
     <div class="flex flex-col gap-2">
-      <label class="opacity-80 text-base font-medium mb-2" :for="emailInputId">
+      <label class="mb-2 text-base font-medium opacity-80" :for="emailInputId">
         {{ t('auth.login.emailLabel') }}
       </label>
       <InputText
@@ -26,15 +26,15 @@
 
     <!-- Password Field -->
     <div class="flex flex-col gap-2">
-      <div class="flex justify-between items-center mb-2">
+      <div class="mb-2 flex items-center justify-between">
         <label
-          class="opacity-80 text-base font-medium"
+          class="text-base font-medium opacity-80"
           for="comfy-org-sign-in-password"
         >
           {{ t('auth.login.passwordLabel') }}
         </label>
         <span
-          class="text-muted text-base font-medium cursor-pointer select-none"
+          class="cursor-pointer text-base font-medium text-muted select-none"
           :class="{
             'text-link-disabled': !$form.email?.value || $form.email?.invalid
           }"
@@ -60,12 +60,12 @@
     </div>
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="w-8 h-8" />
+    <ProgressSpinner v-if="loading" class="h-8 w-8" />
     <Button
       v-else
       type="submit"
       :label="t('auth.login.loginButton')"
-      class="h-10 font-medium mt-4"
+      class="mt-4 h-10 font-medium"
     />
   </Form>
 </template>
diff --git a/src/components/dialog/content/signin/SignUpForm.vue b/src/components/dialog/content/signin/SignUpForm.vue
index 0cdc2fbe55..e59b2e4612 100644
--- a/src/components/dialog/content/signin/SignUpForm.vue
+++ b/src/components/dialog/content/signin/SignUpForm.vue
@@ -7,7 +7,7 @@
     <!-- Email Field -->
     <FormField v-slot="$field" name="email" class="flex flex-col gap-2">
       <label
-        class="opacity-80 text-base font-medium mb-2"
+        class="mb-2 text-base font-medium opacity-80"
         for="comfy-org-sign-up-email"
       >
         {{ t('auth.signup.emailLabel') }}
@@ -40,11 +40,11 @@
       />
       <label
         for="comfy-org-sign-up-personal-data-consent"
-        class="opacity-80 text-base font-medium"
+        class="text-base font-medium opacity-80"
       >
         {{ t('auth.signup.personalDataConsentLabel') }}
       </label>
-      <small v-if="$field.error" class="text-red-500 -mt-4">{{
+      <small v-if="$field.error" class="-mt-4 text-red-500">{{
         $field.error.message
       }}</small>
     </FormField>
@@ -53,7 +53,7 @@
     <Button
       type="submit"
       :label="t('auth.signup.signUpButton')"
-      class="h-10 font-medium mt-4"
+      class="mt-4 h-10 font-medium"
     />
   </Form>
 </template>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 2d3b60ed35..c0c1472c36 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -10,7 +10,7 @@
       <BottomPanel />
     </template>
     <template #graph-canvas-panel>
-      <div class="absolute top-0 left-0 w-auto max-w-full pointer-events-auto">
+      <div class="pointer-events-auto absolute top-0 left-0 w-auto max-w-full">
         <SecondRowWorkflowTabs
           v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
         />
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index a9c9393ea7..f93d733a3a 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -10,7 +10,7 @@
     ></div>
 
     <ButtonGroup
-      class="p-buttongroup-vertical p-1 absolute bottom-4 right-2 md:right-4"
+      class="p-buttongroup-vertical absolute right-2 bottom-4 p-1 md:right-4"
       :style="stringifiedMinimapStyles.buttonGroupStyles"
       @wheel="canvasInteractions.handleWheel"
     >
@@ -44,7 +44,7 @@
       </Button>
 
       <!-- vertical line with bg E1DED5 -->
-      <div class="w-px my-1 bg-[#E1DED5] dark-theme:bg-[#2E3037] mx-2" />
+      <div class="mx-2 my-1 w-px bg-[#E1DED5] dark-theme:bg-[#2E3037]" />
 
       <Button
         v-tooltip.top="fitViewTooltip"
@@ -52,7 +52,7 @@
         icon="pi pi-expand"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
-        class="dark-theme:hover:bg-[#444444]! hover:bg-[#E7E6E6]!"
+        class="hover:bg-[#E7E6E6]! dark-theme:hover:bg-[#444444]!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
         <template #icon>
@@ -77,7 +77,7 @@
         </span>
       </Button>
 
-      <div class="w-px my-1 bg-[#E1DED5] dark-theme:bg-[#2E3037] mx-2" />
+      <div class="mx-2 my-1 w-px bg-[#E1DED5] dark-theme:bg-[#2E3037]" />
 
       <Button
         ref="focusButton"
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index de592c5fb5..3fc0a661a7 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -2,12 +2,12 @@
   <div
     ref="toolboxRef"
     style="transform: translate(var(--tb-x), var(--tb-y))"
-    class="fixed left-0 top-0 z-40 pointer-events-none"
+    class="pointer-events-none fixed top-0 left-0 z-40"
   >
     <Transition name="slide-up">
       <Panel
         v-if="visible"
-        class="rounded-lg selection-toolbox pointer-events-auto"
+        class="selection-toolbox pointer-events-auto rounded-lg"
         :style="`backgroundColor: ${containerStyles.backgroundColor};`"
         :pt="{
           header: 'hidden',
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index 323746aba7..3c4c3f6e78 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="visible"
-    class="w-[250px] absolute flex justify-center right-2 md:right-11 z-1300 bottom-[66px] bg-inherit! border-0!"
+    class="absolute right-2 bottom-[66px] z-1300 flex w-[250px] justify-center border-0! bg-inherit! md:right-11"
   >
     <div
-      class="bg-white dark-theme:bg-[#2b2b2b] border border-gray-200 dark-theme:border-gray-700 rounded-lg shadow-lg p-4 w-4/5"
+      class="w-4/5 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark-theme:border-gray-700 dark-theme:bg-[#2b2b2b]"
       :style="filteredMinimapStyles"
       @click.stop
     >
@@ -26,10 +26,10 @@
           @mouseleave="stopRepeat"
         >
           <template #default>
-            <span class="text-sm font-medium block">{{
+            <span class="block text-sm font-medium">{{
               $t('graphCanvasMenu.zoomIn')
             }}</span>
-            <span class="text-sm text-gray-500 block">{{
+            <span class="block text-sm text-gray-500">{{
               zoomInCommandText
             }}</span>
           </template>
@@ -52,10 +52,10 @@
           @mouseleave="stopRepeat"
         >
           <template #default>
-            <span class="text-sm font-medium block">{{
+            <span class="block text-sm font-medium">{{
               $t('graphCanvasMenu.zoomOut')
             }}</span>
-            <span class="text-sm text-gray-500 block">{{
+            <span class="block text-sm text-gray-500">{{
               zoomOutCommandText
             }}</span>
           </template>
@@ -76,15 +76,15 @@
           @click="executeCommand('Comfy.Canvas.FitView')"
         >
           <template #default>
-            <span class="text-sm font-medium block">{{
+            <span class="block text-sm font-medium">{{
               $t('zoomControls.zoomToFit')
             }}</span>
-            <span class="text-sm text-gray-500 block">{{
+            <span class="block text-sm text-gray-500">{{
               zoomToFitCommandText
             }}</span>
           </template>
         </Button>
-        <hr class="border-[#E1DED5] mb-1 dark-theme:border-[#2E3037]" />
+        <hr class="mb-1 border-[#E1DED5] dark-theme:border-[#2E3037]" />
         <Button
           severity="secondary"
           text
@@ -101,18 +101,18 @@
           @click="executeCommand('Comfy.Canvas.ToggleMinimap')"
         >
           <template #default>
-            <span class="text-sm font-medium block">{{
+            <span class="block text-sm font-medium">{{
               minimapToggleText
             }}</span>
-            <span class="text-sm text-gray-500 block">{{
+            <span class="block text-sm text-gray-500">{{
               showMinimapCommandText
             }}</span>
           </template>
         </Button>
-        <hr class="border-[#E1DED5] mt-1 dark-theme:border-[#2E3037]" />
+        <hr class="mt-1 border-[#E1DED5] dark-theme:border-[#2E3037]" />
         <div
           ref="zoomInputContainer"
-          class="flex items-center px-2 bg-[#E7E6E6] focus-within:bg-[#F3F3F3] dark-theme:bg-[#8282821A] rounded p-2 zoomInputContainer"
+          class="zoomInputContainer flex items-center rounded bg-[#E7E6E6] p-2 px-2 focus-within:bg-[#F3F3F3] dark-theme:bg-[#8282821A]"
         >
           <InputNumber
             ref="zoomInput"
@@ -127,7 +127,7 @@
             @input="applyZoom"
             @keyup.enter="applyZoom"
           />
-          <span class="text-sm text-gray-500 -ml-4">%</span>
+          <span class="-ml-4 text-sm text-gray-500">%</span>
         </div>
       </div>
     </div>
diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 7572dd1b32..84882a2858 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -7,11 +7,11 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:dark-theme:bg-charcoal-600 hover:bg-[#E7E6E6]"
+    class="hover:bg-[#E7E6E6] hover:dark-theme:bg-charcoal-600"
     @click="toggleBypass"
   >
     <template #icon>
-      <i class="icon-[lucide--ban] w-4 h-4" />
+      <i class="icon-[lucide--ban] h-4 w-4" />
     </template>
   </Button>
 </template>
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index 9e3024740c..8ea7b752ce 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -12,11 +12,11 @@
     >
       <div class="flex items-center gap-1 px-0">
         <i
-          class="w-4 h-4 pi pi-circle-fill"
+          class="pi pi-circle-fill h-4 w-4"
           :style="{ color: currentColor ?? '' }"
         />
         <i
-          class="w-4 h-4 pi pi-chevron-down py-1"
+          class="pi pi-chevron-down h-4 w-4 py-1"
           :style="{ fontSize: '0.5rem' }"
         />
       </div>
diff --git a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
index 654e05be28..21779c35e7 100644
--- a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
+++ b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
@@ -11,7 +11,7 @@
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
     <template #icon>
-      <i class="icon-[lucide--expand] w-4 h-4" />
+      <i class="icon-[lucide--expand] h-4 w-4" />
     </template>
   </Button>
   <Button
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index 90cfbaa160..e37568a4d7 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -4,13 +4,13 @@
       value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="dark-theme:bg-[#0B8CE9] bg-[#31B9F4] size-8 !p-0"
+    class="size-8 bg-[#31B9F4] !p-0 dark-theme:bg-[#0B8CE9]"
     text
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i class="icon-[lucide--play] text-white size-4" />
+    <i class="icon-[lucide--play] size-4 text-white" />
   </Button>
 </template>
 
diff --git a/src/components/graph/selectionToolbox/FrameNodes.vue b/src/components/graph/selectionToolbox/FrameNodes.vue
index 1d9baec775..b6a3695998 100644
--- a/src/components/graph/selectionToolbox/FrameNodes.vue
+++ b/src/components/graph/selectionToolbox/FrameNodes.vue
@@ -9,7 +9,7 @@
     severity="secondary"
     @click="frameNodes"
   >
-    <i class="icon-[lucide--frame] w-4 h-4" />
+    <i class="icon-[lucide--frame] h-4 w-4" />
   </Button>
 </template>
 
diff --git a/src/components/graph/selectionToolbox/InfoButton.vue b/src/components/graph/selectionToolbox/InfoButton.vue
index 3b50c016fd..cb771c1f0c 100644
--- a/src/components/graph/selectionToolbox/InfoButton.vue
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -9,7 +9,7 @@
     severity="secondary"
     @click="toggleHelp"
   >
-    <i class="icon-[lucide--info] w-4 h-4" />
+    <i class="icon-[lucide--info] h-4 w-4" />
   </Button>
 </template>
 
diff --git a/src/components/graph/selectionToolbox/MaskEditorButton.vue b/src/components/graph/selectionToolbox/MaskEditorButton.vue
index 51054bc139..73ec9cc67b 100644
--- a/src/components/graph/selectionToolbox/MaskEditorButton.vue
+++ b/src/components/graph/selectionToolbox/MaskEditorButton.vue
@@ -9,7 +9,7 @@
     text
     @click="openMaskEditor"
   >
-    <i-comfy:mask class="!w-4 !h-4" />
+    <i-comfy:mask class="!h-4 !w-4" />
   </Button>
 </template>
 
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
index 3c059a4d12..52a32a3b6b 100644
--- a/src/components/graph/selectionToolbox/MenuOptionItem.vue
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -1,15 +1,15 @@
 <template>
   <div
     v-if="option.type === 'divider'"
-    class="h-px bg-gray-200 dark-theme:bg-zinc-700 my-1"
+    class="my-1 h-px bg-gray-200 dark-theme:bg-zinc-700"
   />
   <div
     v-else
     role="button"
-    class="flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer"
+    class="flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700"
     @click="handleClick"
   >
-    <i v-if="option.icon" :class="[option.icon, 'w-4 h-4']" />
+    <i v-if="option.icon" :class="[option.icon, 'h-4 w-4']" />
     <span class="flex-1">{{ option.label }}</span>
     <span v-if="option.shortcut" class="text-xs opacity-60">
       {{ option.shortcut }}
@@ -24,11 +24,11 @@
       :severity="option.badge === 'new' ? 'info' : 'secondary'"
       :value="t(option.badge)"
       :class="{
-        'bg-[#31B9F4] dark-theme:bg-[#0B8CE9] rounded-4xl':
+        'rounded-4xl bg-[#31B9F4] dark-theme:bg-[#0B8CE9]':
           option.badge === 'new',
-        'bg-[#9C9EAB] dark-theme:bg-[#000] rounded-4xl':
+        'rounded-4xl bg-[#9C9EAB] dark-theme:bg-[#000]':
           option.badge === 'deprecated',
-        'text-white uppercase text-[9px] h-4 px-1 gap-2.5': true
+        'h-4 gap-2.5 px-1 text-[9px] text-white uppercase': true
       }"
     />
   </div>
diff --git a/src/components/graph/selectionToolbox/NodeOptions.vue b/src/components/graph/selectionToolbox/NodeOptions.vue
index bfcd020234..f7b9e995f5 100644
--- a/src/components/graph/selectionToolbox/NodeOptions.vue
+++ b/src/components/graph/selectionToolbox/NodeOptions.vue
@@ -13,7 +13,7 @@
       @hide="onPopoverHide"
       @wheel="canvasInteractions.forwardEventToCanvas"
     >
-      <div class="flex flex-col p-2 min-w-48">
+      <div class="flex min-w-48 flex-col p-2">
         <MenuOptionItem
           v-for="(option, index) in menuOptions"
           :key="option.label || `divider-${index}`"
diff --git a/src/components/graph/selectionToolbox/NodeOptionsButton.vue b/src/components/graph/selectionToolbox/NodeOptionsButton.vue
index 5455a92217..2b4e613c24 100644
--- a/src/components/graph/selectionToolbox/NodeOptionsButton.vue
+++ b/src/components/graph/selectionToolbox/NodeOptionsButton.vue
@@ -11,7 +11,7 @@
     severity="secondary"
     @click="handleClick"
   >
-    <i class="icon-[lucide--more-vertical] w-4 h-4" />
+    <i class="icon-[lucide--more-vertical] h-4 w-4" />
   </Button>
 </template>
 
diff --git a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
index 57d29d7076..ec0f44b2f8 100644
--- a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
+++ b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
@@ -7,7 +7,7 @@
     data-testid="refresh-button"
     @click="refreshSelected"
   >
-    <i class="icon-[lucide--refresh-cw] w-4 h-4" />
+    <i class="icon-[lucide--refresh-cw] h-4 w-4" />
   </Button>
 </template>
 
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
index 653c950b81..3de200c2ff 100644
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -28,13 +28,13 @@
       >
         <div
           v-if="subOption.color"
-          class="w-5 h-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
+          class="h-5 w-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
           :style="{ backgroundColor: subOption.color }"
         />
         <template v-else-if="!subOption.color">
           <i
             v-if="isShapeSelected(subOption)"
-            class="icon-[lucide--check] w-4 h-4 flex-shrink-0"
+            class="icon-[lucide--check] h-4 w-4 flex-shrink-0"
           />
           <div v-else class="w-4 flex-shrink-0" />
           <span>{{ subOption.label }}</span>
diff --git a/src/components/graph/selectionToolbox/VerticalDivider.vue b/src/components/graph/selectionToolbox/VerticalDivider.vue
index dc6876a3ea..0d5587fb21 100644
--- a/src/components/graph/selectionToolbox/VerticalDivider.vue
+++ b/src/components/graph/selectionToolbox/VerticalDivider.vue
@@ -1,3 +1,3 @@
 <template>
-  <div class="h-6 w-px bg-gray-300/10 dark-theme:bg-gray-600/10 self-center" />
+  <div class="h-6 w-px self-center bg-gray-300/10 dark-theme:bg-gray-600/10" />
 </template>
diff --git a/src/components/graph/widgets/ChatHistoryWidget.vue b/src/components/graph/widgets/ChatHistoryWidget.vue
index 8696614d88..05c251511f 100644
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -1,24 +1,24 @@
 <template>
   <ScrollPanel
     ref="scrollPanelRef"
-    class="w-full min-h-[400px] rounded-lg px-2 py-2 text-xs"
+    class="min-h-[400px] w-full rounded-lg px-2 py-2 text-xs"
     :pt="{ content: { id: 'chat-scroll-content' } }"
   >
     <div v-for="(item, i) in parsedHistory" :key="i" class="mb-4">
       <!-- Prompt (user, right) -->
       <span
         :class="{
-          'opacity-40 pointer-events-none': editIndex !== null && i > editIndex
+          'pointer-events-none opacity-40': editIndex !== null && i > editIndex
         }"
       >
-        <div class="flex justify-end mb-1">
+        <div class="mb-1 flex justify-end">
           <div
-            class="bg-gray-300 dark-theme:bg-gray-800 rounded-xl px-4 py-1 max-w-[80%] text-right"
+            class="max-w-[80%] rounded-xl bg-gray-300 px-4 py-1 text-right dark-theme:bg-gray-800"
           >
-            <div class="break-words text-[12px]">{{ item.prompt }}</div>
+            <div class="text-[12px] break-words">{{ item.prompt }}</div>
           </div>
         </div>
-        <div class="flex justify-end mb-2 mr-1">
+        <div class="mr-1 mb-2 flex justify-end">
           <CopyButton :text="item.prompt" />
           <Button
             v-tooltip="
@@ -26,7 +26,7 @@
             "
             text
             rounded
-            class="p-1! h-4! w-4! text-gray-400 hover:text-gray-600 hover:dark-theme:text-gray-200 transition"
+            class="h-4! w-4! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
             pt:icon:class="text-xs!"
             :icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
             :aria-label="
@@ -40,7 +40,7 @@
       <ResponseBlurb
         :text="item.response"
         :class="{
-          'opacity-25 pointer-events-none': editIndex !== null && i >= editIndex
+          'pointer-events-none opacity-25': editIndex !== null && i >= editIndex
         }"
       >
         <div v-html="nl2br(linkifyHtml(item.response))" />
diff --git a/src/components/graph/widgets/TextPreviewWidget.vue b/src/components/graph/widgets/TextPreviewWidget.vue
index 7da01c7744..33ab748748 100644
--- a/src/components/graph/widgets/TextPreviewWidget.vue
+++ b/src/components/graph/widgets/TextPreviewWidget.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="relative w-full text-xs min-h-[28px] max-h-[200px] rounded-lg px-4 py-2 overflow-y-auto"
+    class="relative max-h-[200px] min-h-[28px] w-full overflow-y-auto rounded-lg px-4 py-2 text-xs"
   >
     <div class="flex items-center gap-2">
-      <div class="flex-1 break-all flex items-center gap-2">
+      <div class="flex flex-1 items-center gap-2 break-all">
         <span v-html="formattedText"></span>
-        <Skeleton v-if="isParentNodeExecuting" class="flex-1! h-4!" />
+        <Skeleton v-if="isParentNodeExecuting" class="h-4! flex-1!" />
       </div>
     </div>
   </div>
diff --git a/src/components/graph/widgets/chatHistory/CopyButton.vue b/src/components/graph/widgets/chatHistory/CopyButton.vue
index e3cc41323b..933a1b921d 100644
--- a/src/components/graph/widgets/chatHistory/CopyButton.vue
+++ b/src/components/graph/widgets/chatHistory/CopyButton.vue
@@ -5,7 +5,7 @@
     "
     text
     rounded
-    class="p-1! h-4! w-6! text-gray-400 hover:text-gray-600 hover:dark-theme:text-gray-200 transition"
+    class="h-4! w-6! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
     pt:icon:class="text-xs!"
     :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
     :aria-label="
diff --git a/src/components/graph/widgets/chatHistory/ResponseBlurb.vue b/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
index 0d0997f317..e2326c4318 100644
--- a/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
+++ b/src/components/graph/widgets/chatHistory/ResponseBlurb.vue
@@ -1,13 +1,13 @@
 <template>
   <span>
-    <div class="flex justify-start mb-1">
-      <div class="rounded-xl px-4 py-1 max-w-[80%]">
-        <div class="break-words text-[12px]">
+    <div class="mb-1 flex justify-start">
+      <div class="max-w-[80%] rounded-xl px-4 py-1">
+        <div class="text-[12px] break-words">
           <slot />
         </div>
       </div>
     </div>
-    <div class="flex justify-start ml-1">
+    <div class="ml-1 flex justify-start">
       <CopyButton :text="text" />
     </div>
   </span>
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 2020dc5538..1469d0f869 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -24,7 +24,7 @@
       v-if="showSearchBox || showSelectedCount || showClearButton"
       #header
     >
-      <div class="pt-2 pb-0 px-2 flex flex-col">
+      <div class="flex flex-col px-2 pt-2 pb-0">
         <SearchBox
           v-if="showSearchBox"
           v-model="searchQuery"
@@ -39,7 +39,7 @@
         >
           <span
             v-if="showSelectedCount"
-            class="text-sm text-neutral-400 dark-theme:text-zinc-500 px-1"
+            class="px-1 text-sm text-neutral-400 dark-theme:text-zinc-500"
           >
             {{
               selectedCount > 0
@@ -67,7 +67,7 @@
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 dark-theme:bg-blue-500 text-xs font-semibold text-white"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-blue-400 text-xs font-semibold text-white dark-theme:bg-blue-500"
       >
         {{ selectedCount }}
       </span>
@@ -82,7 +82,7 @@
     <template #option="slotProps">
       <div class="flex items-center gap-2" :style="popoverStyle">
         <div
-          class="flex h-4 w-4 p-0.5 shrink-0 items-center justify-center rounded transition-all duration-200"
+          class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
           :class="
             slotProps.selected
               ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
@@ -91,11 +91,11 @@
         >
           <i
             v-if="slotProps.selected"
-            class="icon-[lucide--check] text-xs text-bold text-white"
+            class="text-bold icon-[lucide--check] text-xs text-white"
           />
         </div>
         <Button
-          class="border-none outline-none bg-transparent text-left"
+          class="border-none bg-transparent text-left outline-none"
           unstyled
           >{{ slotProps.option.name }}</Button
         >
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 9b8e5d310a..f611d61ff1 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -44,7 +44,7 @@
     <!-- Option row -->
     <template #option="{ option, selected }">
       <div
-        class="flex items-center justify-between gap-3 w-full"
+        class="flex w-full items-center justify-between gap-3"
         :style="optionStyle"
       >
         <span class="truncate">{{ option.name }}</span>
diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue
index 23245edc94..7b6e68a753 100644
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative w-full h-full"
+    class="relative h-full w-full"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
@@ -59,14 +59,14 @@
     />
     <div
       v-if="enable3DViewer"
-      class="absolute top-12 right-2 z-20 pointer-events-auto"
+      class="pointer-events-auto absolute top-12 right-2 z-20"
     >
       <ViewerControls :node="node" />
     </div>
 
     <div
       v-if="showRecordingControls"
-      class="absolute right-2 z-20 pointer-events-auto"
+      class="pointer-events-auto absolute right-2 z-20"
       :class="{
         'top-12': !enable3DViewer,
         'top-24': enable3DViewer
diff --git a/src/components/load3d/Load3DAnimation.vue b/src/components/load3d/Load3DAnimation.vue
index 9d29c1ed14..4c8fc1a397 100644
--- a/src/components/load3d/Load3DAnimation.vue
+++ b/src/components/load3d/Load3DAnimation.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative w-full h-full"
+    class="relative h-full w-full"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
@@ -34,7 +34,7 @@
       @up-direction-change="listenUpDirectionChange"
       @recording-status-change="listenRecordingStatusChange"
     />
-    <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
+    <div class="pointer-events-none absolute top-0 left-0 h-full w-full">
       <Load3DControls
         :input-spec="inputSpec"
         :background-color="backgroundColor"
@@ -69,7 +69,7 @@
     </div>
     <div
       v-if="showRecordingControls"
-      class="absolute top-12 right-2 z-20 pointer-events-auto"
+      class="pointer-events-auto absolute top-12 right-2 z-20"
     >
       <RecordingControls
         :node="node"
diff --git a/src/components/load3d/Load3DAnimationControls.vue b/src/components/load3d/Load3DAnimationControls.vue
index 1d619e34a6..7ac3af4b9a 100644
--- a/src/components/load3d/Load3DAnimationControls.vue
+++ b/src/components/load3d/Load3DAnimationControls.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="animations && animations.length > 0"
-    class="absolute top-0 left-0 w-full flex justify-center pt-2 gap-2 items-center pointer-events-auto z-10"
+    class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center justify-center gap-2 pt-2"
   >
     <Button class="p-button-rounded p-button-text" @click="togglePlay">
       <i
-        :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-white text-lg']"
+        :class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-lg text-white']"
       />
     </Button>
 
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index eea5208b32..21a4dc0b08 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -1,21 +1,21 @@
 <template>
   <div
-    class="absolute top-12 left-2 flex flex-col pointer-events-auto z-20 bg-gray-700/30 rounded-lg"
+    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-gray-700/30"
   >
-    <div class="relative show-menu">
+    <div class="show-menu relative">
       <Button class="p-button-rounded p-button-text" @click="toggleMenu">
-        <i class="pi pi-bars text-white text-lg" />
+        <i class="pi pi-bars text-lg text-white" />
       </Button>
 
       <div
         v-show="isMenuOpen"
-        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
       >
         <div class="flex flex-col">
           <Button
             v-for="category in availableCategories"
             :key="category"
-            class="p-button-text w-full flex items-center justify-start"
+            class="p-button-text flex w-full items-center justify-start"
             :class="{ 'bg-gray-600': activeCategory === category }"
             @click="selectCategory(category)"
           >
@@ -26,7 +26,7 @@
       </div>
     </div>
 
-    <div v-show="activeCategory" class="bg-gray-700/30 rounded-lg">
+    <div v-show="activeCategory" class="rounded-lg bg-gray-700/30">
       <SceneControls
         v-if="activeCategory === 'scene'"
         ref="sceneControlsRef"
@@ -81,7 +81,7 @@
           :class="[
             'pi',
             showPreview ? 'pi-eye' : 'pi-eye-slash',
-            'text-white text-lg'
+            'text-lg text-white'
           ]"
         />
       </Button>
diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue
index d9c344bec1..111ee01165 100644
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" class="w-full h-full relative comfy-load-3d">
+  <div ref="container" class="comfy-load-3d relative h-full w-full">
     <LoadingOverlay ref="loadingOverlayRef" />
   </div>
 </template>
diff --git a/src/components/load3d/Load3dViewerContent.vue b/src/components/load3d/Load3dViewerContent.vue
index fa22865d6a..0099fee7d3 100644
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -6,18 +6,18 @@
     @mouseenter="viewer.handleMouseEnter"
     @mouseleave="viewer.handleMouseLeave"
   >
-    <div ref="mainContentRef" class="flex-1 relative">
+    <div ref="mainContentRef" class="relative flex-1">
       <div
         ref="containerRef"
-        class="absolute w-full h-full comfy-load-3d-viewer"
+        class="comfy-load-3d-viewer absolute h-full w-full"
         @resize="viewer.handleResize"
       />
     </div>
 
-    <div class="w-72 flex flex-col">
+    <div class="flex w-72 flex-col">
       <div class="flex-1 overflow-y-auto p-4">
         <div class="space-y-2">
-          <div class="p-2 space-y-4">
+          <div class="space-y-4 p-2">
             <SceneControls
               v-model:background-color="viewer.backgroundColor.value"
               v-model:show-grid="viewer.showGrid.value"
@@ -26,27 +26,27 @@
             />
           </div>
 
-          <div class="p-2 space-y-4">
+          <div class="space-y-4 p-2">
             <ModelControls
               v-model:up-direction="viewer.upDirection.value"
               v-model:material-mode="viewer.materialMode.value"
             />
           </div>
 
-          <div class="p-2 space-y-4">
+          <div class="space-y-4 p-2">
             <CameraControls
               v-model:camera-type="viewer.cameraType.value"
               v-model:fov="viewer.fov.value"
             />
           </div>
 
-          <div class="p-2 space-y-4">
+          <div class="space-y-4 p-2">
             <LightControls
               v-model:light-intensity="viewer.lightIntensity.value"
             />
           </div>
 
-          <div class="p-2 space-y-4">
+          <div class="space-y-4 p-2">
             <ExportControls @export-model="viewer.exportModel" />
           </div>
         </div>
diff --git a/src/components/load3d/LoadingOverlay.vue b/src/components/load3d/LoadingOverlay.vue
index 361718d9ea..e7e358203a 100644
--- a/src/components/load3d/LoadingOverlay.vue
+++ b/src/components/load3d/LoadingOverlay.vue
@@ -2,11 +2,11 @@
   <Transition name="fade">
     <div
       v-if="modelLoading"
-      class="absolute inset-0 bg-black/50 flex items-center justify-center z-50"
+      class="absolute inset-0 z-50 flex items-center justify-center bg-black/50"
     >
       <div class="flex flex-col items-center">
         <div class="spinner" />
-        <div class="text-white mt-4 text-lg">
+        <div class="mt-4 text-lg text-white">
           {{ loadingMessage }}
         </div>
       </div>
diff --git a/src/components/load3d/controls/CameraControls.vue b/src/components/load3d/controls/CameraControls.vue
index e19683f657..b45fa7e6d2 100644
--- a/src/components/load3d/controls/CameraControls.vue
+++ b/src/components/load3d/controls/CameraControls.vue
@@ -6,19 +6,19 @@
           value: t('load3d.switchCamera'),
           showDelay: 300
         }"
-        :class="['pi', getCameraIcon, 'text-white text-lg']"
+        :class="['pi', getCameraIcon, 'text-lg text-white']"
       />
     </Button>
-    <div v-if="showFOVButton" class="relative show-fov">
+    <div v-if="showFOVButton" class="show-fov relative">
       <Button class="p-button-rounded p-button-text" @click="toggleFOV">
         <i
           v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
-          class="pi pi-expand text-white text-lg"
+          class="pi pi-expand text-lg text-white"
         />
       </Button>
       <div
         v-show="showFOV"
-        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
         style="width: 150px"
       >
         <Slider
diff --git a/src/components/load3d/controls/ExportControls.vue b/src/components/load3d/controls/ExportControls.vue
index 4f718d4482..8e6bde5eae 100644
--- a/src/components/load3d/controls/ExportControls.vue
+++ b/src/components/load3d/controls/ExportControls.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="relative show-export-formats">
+    <div class="show-export-formats relative">
       <Button
         class="p-button-rounded p-button-text"
         @click="toggleExportFormats"
@@ -10,12 +10,12 @@
             value: t('load3d.exportModel'),
             showDelay: 300
           }"
-          class="pi pi-download text-white text-lg"
+          class="pi pi-download text-lg text-white"
         />
       </Button>
       <div
         v-show="showExportFormats"
-        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
       >
         <div class="flex flex-col">
           <Button
diff --git a/src/components/load3d/controls/LightControls.vue b/src/components/load3d/controls/LightControls.vue
index 1c6bc751e4..487ea5ef97 100644
--- a/src/components/load3d/controls/LightControls.vue
+++ b/src/components/load3d/controls/LightControls.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div v-if="showLightIntensityButton" class="relative show-light-intensity">
+    <div v-if="showLightIntensityButton" class="show-light-intensity relative">
       <Button
         class="p-button-rounded p-button-text"
         @click="toggleLightIntensity"
@@ -10,12 +10,12 @@
             value: t('load3d.lightIntensity'),
             showDelay: 300
           }"
-          class="pi pi-sun text-white text-lg"
+          class="pi pi-sun text-lg text-white"
         />
       </Button>
       <div
         v-show="showLightIntensity"
-        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
         style="width: 150px"
       >
         <Slider
diff --git a/src/components/load3d/controls/ModelControls.vue b/src/components/load3d/controls/ModelControls.vue
index 1f00ed3e3e..ac8f11053b 100644
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="flex flex-col">
-    <div class="relative show-up-direction">
+    <div class="show-up-direction relative">
       <Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
         <i
           v-tooltip.right="{
             value: t('load3d.upDirection'),
             showDelay: 300
           }"
-          class="pi pi-arrow-up text-white text-lg"
+          class="pi pi-arrow-up text-lg text-white"
         />
       </Button>
       <div
         v-show="showUpDirection"
-        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
       >
         <div class="flex flex-col">
           <Button
@@ -28,7 +28,7 @@
       </div>
     </div>
 
-    <div class="relative show-material-mode">
+    <div class="show-material-mode relative">
       <Button
         class="p-button-rounded p-button-text"
         @click="toggleMaterialMode"
@@ -38,12 +38,12 @@
             value: t('load3d.materialMode'),
             showDelay: 300
           }"
-          class="pi pi-box text-white text-lg"
+          class="pi pi-box text-lg text-white"
         />
       </Button>
       <div
         v-show="showMaterialMode"
-        class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
       >
         <div class="flex flex-col">
           <Button
@@ -59,7 +59,7 @@
       </div>
     </div>
 
-    <div v-if="materialMode === 'lineart'" class="relative show-edge-threshold">
+    <div v-if="materialMode === 'lineart'" class="show-edge-threshold relative">
       <Button
         class="p-button-rounded p-button-text"
         @click="toggleEdgeThreshold"
@@ -69,15 +69,15 @@
             value: t('load3d.edgeThreshold'),
             showDelay: 300
           }"
-          class="pi pi-sliders-h text-white text-lg"
+          class="pi pi-sliders-h text-lg text-white"
         />
       </Button>
       <div
         v-show="showEdgeThreshold"
-        class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
         style="width: 150px"
       >
-        <label class="text-white text-xs mb-1 block"
+        <label class="mb-1 block text-xs text-white"
           >{{ t('load3d.edgeThreshold') }}: {{ edgeThreshold }}°</label
         >
         <Slider
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index fdac4abcb8..f37f2b6ae5 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative bg-gray-700/30 rounded-lg">
+  <div class="relative rounded-lg bg-gray-700/30">
     <div class="flex flex-col gap-2">
       <Button
         class="p-button-rounded p-button-text"
@@ -10,7 +10,7 @@
             value: t('load3d.resizeNodeMatchOutput'),
             showDelay: 300
           }"
-          class="pi pi-window-maximize text-white text-lg"
+          class="pi pi-window-maximize text-lg text-white"
         />
       </Button>
       <Button
@@ -31,7 +31,7 @@
           :class="[
             'pi',
             isRecording ? 'pi-circle-fill' : 'pi-video',
-            'text-white text-lg'
+            'text-lg text-white'
           ]"
         />
       </Button>
@@ -46,7 +46,7 @@
             value: t('load3d.exportRecording'),
             showDelay: 300
           }"
-          class="pi pi-download text-white text-lg"
+          class="pi pi-download text-lg text-white"
         />
       </Button>
 
@@ -60,13 +60,13 @@
             value: t('load3d.clearRecording'),
             showDelay: 300
           }"
-          class="pi pi-trash text-white text-lg"
+          class="pi pi-trash text-lg text-white"
         />
       </Button>
 
       <div
         v-if="recordingDuration > 0 && !isRecording"
-        class="text-xs text-white text-center mt-1"
+        class="mt-1 text-center text-xs text-white"
       >
         {{ formatDuration(recordingDuration) }}
       </div>
diff --git a/src/components/load3d/controls/SceneControls.vue b/src/components/load3d/controls/SceneControls.vue
index 8fd620f33a..d212e43d44 100644
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -7,7 +7,7 @@
     >
       <i
         v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
-        class="pi pi-table text-white text-lg"
+        class="pi pi-table text-lg text-white"
       />
     </Button>
 
@@ -18,13 +18,13 @@
             value: t('load3d.backgroundColor'),
             showDelay: 300
           }"
-          class="pi pi-palette text-white text-lg"
+          class="pi pi-palette text-lg text-white"
         />
         <input
           ref="colorPickerRef"
           type="color"
           :value="backgroundColor"
-          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+          class="pointer-events-none absolute m-0 h-0 w-0 p-0 opacity-0"
           @input="
             updateBackgroundColor(($event.target as HTMLInputElement).value)
           "
@@ -39,13 +39,13 @@
             value: t('load3d.uploadBackgroundImage'),
             showDelay: 300
           }"
-          class="pi pi-image text-white text-lg"
+          class="pi pi-image text-lg text-white"
         />
         <input
           ref="imagePickerRef"
           type="file"
           accept="image/*"
-          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+          class="pointer-events-none absolute m-0 h-0 w-0 p-0 opacity-0"
           @change="uploadBackgroundImage"
         />
       </Button>
@@ -61,7 +61,7 @@
             value: t('load3d.removeBackgroundImage'),
             showDelay: 300
           }"
-          class="pi pi-times text-white text-lg"
+          class="pi pi-times text-lg text-white"
         />
       </Button>
     </div>
diff --git a/src/components/load3d/controls/ViewerControls.vue b/src/components/load3d/controls/ViewerControls.vue
index 0f2cea8833..2930aea0b7 100644
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative bg-gray-700/30 rounded-lg">
+  <div class="relative rounded-lg bg-gray-700/30">
     <div class="flex flex-col gap-2">
       <Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
         <i
@@ -7,7 +7,7 @@
             value: t('load3d.openIn3DViewer'),
             showDelay: 300
           }"
-          class="pi pi-expand text-white text-lg"
+          class="pi pi-expand text-lg text-white"
         />
       </Button>
     </div>
diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index 7a5304f234..c63bd17406 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -6,7 +6,7 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
   <div v-else class="_sb_node_preview">
     <div class="_sb_table">
       <div
-        class="node_header text-ellipsis mr-4"
+        class="node_header mr-4 text-ellipsis"
         :title="nodeDef.display_name"
         :style="{
           backgroundColor: litegraphColors.NODE_DEFAULT_COLOR,
diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index 916575ea09..56e6a43d4e 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="comfy-vue-node-search-container flex justify-center items-center w-full min-w-96"
+    class="comfy-vue-node-search-container flex w-full min-w-96 items-center justify-center"
   >
     <div
       v-if="enableNodePreview"
-      class="comfy-vue-node-preview-container absolute left-[-350px] top-[50px]"
+      class="comfy-vue-node-preview-container absolute top-[50px] left-[-350px]"
     >
       <NodePreview
         v-if="hoveredSuggestion"
diff --git a/src/components/searchbox/NodeSearchItem.vue b/src/components/searchbox/NodeSearchItem.vue
index 5fd8616be1..da9a0cd830 100644
--- a/src/components/searchbox/NodeSearchItem.vue
+++ b/src/components/searchbox/NodeSearchItem.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="option-container flex justify-between items-center px-2 py-0 cursor-pointer overflow-hidden w-full"
+    class="option-container flex w-full cursor-pointer items-center justify-between overflow-hidden px-2 py-0"
   >
-    <div class="option-display-name font-semibold flex flex-col">
+    <div class="option-display-name flex flex-col font-semibold">
       <div>
         <span v-if="isBookmarked">
-          <i class="pi pi-bookmark-fill text-sm mr-1" />
+          <i class="pi pi-bookmark-fill mr-1 text-sm" />
         </span>
         <span v-html="highlightQuery(nodeDef.display_name, currentQuery)" />
         <span>&nbsp;</span>
@@ -15,7 +15,7 @@
       </div>
       <div
         v-if="showCategory"
-        class="option-category font-light text-sm text-muted overflow-hidden text-ellipsis whitespace-nowrap"
+        class="option-category truncate text-sm font-light text-muted"
       >
         {{ nodeDef.category.replaceAll('/', ' > ') }}
       </div>
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 73f306cb6b..b7a33b7b03 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -25,7 +25,7 @@
   </teleport>
   <div
     v-if="selectedTab"
-    class="sidebar-content-container h-full overflow-y-auto overflow-x-hidden"
+    class="sidebar-content-container h-full overflow-x-hidden overflow-y-auto"
   >
     <ExtensionSlot :extension="selectedTab" />
   </div>
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 8ce323125b..124dd69ef6 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -1,18 +1,18 @@
 <template>
   <div
-    class="comfy-vue-side-bar-container flex flex-col h-full group/sidebar-tab"
+    class="comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col"
     :class="props.class"
   >
     <div class="comfy-vue-side-bar-header">
-      <Toolbar class="border-x-0 border-t-0 rounded-none px-2 py-1 min-h-8">
+      <Toolbar class="min-h-8 rounded-none border-x-0 border-t-0 px-2 py-1">
         <template #start>
-          <span class="text-xs 2xl:text-sm truncate" :title="props.title">
+          <span class="truncate text-xs 2xl:text-sm" :title="props.title">
             {{ props.title.toUpperCase() }}
           </span>
         </template>
         <template #end>
           <div
-            class="flex flex-row motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 touch:w-auto touch:opacity-100 transition-all duration-200"
+            class="touch:w-auto touch:opacity-100 flex flex-row 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"
           >
             <slot name="tool-buttons" />
           </div>
@@ -21,7 +21,7 @@
       <slot name="header" />
     </div>
     <!-- h-0 to force scrollpanel to grow -->
-    <ScrollPanel class="comfy-vue-side-bar-body grow h-0">
+    <ScrollPanel class="comfy-vue-side-bar-body h-0 grow">
       <slot name="body" />
     </ScrollPanel>
   </div>
diff --git a/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue b/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
index 8260ba9d9f..73b840587a 100644
--- a/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
+++ b/src/components/sidebar/tabs/modelLibrary/DownloadItem.vue
@@ -5,7 +5,7 @@
     </div>
     <div v-if="['cancelled', 'error'].includes(download.status ?? '')">
       <Chip
-        class="h-6 text-sm font-light bg-red-700 mt-2"
+        class="mt-2 h-6 bg-red-700 text-sm font-light"
         removable
         @remove="handleRemoveDownload"
       >
@@ -30,7 +30,7 @@
       <Button
         v-if="download.status === 'in_progress'"
         v-tooltip.top="t('electronFileDownload.pause')"
-        class="file-action-button w-[22px] h-[22px]"
+        class="file-action-button h-[22px] w-[22px]"
         size="small"
         rounded
         icon="pi pi-pause"
@@ -40,7 +40,7 @@
       <Button
         v-if="download.status === 'paused'"
         v-tooltip.top="t('electronFileDownload.resume')"
-        class="file-action-button w-[22px] h-[22px]"
+        class="file-action-button h-[22px] w-[22px]"
         size="small"
         rounded
         icon="pi pi-play"
@@ -50,7 +50,7 @@
       <Button
         v-if="['in_progress', 'paused'].includes(download.status ?? '')"
         v-tooltip.top="t('electronFileDownload.cancel')"
-        class="file-action-button w-[22px] h-[22px] p-red"
+        class="file-action-button p-red h-[22px] w-[22px]"
         size="small"
         rounded
         severity="danger"
diff --git a/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue b/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue
index 6a6f722ccf..1548db200a 100644
--- a/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="inProgressDownloads.length > 0" class="mx-6 mb-4">
-    <div class="text-lg my-4">
+    <div class="my-4 text-lg">
       {{ $t('electronFileDownload.inProgress') }}
     </div>
 
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
index a1da62b4fc..5380233368 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col h-full bg-(--p-tree-background) overflow-auto">
+  <div class="flex h-full flex-col overflow-auto bg-(--p-tree-background)">
     <div
-      class="px-3 py-2 flex items-center border-b border-(--p-divider-color)"
+      class="flex items-center border-b border-(--p-divider-color) px-3 py-2"
     >
       <Button
         v-tooltip.bottom="$t('g.back')"
@@ -12,7 +12,7 @@
       />
       <span class="ml-2 font-semibold">{{ node.display_name }}</span>
     </div>
-    <div class="p-4 grow node-help-content w-full mx-auto">
+    <div class="node-help-content mx-auto w-full grow p-4">
       <ProgressSpinner
         v-if="isLoading"
         class="m-auto"
@@ -25,7 +25,7 @@
         v-html="renderedHelpHtml"
       />
       <!-- Fallback: markdown not found or fetch error -->
-      <div v-else class="text-sm space-y-6 fallback-content">
+      <div v-else class="fallback-content space-y-6 text-sm">
         <p v-if="node.description">
           <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
         </p>
diff --git a/src/components/templates/thumbnails/AudioThumbnail.vue b/src/components/templates/thumbnails/AudioThumbnail.vue
index 49333d93e2..2d7c0bc1cb 100644
--- a/src/components/templates/thumbnails/AudioThumbnail.vue
+++ b/src/components/templates/thumbnails/AudioThumbnail.vue
@@ -1,13 +1,13 @@
 <template>
   <BaseThumbnail>
     <div
-      class="w-full h-full flex items-center justify-center p-4"
+      class="flex h-full w-full items-center justify-center p-4"
       :style="{
         backgroundImage: 'url(/assets/images/default-template.png)',
         backgroundRepeat: 'round'
       }"
     >
-      <audio controls class="w-full relative" :src="src" @click.stop />
+      <audio controls class="relative w-full" :src="src" @click.stop />
     </div>
   </BaseThumbnail>
 </template>
diff --git a/src/components/templates/thumbnails/BaseThumbnail.vue b/src/components/templates/thumbnails/BaseThumbnail.vue
index 62168a561b..916d0ebaca 100644
--- a/src/components/templates/thumbnails/BaseThumbnail.vue
+++ b/src/components/templates/thumbnails/BaseThumbnail.vue
@@ -1,22 +1,22 @@
 <template>
   <div
-    class="relative w-full aspect-square rounded-t-lg overflow-hidden select-none"
+    class="relative aspect-square w-full overflow-hidden rounded-t-lg select-none"
   >
     <div
       v-if="!error"
       ref="contentRef"
-      class="w-full h-full transform-gpu transition-transform duration-1000 ease-out"
+      class="h-full w-full transform-gpu transition-transform duration-1000 ease-out"
       :style="
         isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
       "
     >
       <slot />
     </div>
-    <div v-else class="w-full h-full flex items-center justify-center">
+    <div v-else class="flex h-full w-full items-center justify-center">
       <img
         src="/assets/images/default-template.png"
         draggable="false"
-        class="transform-gpu transition-transform duration-300 ease-out w-full h-full object-cover"
+        class="h-full w-full transform-gpu object-cover transition-transform duration-300 ease-out"
       />
     </div>
   </div>
diff --git a/src/components/templates/thumbnails/CompareSliderThumbnail.vue b/src/components/templates/thumbnails/CompareSliderThumbnail.vue
index 3633c5dc52..7272727787 100644
--- a/src/components/templates/thumbnails/CompareSliderThumbnail.vue
+++ b/src/components/templates/thumbnails/CompareSliderThumbnail.vue
@@ -23,7 +23,7 @@
         }"
       />
       <div
-        class="absolute inset-y-0 w-0.5 bg-white/30 backdrop-blur-sm z-10 pointer-events-none"
+        class="pointer-events-none absolute inset-y-0 z-10 w-0.5 bg-white/30 backdrop-blur-sm"
         :style="{
           left: `${sliderPosition}%`
         }"
diff --git a/src/components/templates/thumbnails/HoverDissolveThumbnail.vue b/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
index f02c939d3e..9ba49b565a 100644
--- a/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
+++ b/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
-    <div class="relative w-full h-full">
+    <div class="relative h-full w-full">
       <div class="absolute inset-0">
         <LazyImage
           :src="baseImageSrc"
diff --git a/src/components/toast/RerouteMigrationToast.vue b/src/components/toast/RerouteMigrationToast.vue
index 18d26b3afb..c084926d15 100644
--- a/src/components/toast/RerouteMigrationToast.vue
+++ b/src/components/toast/RerouteMigrationToast.vue
@@ -1,8 +1,8 @@
 <template>
   <Toast group="reroute-migration">
     <template #message>
-      <div class="flex flex-col items-start flex-auto">
-        <div class="font-medium text-lg my-4">
+      <div class="flex flex-auto flex-col items-start">
+        <div class="my-4 text-lg font-medium">
           {{ t('toastMessages.migrateToLitegraphReroute') }}
         </div>
         <Button
diff --git a/src/components/topbar/CommandMenubar.vue b/src/components/topbar/CommandMenubar.vue
index 310ac7b192..36aa56948c 100644
--- a/src/components/topbar/CommandMenubar.vue
+++ b/src/components/topbar/CommandMenubar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="comfyui-logo-wrapper p-1 flex justify-center items-center cursor-pointer rounded-md mr-2"
+    class="comfyui-logo-wrapper mr-2 flex cursor-pointer items-center justify-center rounded-md p-1"
     :class="{
       'comfyui-logo-menu-visible': menuRef?.visible
     }"
@@ -59,11 +59,11 @@
         />
         <span
           v-if="item?.comfyCommand?.keybinding"
-          class="ml-auto border border-surface rounded text-muted text-xs text-nowrap p-1 keybinding-tag"
+          class="keybinding-tag ml-auto rounded border border-surface p-1 text-xs text-nowrap text-muted"
         >
           {{ item.comfyCommand.keybinding.combo.toString() }}
         </span>
-        <i v-if="item.items" class="ml-auto pi pi-angle-right" />
+        <i v-if="item.items" class="pi pi-angle-right ml-auto" />
       </a>
     </template>
   </TieredMenu>
diff --git a/src/components/topbar/CurrentUserPopover.vue b/src/components/topbar/CurrentUserPopover.vue
index de9fab40cf..7fda0fa2fd 100644
--- a/src/components/topbar/CurrentUserPopover.vue
+++ b/src/components/topbar/CurrentUserPopover.vue
@@ -14,10 +14,10 @@
         />
 
         <!-- User Details -->
-        <h3 class="text-lg font-semibold truncate my-0 mb-1">
+        <h3 class="my-0 mb-1 truncate text-lg font-semibold">
           {{ userDisplayName || $t('g.user') }}
         </h3>
-        <p v-if="userEmail" class="text-sm text-muted truncate my-0">
+        <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
           {{ userEmail }}
         </p>
       </div>
@@ -61,11 +61,11 @@
 
     <Divider class="my-2" />
 
-    <div class="w-full flex flex-col gap-2 p-2">
-      <div class="text-muted text-sm">
+    <div class="flex w-full flex-col gap-2 p-2">
+      <div class="text-sm text-muted">
         {{ $t('credits.yourCreditBalance') }}
       </div>
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
         <UserCredit text-class="text-2xl" />
         <Button :label="$t('credits.topUp.topUp')" @click="handleTopUp" />
       </div>
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index e7e049b350..d5909766e9 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -2,7 +2,7 @@
   <div>
     <div
       v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
-      class="w-full flex content-end z-1001 h-[38px]"
+      class="z-1001 flex h-[38px] w-full content-end"
       style="background: var(--border-color)"
     >
       <WorkflowTabs />
@@ -14,7 +14,7 @@
       :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
     >
       <CommandMenubar />
-      <div class="grow min-w-0 app-drag h-full"></div>
+      <div class="app-drag h-full min-w-0 grow"></div>
       <div
         ref="menuRight"
         class="comfyui-menu-right flex-shrink-1 overflow-auto"
@@ -26,7 +26,7 @@
     <!-- Virtual top menu for native window (drag handle) -->
     <div
       v-show="isNativeWindow() && !showTopMenu"
-      class="fixed top-0 left-0 app-drag w-full h-(--comfy-topbar-height)"
+      class="app-drag fixed top-0 left-0 h-(--comfy-topbar-height) w-full"
     />
   </div>
 </template>
diff --git a/src/components/topbar/WorkflowTab.vue b/src/components/topbar/WorkflowTab.vue
index 97195beaf7..937045dd63 100644
--- a/src/components/topbar/WorkflowTab.vue
+++ b/src/components/topbar/WorkflowTab.vue
@@ -1,23 +1,23 @@
 <template>
   <div
     ref="workflowTabRef"
-    class="flex p-2 gap-2 workflow-tab group"
+    class="workflow-tab group flex gap-2 p-2"
     v-bind="$attrs"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
     @click="handleClick"
   >
-    <span class="workflow-label text-sm max-w-[150px] truncate inline-block">
+    <span class="workflow-label inline-block max-w-[150px] truncate text-sm">
       {{ workflowOption.workflow.filename }}
     </span>
     <div class="relative">
       <span
         v-if="shouldShowStatusIndicator"
-        class="group-hover:hidden absolute font-bold text-2xl top-1/2 left-1/2 -translate-1/2 z-10 bg-(--comfy-menu-bg) w-4"
+        class="absolute top-1/2 left-1/2 z-10 w-4 -translate-1/2 bg-(--comfy-menu-bg) text-2xl font-bold group-hover:hidden"
         >•</span
       >
       <Button
-        class="close-button p-0 w-auto invisible"
+        class="close-button invisible w-auto p-0"
         icon="pi pi-times"
         text
         severity="secondary"
diff --git a/src/components/topbar/WorkflowTabPopover.vue b/src/components/topbar/WorkflowTabPopover.vue
index 9972263897..4ef41f22b3 100644
--- a/src/components/topbar/WorkflowTabPopover.vue
+++ b/src/components/topbar/WorkflowTabPopover.vue
@@ -26,7 +26,7 @@
       >
         <img
           :src="thumbnailUrl"
-          class="block h-[200px] object-cover rounded-lg p-2"
+          class="block h-[200px] rounded-lg object-cover p-2"
           :style="{ width: `${POPOVER_WIDTH}px` }"
         />
       </div>
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index de7f25d5ff..0d73629885 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="workflow-tabs-container flex flex-row max-w-full h-full flex-auto overflow-hidden"
+    class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden"
     :class="{ 'workflow-tabs-container-desktop': isDesktop }"
   >
     <Button
@@ -14,7 +14,7 @@
     />
     <ScrollPanel
       ref="scrollPanelRef"
-      class="overflow-hidden no-drag"
+      class="no-drag overflow-hidden"
       :pt:content="{
         class: 'p-0 w-full flex',
         onwheel: handleWheel
@@ -55,7 +55,7 @@
     />
     <Button
       v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
-      class="new-blank-workflow-button shrink-0 no-drag rounded-none"
+      class="new-blank-workflow-button no-drag shrink-0 rounded-none"
       icon="pi pi-plus"
       text
       severity="secondary"
@@ -65,7 +65,7 @@
     <ContextMenu ref="menu" :model="contextMenuItems" />
     <div
       v-if="menuSetting !== 'Bottom' && isDesktop"
-      class="window-actions-spacer shrink-0 app-drag"
+      class="window-actions-spacer app-drag shrink-0"
     />
   </div>
 </template>
diff --git a/src/components/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue
index ac3333217c..2ecfc794a7 100644
--- a/src/components/ui/slider/Slider.vue
+++ b/src/components/ui/slider/Slider.vue
@@ -59,7 +59,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     >
       <SliderRange
         data-slot="slider-range"
-        class="bg-node-component-surface-highlight absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+        class="absolute bg-node-component-surface-highlight data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
       />
     </SliderTrack>
 
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index b17074c733..4abc183658 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -3,7 +3,7 @@
     <template #leftPanel>
       <LeftSidePanel v-model="selectedNavItem" :nav-items="tempNavigation">
         <template #header-icon>
-          <i class="icon-[lucide--puzzle] text-neutral" />
+          <i class="text-neutral icon-[lucide--puzzle]" />
         </template>
         <template #header-title>
           <span class="text-neutral text-base">{{ t('g.title') }}</span>
@@ -56,7 +56,7 @@
     </template>
 
     <template #contentFilter>
-      <div class="relative px-6 pb-4 flex gap-2">
+      <div class="relative flex gap-2 px-6 pb-4">
         <MultiSelect
           v-model="selectedFrameworks"
           v-model:search-query="searchText"
@@ -92,7 +92,7 @@
           <template #top>
             <CardTop ratio="landscape">
               <template #default>
-                <div class="w-full h-full bg-blue-500"></div>
+                <div class="h-full w-full bg-blue-500"></div>
               </template>
               <template #top-right>
                 <IconButton
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index f885352792..e2e8f49e79 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -10,7 +10,7 @@
     <IconButton :class="closeButtonClasses" @click="closeDialog">
       <i class="pi pi-times text-sm"></i>
     </IconButton>
-    <div class="flex w-full h-full">
+    <div class="flex h-full w-full">
       <Transition name="slide-panel">
         <nav
           v-if="$slots.leftPanel && showLeftPanel"
@@ -25,9 +25,9 @@
       </Transition>
 
       <div :class="mainContainerClasses">
-        <div class="w-full h-full flex flex-col">
+        <div class="flex h-full w-full flex-col">
           <header v-if="$slots.header" :class="headerClasses">
-            <div class="flex-1 flex gap-2 shrink-0">
+            <div class="flex flex-1 shrink-0 gap-2">
               <IconButton v-if="!notMobile" @click="toggleLeftPanel">
                 <i
                   v-if="!showLeftPanel"
@@ -48,12 +48,12 @@
             </div>
           </header>
 
-          <main class="flex flex-col flex-1 min-h-0">
+          <main class="flex min-h-0 flex-1 flex-col">
             <!-- Fallback title bar when no leftPanel is provided -->
             <slot name="contentFilter"></slot>
             <h2
               v-if="!$slots.leftPanel"
-              class="text-xxl px-6 pt-2 pb-6 m-0 capitalize"
+              class="text-xxl m-0 px-6 pt-2 pb-6 capitalize"
             >
               {{ contentTitle }}
             </h2>
diff --git a/src/components/widget/nav/NavIcon.vue b/src/components/widget/nav/NavIcon.vue
index bcc5c5a00d..bffa99da67 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-sm text-neutral" />
+  <i :class="icon" class="text-neutral text-sm" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index d744d88a1d..655ccb0ee0 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center gap-2 px-4 py-3 text-sm rounded-md transition-colors cursor-pointer"
+    class="flex cursor-pointer items-center gap-2 rounded-md px-4 py-3 text-sm transition-colors"
     :class="
       active
         ? 'bg-gray-400 dark-theme:bg-charcoal-300 text-neutral'
@@ -10,7 +10,7 @@
     @click="onClick"
   >
     <NavIcon v-if="icon" :icon="icon" />
-    <i v-else class="icon-[lucide--folder] text-xs text-neutral" />
+    <i v-else class="text-neutral icon-[lucide--folder] text-xs" />
     <span class="flex items-center">
       <slot></slot>
     </span>
diff --git a/src/components/widget/nav/NavTitle.vue b/src/components/widget/nav/NavTitle.vue
index d7bc3fcb8b..6494168849 100644
--- a/src/components/widget/nav/NavTitle.vue
+++ b/src/components/widget/nav/NavTitle.vue
@@ -9,7 +9,7 @@
     @click="collapsible && toggleCollapse()"
   >
     <h3
-      class="text-xs font-bold uppercase text-neutral-400 dark-theme:text-neutral-400"
+      class="text-xs font-bold text-neutral-400 uppercase dark-theme:text-neutral-400"
     >
       {{ title }}
     </h3>
diff --git a/src/components/widget/panel/LeftSidePanel.vue b/src/components/widget/panel/LeftSidePanel.vue
index b6d76b382e..b1e2d6b90a 100644
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/src/components/widget/panel/LeftSidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-charcoal-600">
+  <div class="flex h-full w-full flex-col bg-white dark-theme:bg-charcoal-600">
     <PanelHeader>
       <template #icon>
         <slot name="header-icon"></slot>
@@ -8,7 +8,7 @@
     </PanelHeader>
 
     <nav
-      class="flex-1 px-3 py-4 flex flex-col gap-1 overflow-y-auto scrollbar-hide"
+      class="flex scrollbar-hide flex-1 flex-col gap-1 overflow-y-auto px-3 py-4"
     >
       <template v-for="(item, index) in navItems" :key="index">
         <div v-if="'items' in item" class="flex flex-col gap-2">
diff --git a/src/components/widget/panel/PanelHeader.vue b/src/components/widget/panel/PanelHeader.vue
index 13df123f4d..cdcc4eb203 100644
--- a/src/components/widget/panel/PanelHeader.vue
+++ b/src/components/widget/panel/PanelHeader.vue
@@ -1,10 +1,10 @@
 <template>
-  <header class="flex items-center justify-between h-16 px-6">
+  <header class="flex h-16 items-center justify-between px-6">
     <div class="flex items-center gap-2 pl-1">
       <slot name="icon">
-        <i class="icon-[lucide--puzzle] text-neutral text-base" />
+        <i class="text-neutral icon-[lucide--puzzle] text-base" />
       </slot>
-      <h2 class="font-bold text-base text-neutral">
+      <h2 class="text-neutral text-base font-bold">
         <slot></slot>
       </h2>
     </div>
diff --git a/src/components/widget/panel/RightSidePanel.vue b/src/components/widget/panel/RightSidePanel.vue
index 266f229102..5b6a4eb5eb 100644
--- a/src/components/widget/panel/RightSidePanel.vue
+++ b/src/components/widget/panel/RightSidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-charcoal-600">
+  <div class="h-full w-full bg-white pr-6 pb-8 pl-4 dark-theme:bg-charcoal-600">
     <slot></slot>
   </div>
 </template>
diff --git a/src/core/graph/subgraph/SubgraphNode.vue b/src/core/graph/subgraph/SubgraphNode.vue
index 8580acfc78..72e4614f57 100644
--- a/src/core/graph/subgraph/SubgraphNode.vue
+++ b/src/core/graph/subgraph/SubgraphNode.vue
@@ -244,14 +244,14 @@ onBeforeUnmount(() => {
   />
   <div
     v-if="filteredActive.length"
-    class="pt-1 pb-4 border-b-1 border-node-component-border"
+    class="border-b-1 border-node-component-border pt-1 pb-4"
   >
-    <div class="flex py-0 px-4 justify-between">
-      <div class="text-slate-100 text-[9px] font-semibold uppercase">
+    <div class="flex justify-between px-4 py-0">
+      <div class="text-[9px] font-semibold text-slate-100 uppercase">
         {{ $t('subgraphStore.shown') }}
       </div>
       <a
-        class="cursor-pointer text-right text-blue-100 text-[11px] font-normal"
+        class="cursor-pointer text-right text-[11px] font-normal text-blue-100"
         @click.stop="hideAll"
       >
         {{ $t('subgraphStore.hideAll') }}</a
@@ -261,7 +261,7 @@ onBeforeUnmount(() => {
       <div
         v-for="[node, widget] in filteredActive"
         :key="toKey([node, widget])"
-        class="w-full draggable-item"
+        class="draggable-item w-full"
         style=""
       >
         <SubgraphNodeWidget
@@ -275,12 +275,12 @@ onBeforeUnmount(() => {
     </div>
   </div>
   <div v-if="filteredCandidates.length" class="pt-1 pb-4">
-    <div class="flex py-0 px-4 justify-between">
-      <div class="text-slate-100 text-[9px] font-semibold uppercase">
+    <div class="flex justify-between px-4 py-0">
+      <div class="text-[9px] font-semibold text-slate-100 uppercase">
         {{ $t('subgraphStore.hidden') }}
       </div>
       <a
-        class="cursor-pointer text-right text-blue-100 text-[11px] font-normal"
+        class="cursor-pointer text-right text-[11px] font-normal text-blue-100"
         @click.stop="showAll"
       >
         {{ $t('subgraphStore.showAll') }}</a
@@ -300,7 +300,7 @@ onBeforeUnmount(() => {
   </div>
   <div
     v-if="recommendedWidgets.length"
-    class="justify-center flex py-4 border-t-1 border-node-component-border"
+    class="flex justify-center border-t-1 border-node-component-border py-4"
   >
     <Button
       size="small"
diff --git a/src/core/graph/subgraph/SubgraphNodeWidget.vue b/src/core/graph/subgraph/SubgraphNodeWidget.vue
index 11d85f0bb0..cee6632d0e 100644
--- a/src/core/graph/subgraph/SubgraphNodeWidget.vue
+++ b/src/core/graph/subgraph/SubgraphNodeWidget.vue
@@ -33,8 +33,8 @@ function classes() {
         )
       "
     />
-    <div class="flex-1 pointer-events-none">
-      <div class="text-slate-100 text-[10px]">{{ nodeTitle }}</div>
+    <div class="pointer-events-none flex-1">
+      <div class="text-[10px] text-slate-100">{{ nodeTitle }}</div>
       <div class="text-xs">{{ widgetName }}</div>
     </div>
     <Button
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index bb27153c21..7723667db0 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
+  <div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-1">
     <span
       v-for="badge in badges"
       :key="badge.label"
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 765323bf6d..dca0d2d640 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -24,9 +24,9 @@
     @click="interactive && $emit('select', asset)"
     @keydown.enter="interactive && $emit('select', asset)"
   >
-    <div class="relative w-full aspect-square overflow-hidden">
+    <div class="relative aspect-square w-full overflow-hidden">
       <div
-        class="w-full h-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-600 flex items-center justify-center"
+        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-600"
       ></div>
       <AssetBadgeGroup :badges="asset.badges" />
     </div>
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
index cbc44054bb..2bf77461cd 100644
--- a/src/platform/assets/components/AssetGrid.vue
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -27,8 +27,8 @@
         )
       "
     >
-      <i class="icon-[lucide--search] size-10 mb-4" />
-      <h3 class="text-lg font-medium mb-2">
+      <i class="mb-4 icon-[lucide--search] size-10" />
+      <h3 class="mb-2 text-lg font-medium">
         {{ $t('assetBrowser.noAssetsFound') }}
       </h3>
       <p class="text-sm">{{ $t('assetBrowser.tryAdjustingFilters') }}</p>
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index d5a8298d95..90a1f2f654 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="settings-container">
-    <ScrollPanel class="settings-sidebar shrink-0 p-2 w-48 2xl:w-64">
+    <ScrollPanel class="settings-sidebar w-48 shrink-0 p-2 2xl:w-64">
       <SearchBox
         v-model:model-value="searchQuery"
-        class="settings-search-box w-full mb-2"
+        class="settings-search-box mb-2 w-full"
         :placeholder="$t('g.searchSettings') + '...'"
         :debounce-time="128"
         autofocus
@@ -20,14 +20,14 @@
           (option: SettingTreeNode) =>
             !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
         "
-        class="border-none w-full"
+        class="w-full border-none"
       >
         <template #optiongroup>
           <Divider class="my-0" />
         </template>
       </Listbox>
     </ScrollPanel>
-    <Divider layout="vertical" class="mx-1 2xl:mx-4 hidden md:flex" />
+    <Divider layout="vertical" class="mx-1 hidden md:flex 2xl:mx-4" />
     <Divider layout="horizontal" class="flex md:hidden" />
     <Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
       <TabPanels class="settings-tab-panels h-full w-full pr-0">
diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
index db38e697b2..eb72d40deb 100644
--- a/src/renderer/extensions/minimap/MiniMap.vue
+++ b/src/renderer/extensions/minimap/MiniMap.vue
@@ -2,7 +2,7 @@
   <div
     v-if="visible && initialized"
     ref="minimapRef"
-    class="minimap-main-container flex absolute bottom-[66px] right-2 md:right-11 z-1000"
+    class="minimap-main-container absolute right-2 bottom-[66px] z-1000 flex md:right-11"
   >
     <MiniMapPanel
       v-if="showOptionsPanel"
@@ -32,7 +32,7 @@
         </template>
       </Button>
       <Button
-        class="absolute z-10 right-0"
+        class="absolute right-0 z-10"
         size="small"
         text
         severity="secondary"
@@ -45,7 +45,7 @@
       </Button>
 
       <hr
-        class="absolute top-5 bg-node-component-border h-px border-0"
+        class="absolute top-5 h-px border-0 bg-node-component-border"
         :style="{
           width: containerStyles.width
         }"
diff --git a/src/renderer/extensions/minimap/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
index 5458deab84..4f23ccc401 100644
--- a/src/renderer/extensions/minimap/MiniMapPanel.vue
+++ b/src/renderer/extensions/minimap/MiniMapPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="minimap-panel p-3 mr-2 flex flex-col gap-3 text-sm"
+    class="minimap-panel mr-2 flex flex-col gap-3 p-3 text-sm"
     :style="panelStyles"
   >
     <div class="flex items-center gap-2">
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 5c95fdaa6c..e32f569b6d 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="video-preview relative group flex flex-col items-center"
+    class="video-preview group relative flex flex-col items-center"
     tabindex="0"
     role="region"
     :aria-label="$t('g.videoPreview')"
@@ -12,16 +12,16 @@
   >
     <!-- Video Wrapper -->
     <div
-      class="relative rounded-[5px] overflow-hidden w-full max-w-[352px] bg-[#262729]"
+      class="relative w-full max-w-[352px] overflow-hidden rounded-[5px] bg-[#262729]"
     >
       <!-- Error State -->
       <div
         v-if="videoError"
-        class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
+        class="flex h-[352px] w-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
       >
-        <i class="icon-[lucide--video-off] w-12 h-12 mb-2 text-gray-400" />
+        <i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-gray-400" />
         <p class="text-sm text-gray-300">{{ $t('g.videoFailedToLoad') }}</p>
-        <p class="text-xs text-gray-400 mt-1">
+        <p class="mt-1 text-xs text-gray-400">
           {{ getVideoFilename(currentVideoUrl) }}
         </p>
       </div>
@@ -29,7 +29,7 @@
       <!-- Loading State -->
       <Skeleton
         v-else-if="isLoading"
-        class="w-full h-[352px]"
+        class="h-[352px] w-full"
         border-radius="5px"
       />
 
@@ -37,7 +37,7 @@
       <video
         v-else
         :src="currentVideoUrl"
-        class="w-full h-[352px] object-contain block"
+        class="block h-[352px] w-full object-contain"
         controls
         loop
         playsinline
@@ -49,29 +49,29 @@
       <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
         <!-- Download Button -->
         <button
-          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
           :title="$t('g.downloadVideo')"
           :aria-label="$t('g.downloadVideo')"
           @click="handleDownload"
         >
-          <i class="icon-[lucide--download] w-4 h-4" />
+          <i class="icon-[lucide--download] h-4 w-4" />
         </button>
 
         <!-- Close Button -->
         <button
-          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
           :title="$t('g.removeVideo')"
           :aria-label="$t('g.removeVideo')"
           @click="handleRemove"
         >
-          <i class="icon-[lucide--x] w-4 h-4" />
+          <i class="icon-[lucide--x] h-4 w-4" />
         </button>
       </div>
 
       <!-- Multiple Videos Navigation -->
       <div
         v-if="hasMultipleVideos"
-        class="absolute bottom-2 left-2 right-2 flex justify-center gap-1"
+        class="absolute right-2 bottom-2 left-2 flex justify-center gap-1"
       >
         <button
           v-for="(_, index) in imageUrls"
@@ -90,7 +90,7 @@
 
     <div class="relative">
       <!-- Video Dimensions -->
-      <div class="text-white text-xs text-center mt-2">
+      <div class="mt-2 text-center text-xs text-white">
         <span v-if="videoError" class="text-red-400">
           {{ $t('g.errorLoadingVideo') }}
         </span>
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index a31c3633b4..cec0a59cc8 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="image-preview relative group flex flex-col items-center"
+    class="image-preview group relative flex flex-col items-center"
     data-capture-node="true"
     tabindex="0"
     role="region"
@@ -12,16 +12,16 @@
   >
     <!-- Image Wrapper -->
     <div
-      class="relative rounded-[5px] overflow-hidden w-full max-w-[352px] bg-[#262729]"
+      class="relative w-full max-w-[352px] overflow-hidden rounded-[5px] bg-[#262729]"
     >
       <!-- Error State -->
       <div
         v-if="imageError"
-        class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
+        class="flex h-[352px] w-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
       >
-        <i class="icon-[lucide--image-off] w-12 h-12 mb-2 text-gray-400" />
+        <i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-gray-400" />
         <p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
-        <p class="text-xs text-gray-400 mt-1">
+        <p class="mt-1 text-xs text-gray-400">
           {{ getImageFilename(currentImageUrl) }}
         </p>
       </div>
@@ -29,7 +29,7 @@
       <!-- Loading State -->
       <Skeleton
         v-else-if="isLoading"
-        class="w-full h-[352px]"
+        class="h-[352px] w-full"
         border-radius="5px"
       />
 
@@ -38,7 +38,7 @@
         v-else
         :src="currentImageUrl"
         :alt="imageAltText"
-        class="w-full h-[352px] object-contain block"
+        class="block h-[352px] w-full object-contain"
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -48,39 +48,39 @@
         <!-- Mask/Edit Button -->
         <button
           v-if="!hasMultipleImages"
-          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
           :title="$t('g.editOrMaskImage')"
           :aria-label="$t('g.editOrMaskImage')"
           @click="handleEditMask"
         >
-          <i class="icon-[lucide--venetian-mask] w-4 h-4" />
+          <i class="icon-[lucide--venetian-mask] h-4 w-4" />
         </button>
 
         <!-- Download Button -->
         <button
-          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
           :title="$t('g.downloadImage')"
           :aria-label="$t('g.downloadImage')"
           @click="handleDownload"
         >
-          <i class="icon-[lucide--download] w-4 h-4" />
+          <i class="icon-[lucide--download] h-4 w-4" />
         </button>
 
         <!-- Close Button -->
         <button
-          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
           :title="$t('g.removeImage')"
           :aria-label="$t('g.removeImage')"
           @click="handleRemove"
         >
-          <i class="icon-[lucide--x] w-4 h-4" />
+          <i class="icon-[lucide--x] h-4 w-4" />
         </button>
       </div>
 
       <!-- Multiple Images Navigation -->
       <div
         v-if="hasMultipleImages"
-        class="absolute bottom-2 left-2 right-2 flex justify-center gap-1"
+        class="absolute right-2 bottom-2 left-2 flex justify-center gap-1"
       >
         <button
           v-for="(_, index) in imageUrls"
@@ -99,7 +99,7 @@
 
     <div class="relative">
       <!-- Image Dimensions -->
-      <div class="text-white text-xs text-center mt-2">
+      <div class="mt-2 text-center text-xs text-white">
         <span v-if="imageError" class="text-red-400">
           {{ $t('g.errorLoadingImage') }}
         </span>
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 225fc67553..63234aa86f 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
   <div v-else v-tooltip.left="tooltipConfig" :class="slotWrapperClass">
     <!-- Connection Dot -->
     <SlotConnectionDot
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 1213936cb9..a4a0d53497 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+  <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ $t('Node Render Error') }}
   </div>
   <div
@@ -70,7 +70,7 @@
     />
 
     <template v-if="!isCollapsed">
-      <div class="mb-4 relative">
+      <div class="relative mb-4">
         <div :class="separatorClasses" />
         <!-- Progress bar for executing state -->
         <div
@@ -108,7 +108,7 @@
           <img
             :src="latestPreviewUrl"
             alt="preview"
-            class="w-full max-h-64 object-contain"
+            class="max-h-64 w-full object-contain"
           />
         </div>
       </div>
@@ -117,7 +117,7 @@
     <!-- Resize handle -->
     <div
       v-if="!isCollapsed"
-      class="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize opacity-0 hover:opacity-20 hover:bg-white transition-opacity duration-200"
+      class="absolute right-0 bottom-0 h-3 w-3 cursor-se-resize opacity-0 transition-opacity duration-200 hover:bg-white hover:opacity-20"
       @pointerdown.stop="startResize"
     />
   </div>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index 3619605f19..40bd537fdd 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="scale-75">
     <div
-      class="bg-node-component-surface lg-node absolute rounded-2xl border border-solid border-node-component-border outline-transparent -outline-offset-2 outline-2 pointer-events-none"
+      class="lg-node pointer-events-none absolute rounded-2xl border border-solid border-node-component-border bg-node-component-surface outline-2 -outline-offset-2 outline-transparent"
     >
       <NodeHeader :node-data="nodeData" :readonly="readonly" />
 
-      <div class="bg-node-component-border h-px mx-0 w-full mb-4" />
+      <div class="mx-0 mb-4 h-px w-full bg-node-component-border" />
 
       <div class="flex flex-col gap-4 pb-4">
         <NodeSlots
diff --git a/src/renderer/extensions/vueNodes/components/LODFallback.vue b/src/renderer/extensions/vueNodes/components/LODFallback.vue
index ed894c5c20..fcf7ae7a0d 100644
--- a/src/renderer/extensions/vueNodes/components/LODFallback.vue
+++ b/src/renderer/extensions/vueNodes/components/LODFallback.vue
@@ -1,5 +1,5 @@
 <template>
   <div
-    class="lod-fallback absolute inset-0 w-full h-full bg-node-component-widget-skeleton-surface"
+    class="lod-fallback absolute inset-0 h-full w-full bg-node-component-widget-skeleton-surface"
   ></div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
index 0b5b00a479..81165724a1 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+  <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ $t('Node Content Error') }}
   </div>
   <div v-else class="lg-node-content">
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index f242733e8b..231aad3ffe 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="renderError" class="node-error p-4 text-red-500 text-sm">
+  <div v-if="renderError" class="node-error p-4 text-sm text-red-500">
     {{ $t('Node Header Error') }}
   </div>
   <div
@@ -17,7 +17,7 @@
     <div class="flex items-center justify-between gap-2.5">
       <!-- Collapse/Expand Button -->
       <div class="relative flex items-center gap-2.5">
-        <div class="flex items-center lod-toggle shrink-0 px-0.5">
+        <div class="lod-toggle flex shrink-0 items-center px-0.5">
           <IconButton
             size="fit-content"
             type="transparent"
@@ -32,7 +32,7 @@
                   collapsed && '-rotate-90'
                 )
               "
-              class="text-xs leading-none relative top-px text-node-component-header-icon"
+              class="relative top-px text-xs leading-none text-node-component-header-icon"
             ></i>
           </IconButton>
         </div>
@@ -40,7 +40,7 @@
         <!-- Node Title -->
         <div
           v-tooltip.top="tooltipConfig"
-          class="text-sm font-bold truncate flex-1 lod-toggle flex items-center gap-2"
+          class="lod-toggle flex flex-1 items-center gap-2 truncate text-sm font-bold"
           data-testid="node-title"
         >
           <EditableText
@@ -59,7 +59,7 @@
         <LODFallback />
       </div>
 
-      <div class="flex items-center lod-toggle shrink-0">
+      <div class="lod-toggle flex shrink-0 items-center">
         <IconButton
           v-if="isSubgraphNode"
           v-tooltip.top="enterSubgraphTooltipConfig"
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
index df2adc60e4..e341e50bb4 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+  <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ $t('Node Slots Error') }}
   </div>
   <div v-else class="lg-node-slots flex justify-between">
@@ -14,7 +14,7 @@
       />
     </div>
 
-    <div v-if="nodeData?.outputs?.length" class="flex flex-col gap-1 ml-auto">
+    <div v-if="nodeData?.outputs?.length" class="ml-auto flex flex-col gap-1">
       <OutputSlot
         v-for="(output, index) in nodeData.outputs"
         :key="`output-${index}`"
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 463641f3a6..b39ada64cd 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+  <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ $t('Node Widgets Error') }}
   </div>
   <div
@@ -19,12 +19,12 @@
     <div
       v-for="(widget, index) in processedWidgets"
       :key="`widget-${index}-${widget.name}`"
-      class="lg-widget-container flex items-center group"
+      class="lg-widget-container group flex items-center"
     >
       <!-- Widget Input Slot Dot -->
 
       <div
-        class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+        class="opacity-0 transition-opacity duration-150 group-hover:opacity-100"
       >
         <InputSlot
           :slot-data="{
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 726f5c4aed..5d6e11273b 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <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">
       <!-- Slot Name -->
       <span
         v-if="!dotOnly"
-        class="whitespace-nowrap text-sm font-normal text-node-component-slot-text lod-toggle"
+        class="lod-toggle text-sm font-normal whitespace-nowrap text-node-component-slot-text"
       >
         {{ slotData.localized_name || slotData.name || `Output ${index}` }}
       </span>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index 39104f545d..77ec2fc870 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <div
-      class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
+      class="max-h-[48rem] rounded border border-gray-300 p-4 dark-theme:border-gray-600"
     >
       <Chart :type="chartType" :data="chartData" :options="chartOptions" />
     </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index 105e0f4a44..1e29b23aa9 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -9,7 +9,7 @@
       <ColorPicker
         v-model="localValue"
         v-bind="filteredProps"
-        class="w-8 h-4 !rounded-full overflow-hidden border-none"
+        class="h-4 w-8 overflow-hidden !rounded-full border-none"
         :pt="{
           preview: '!w-full !h-full !border-none'
         }"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 2126a53cfc..65bf2849f9 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -7,10 +7,10 @@
     style="width: calc(100% + 1rem)"
   >
     <!-- Select section above image -->
-    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+    <div class="mb-2 flex items-center justify-between gap-4 px-2">
       <label
         v-if="widget.name"
-        class="text-xs opacity-80 min-w-[4em] truncate"
+        class="min-w-[4em] truncate text-xs opacity-80"
         >{{ widget.name }}</label
       >
       <!-- Group select and folder button together on the right -->
@@ -21,7 +21,7 @@
           :options="[selectedFile?.name || '']"
           :disabled="true"
           v-bind="transformCompatProps"
-          class="min-w-[8em] max-w-[20em] text-xs"
+          class="max-w-[20em] min-w-[8em] text-xs"
           size="small"
           :pt="{
             option: 'text-xs'
@@ -30,7 +30,7 @@
         <Button
           icon="pi pi-folder"
           size="small"
-          class="!w-8 !h-8"
+          class="!h-8 !w-8"
           @click="triggerFileInput"
         />
       </div>
@@ -38,31 +38,31 @@
 
     <!-- Image preview -->
     <!-- TODO: change hardcoded colors when design system incorporated -->
-    <div class="relative group">
-      <img :src="imageUrl" :alt="selectedFile?.name" class="w-full h-auto" />
+    <div class="group relative">
+      <img :src="imageUrl" :alt="selectedFile?.name" class="h-auto w-full" />
       <!-- Darkening overlay on hover -->
       <div
-        class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 pointer-events-none"
+        class="bg-opacity-0 group-hover:bg-opacity-20 pointer-events-none absolute inset-0 bg-black transition-all duration-200"
       />
       <!-- Control buttons in top right on hover -->
       <div
-        class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+        class="absolute top-2 right-2 flex gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
       >
         <!-- Edit button -->
         <button
-          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
           style="background-color: #262729"
           @click="handleEdit"
         >
-          <i class="pi pi-pencil text-white text-xs"></i>
+          <i class="pi pi-pencil text-xs text-white"></i>
         </button>
         <!-- Delete button -->
         <button
-          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
           style="background-color: #262729"
           @click="clearFile"
         >
-          <i class="pi pi-times text-white text-xs"></i>
+          <i class="pi pi-times text-xs text-white"></i>
         </button>
       </div>
     </div>
@@ -75,10 +75,10 @@
     style="width: calc(100% + 1rem)"
   >
     <!-- Select section above audio player -->
-    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+    <div class="mb-2 flex items-center justify-between gap-4 px-2">
       <label
         v-if="widget.name"
-        class="text-xs opacity-80 min-w-[4em] truncate"
+        class="min-w-[4em] truncate text-xs opacity-80"
         >{{ widget.name }}</label
       >
       <!-- Group select and folder button together on the right -->
@@ -88,7 +88,7 @@
           :options="[selectedFile?.name || '']"
           :disabled="true"
           v-bind="transformCompatProps"
-          class="min-w-[8em] max-w-[20em] text-xs"
+          class="max-w-[20em] min-w-[8em] text-xs"
           size="small"
           :pt="{
             option: 'text-xs'
@@ -97,16 +97,16 @@
         <Button
           icon="pi pi-folder"
           size="small"
-          class="!w-8 !h-8"
+          class="!h-8 !w-8"
           @click="triggerFileInput"
         />
       </div>
     </div>
 
     <!-- Audio player -->
-    <div class="relative group px-2">
+    <div class="group relative px-2">
       <div
-        class="bg-[#1a1b1e] rounded-lg p-4 flex items-center gap-4"
+        class="flex items-center gap-4 rounded-lg bg-[#1a1b1e] p-4"
         style="border: 1px solid #262729"
       >
         <!-- Audio icon -->
@@ -116,7 +116,7 @@
 
         <!-- File info and controls -->
         <div class="flex-1">
-          <div class="text-sm font-medium mb-1">{{ selectedFile?.name }}</div>
+          <div class="mb-1 text-sm font-medium">{{ selectedFile?.name }}</div>
           <div class="text-xs opacity-60">
             {{
               selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
@@ -128,10 +128,10 @@
         <div class="flex gap-1">
           <!-- Delete button -->
           <button
-            class="w-8 h-8 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none hover:bg-[#262729]"
+            class="flex h-8 w-8 items-center justify-center rounded border-none transition-all duration-150 hover:bg-[#262729] focus:outline-none"
             @click="clearFile"
           >
-            <i class="pi pi-times text-white text-sm"></i>
+            <i class="pi pi-times text-sm text-white"></i>
           </button>
         </div>
       </div>
@@ -141,14 +141,14 @@
   <!-- Show normal file upload UI when no image or audio is loaded -->
   <div
     v-else
-    class="flex flex-col gap-1 w-full border border-solid p-1 rounded-lg"
+    class="flex w-full flex-col gap-1 rounded-lg border border-solid p-1"
     :style="{ borderColor: '#262729' }"
   >
     <div
-      class="border border-dashed p-1 rounded-md transition-colors duration-200 hover:border-slate-300"
+      class="rounded-md border border-dashed p-1 transition-colors duration-200 hover:border-slate-300"
       :style="{ borderColor: '#262729' }"
     >
-      <div class="flex flex-col items-center gap-2 w-full py-4">
+      <div class="flex w-full flex-col items-center gap-2 py-4">
         <span class="text-xs opacity-60"> {{ $t('Drop your file or') }} </span>
         <div>
           <Button
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
index 3048eb6187..e32acb7817 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
@@ -29,18 +29,18 @@
             item?.alt ||
             `${t('g.galleryImage')} ${activeIndex + 1} of ${galleryImages.length}`
           "
-          class="w-full h-auto max-h-64 object-contain"
+          class="h-auto max-h-64 w-full object-contain"
         />
       </template>
       <template #thumbnail="{ item }">
-        <div class="p-1 w-full h-full">
+        <div class="h-full w-full p-1">
           <img
             :src="item?.thumbnailImageSrc || item?.src || ''"
             :alt="
               item?.alt ||
               `${t('g.galleryThumbnail')} ${galleryImages.findIndex((img) => img === item) + 1} of ${galleryImages.length}`
             "
-            class="w-full h-full object-cover rounded-lg"
+            class="h-full w-full rounded-lg object-cover"
           />
         </div>
       </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
index 83b3aa2858..34516a120e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
@@ -11,14 +11,14 @@
       <img
         :src="beforeImage"
         :alt="beforeAlt"
-        class="w-full h-full object-cover"
+        class="h-full w-full object-cover"
       />
     </template>
     <template #right>
       <img
         :src="afterImage"
         :alt="afterAlt"
-        class="w-full h-full object-cover"
+        class="h-full w-full object-cover"
       />
     </template>
   </ImageCompare>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index 7288d29466..0b4097bc37 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -5,7 +5,7 @@
   >
     <!-- Display mode: Rendered markdown -->
     <div
-      class="comfy-markdown-content hover:bg-[var(--p-content-hover-background)] text-sm min-h-[60px] w-full rounded-lg px-4 py-2 overflow-y-auto lod-toggle"
+      class="comfy-markdown-content lod-toggle min-h-[60px] w-full overflow-y-auto rounded-lg px-4 py-2 text-sm hover:bg-[var(--p-content-hover-background)]"
       :class="isEditing === false ? 'visible' : 'invisible'"
       v-html="renderedHtml"
     />
@@ -15,7 +15,7 @@
       v-show="isEditing"
       ref="textareaRef"
       v-model="localValue"
-      class="w-full min-h-[60px] absolute inset-0 resize-none"
+      class="absolute inset-0 min-h-[60px] w-full resize-none"
       :pt="{
         root: {
           class: 'text-sm w-full h-full',
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 b27cc705ab..6424589d66 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
@@ -65,7 +65,7 @@ const theButtonStyle = computed(() =>
       "
       @click="emit('select-click', $event)"
     >
-      <span class="px-4 py-2 min-w-0 text-left">
+      <span class="min-w-0 px-4 py-2 text-left">
         <span v-if="!selectedItems.length" class="min-w-0">
           {{ props.placeholder }}
         </span>
@@ -89,7 +89,7 @@ const theButtonStyle = computed(() =>
       <i class="icon-[lucide--folder-search] size-4" />
       <input
         type="file"
-        class="opacity-0 absolute inset-0 -z-1"
+        class="absolute inset-0 -z-1 opacity-0"
         :multiple="maxSelectable > 1"
         :disabled="disabled"
         :accept="accept"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
index fae86ebb90..b9f57398a0 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -36,7 +36,7 @@ const searchQuery = defineModel<string>('searchQuery')
 
 <template>
   <div
-    class="w-103 max-h-[640px] pt-4 bg-node-component-surface rounded-lg outline outline-offset-[-1px] outline-node-component-border flex flex-col"
+    class="flex max-h-[640px] w-103 flex-col rounded-lg bg-node-component-surface pt-4 outline outline-offset-[-1px] outline-node-component-border"
   >
     <!-- Filter -->
     <FormDropdownMenuFilter
@@ -53,7 +53,7 @@ const searchQuery = defineModel<string>('searchQuery')
       :is-querying="isQuerying"
     />
     <!-- List -->
-    <div class="flex overflow-hidden relative h-full">
+    <div class="relative flex h-full overflow-hidden">
       <div
         :class="
           cn(
@@ -67,11 +67,11 @@ const searchQuery = defineModel<string>('searchQuery')
         "
       >
         <div
-          class="absolute top-0 inset-x-3 h-5 bg-gradient-to-b from-backdrop to-transparent pointer-events-none z-10"
+          class="pointer-events-none absolute inset-x-3 top-0 z-10 h-5 bg-gradient-to-b from-backdrop to-transparent"
         />
         <div
           v-if="items.length === 0"
-          class="flex justify-center items-center absolute inset-0"
+          class="absolute inset-0 flex items-center justify-center"
         >
           <i
             title="No items"
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 9350d9e561..d70ab0e7b3 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -44,7 +44,7 @@ function handleSortSelected(item: SortOption) {
 </script>
 
 <template>
-  <div class="flex gap-2 text-zinc-400 px-4">
+  <div class="flex gap-2 px-4 text-zinc-400">
     <label
       :class="
         cn(
@@ -58,9 +58,9 @@ function handleSortSelected(item: SortOption) {
     >
       <i
         v-if="isQuerying"
-        class="icon-[lucide--loader-circle] mr-2 size-4 animate-spin"
+        class="mr-2 icon-[lucide--loader-circle] size-4 animate-spin"
       />
-      <i v-else class="icon-[lucide--search] mr-2 size-4" />
+      <i v-else class="mr-2 icon-[lucide--search] size-4" />
       <input
         v-model="searchQuery"
         type="text"
@@ -85,7 +85,7 @@ function handleSortSelected(item: SortOption) {
     >
       <div
         v-if="sortSelected !== 'default'"
-        class="size-2 absolute top-[-2px] left-[-2px] bg-blue-500 rounded-full"
+        class="absolute top-[-2px] left-[-2px] size-2 rounded-full bg-blue-500"
       />
       <i class="icon-[lucide--arrow-up-down] size-4" />
     </button>
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 19a9bb9073..d047fa2c06 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -11,7 +11,7 @@ const filterSelected = defineModel<OptionId>('filterSelected')
 </script>
 
 <template>
-  <div class="flex gap-1 text-zinc-400 px-4 mb-4">
+  <div class="mb-4 flex gap-1 px-4 text-zinc-400">
     <div
       v-for="option in filterOptions"
       :key="option.id"
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 c172f6b235..22cf1fd0f3 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
@@ -92,10 +92,10 @@ function handleVideoLoad(event: Event) {
       <!-- Selected Icon -->
       <div
         v-if="selected"
-        class="rounded-full bg-blue-500 border-1 border-white size-4 absolute top-1 left-1"
+        class="absolute top-1 left-1 size-4 rounded-full border-1 border-white bg-blue-500"
       >
         <i
-          class="icon-[lucide--check] size-3 text-white -translate-y-[0.5px]"
+          class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-white"
         />
       </div>
       <video
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 22653dd40c..02f5e6857e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -12,12 +12,12 @@ defineProps<{
 
 <template>
   <div
-    class="flex items-center justify-between gap-2 h-[30px] overscroll-contain"
+    class="flex h-[30px] items-center justify-between gap-2 overscroll-contain"
   >
-    <div class="relative h-6 flex items-center mr-4">
+    <div class="relative mr-4 flex h-6 items-center">
       <p
         v-if="widget.name"
-        class="text-sm text-node-component-slot-text font-normal flex-1 truncate w-20 lod-toggle"
+        class="lod-toggle w-20 flex-1 truncate text-sm font-normal text-node-component-slot-text"
       >
         {{ widget.label || widget.name }}
       </p>
@@ -25,7 +25,7 @@ defineProps<{
     </div>
     <div class="relative">
       <div
-        class="w-75 cursor-default lod-toggle"
+        class="lod-toggle w-75 cursor-default"
         @pointerdown.stop="noop"
         @pointermove.stop="noop"
         @pointerup.stop="noop"
diff --git a/src/views/UserSelectView.vue b/src/views/UserSelectView.vue
index 46e9ca75c2..8499fa846c 100644
--- a/src/views/UserSelectView.vue
+++ b/src/views/UserSelectView.vue
@@ -2,7 +2,7 @@
   <BaseViewTemplate dark>
     <main
       id="comfy-user-selection"
-      class="min-w-84 relative rounded-lg bg-(--comfy-menu-bg) p-5 px-10 shadow-lg"
+      class="relative min-w-84 rounded-lg bg-(--comfy-menu-bg) p-5 px-10 shadow-lg"
     >
       <h1 class="my-2.5 mb-7 font-normal">ComfyUI</h1>
       <div class="flex w-full flex-col items-center">
diff --git a/src/views/layouts/LayoutDefault.vue b/src/views/layouts/LayoutDefault.vue
index 748e4c249a..cbe0e34083 100644
--- a/src/views/layouts/LayoutDefault.vue
+++ b/src/views/layouts/LayoutDefault.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="w-full h-full overflow-hidden relative">
+  <main class="relative h-full w-full overflow-hidden">
     <router-view />
   </main>
 </template>
diff --git a/src/views/templates/BaseViewTemplate.vue b/src/views/templates/BaseViewTemplate.vue
index 21cdcd9a5c..8e20b3ee22 100644
--- a/src/views/templates/BaseViewTemplate.vue
+++ b/src/views/templates/BaseViewTemplate.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    class="font-sans w-screen h-screen flex flex-col"
+    class="flex h-screen w-screen flex-col font-sans"
     :class="[
       dark
-        ? 'text-neutral-300 bg-neutral-900 dark-theme'
-        : 'text-neutral-900 bg-neutral-300'
+        ? 'dark-theme bg-neutral-900 text-neutral-300'
+        : 'bg-neutral-300 text-neutral-900'
     ]"
   >
     <!-- Virtual top menu for native window (drag handle) -->
     <div
       v-show="isNativeWindow()"
       ref="topMenuRef"
-      class="app-drag w-full h-(--comfy-topbar-height)"
+      class="app-drag h-(--comfy-topbar-height) w-full"
     />
-    <div class="grow w-full flex items-center justify-center overflow-auto">
+    <div class="flex w-full grow items-center justify-center overflow-auto">
       <slot />
     </div>
   </div>
diff --git a/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
index 613d1e2a79..97fafd43d6 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
@@ -3,12 +3,12 @@
     class="overflow-hidden transition-all duration-300"
     :class="{
       'max-h-[500px]': isExpanded,
-      'max-h-0 p-0 m-0': !isExpanded
+      'm-0 max-h-0 p-0': !isExpanded
     }"
   >
     <div
       ref="sectionsContainerRef"
-      class="px-6 py-4 overflow-y-auto max-h-[450px] scroll-container"
+      class="scroll-container max-h-[450px] overflow-y-auto px-6 py-4"
       :style="{
         scrollbarWidth: 'thin',
         scrollbarColor: 'rgba(156, 163, 175, 0.5) transparent'
@@ -22,11 +22,11 @@
         <Panel
           :expanded="collapsedPanels[index] === true"
           toggleable
-          class="shadow-elevation-1 rounded-lg mt-2 dark-theme:bg-black dark-theme:border-black"
+          class="shadow-elevation-1 mt-2 rounded-lg dark-theme:border-black dark-theme:bg-black"
         >
           <template #header>
-            <div class="flex items-center justify-between w-full py-2">
-              <div class="flex flex-col text-sm font-medium leading-normal">
+            <div class="flex w-full items-center justify-between py-2">
+              <div class="flex flex-col text-sm leading-normal font-medium">
                 <span>{{ log.taskName }}</span>
                 <span class="text-muted">
                   {{
@@ -56,7 +56,7 @@
                 ? (el) => (lastPanelRef = el as HTMLElement)
                 : undefined
             "
-            class="overflow-y-auto h-64 rounded-lg bg-black"
+            class="h-64 overflow-y-auto rounded-lg bg-black"
             :class="{
               'h-64': index !== focusedLogs.length - 1,
               grow: index === focusedLogs.length - 1
@@ -69,7 +69,7 @@
                 :key="logIndex"
                 class="text-neutral-400 dark-theme:text-muted"
               >
-                <pre class="whitespace-pre-wrap break-words">{{ logLine }}</pre>
+                <pre class="break-words whitespace-pre-wrap">{{ logLine }}</pre>
               </div>
             </div>
           </div>
diff --git a/src/workbench/extensions/manager/components/ManagerProgressFooter.vue b/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
index cd51c0ceb7..e008d95e9a 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full px-6 py-2 shadow-lg flex items-center justify-between"
+    class="flex w-full items-center justify-between px-6 py-2 shadow-lg"
     :class="{
       'rounded-t-none': progressDialogContent.isExpanded,
       'rounded-lg': !progressDialogContent.isExpanded
@@ -32,7 +32,7 @@
           v-if="!isInProgress && !isRestartCompleted"
           rounded
           outlined
-          class="mr-4 rounded-md border-2 px-3 text-neutral-600 border-neutral-900 hover:bg-neutral-100 !dark-theme:bg-transparent dark-theme:text-white dark-theme:border-white dark-theme:hover:bg-neutral-800"
+          class="!dark-theme:bg-transparent mr-4 rounded-md border-2 border-neutral-900 px-3 text-neutral-600 hover:bg-neutral-100 dark-theme:border-white dark-theme:text-white dark-theme:hover:bg-neutral-800"
           @click="handleRestart"
         >
           {{ $t('manager.applyChanges') }}
diff --git a/src/workbench/extensions/manager/components/ManagerProgressHeader.vue b/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
index 841119cd09..686d43436e 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="progressDialogContent.isExpanded"
-    class="px-4 py-2 flex items-center"
+    class="flex items-center px-4 py-2"
   >
     <TabMenu
       v-model:active-index="activeTabIndex"
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
index 61047c8b46..91e021f69a 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-full flex flex-col mx-auto overflow-hidden"
+    class="mx-auto flex h-full flex-col overflow-hidden"
     :aria-label="$t('manager.title')"
   >
     <ContentDivider :width="0.3" />
@@ -9,11 +9,11 @@
       :icon="isSideNavOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right'"
       severity="secondary"
       filled
-      class="absolute top-1/2 -translate-y-1/2 z-10"
+      class="absolute top-1/2 z-10 -translate-y-1/2"
       :class="isSideNavOpen ? 'left-[12rem]' : 'left-2'"
       @click="toggleSideNav"
     />
-    <div class="flex flex-1 relative overflow-hidden">
+    <div class="relative flex flex-1 overflow-hidden">
       <ManagerNavSidebar
         v-if="isSideNavOpen"
         v-model:selected-tab="selectedTab"
@@ -25,22 +25,22 @@
           'transition-all duration-300': isSmallScreen
         }"
       >
-        <div class="px-6 flex flex-col h-full">
+        <div class="flex h-full flex-col px-6">
           <!-- Conflict Warning Banner -->
           <div
             v-if="shouldShowManagerBanner"
-            class="bg-yellow-500/20 rounded-lg p-4 mt-3 mb-4 flex items-center gap-6 relative"
+            class="relative mt-3 mb-4 flex items-center gap-6 rounded-lg bg-yellow-500/20 p-4"
           >
-            <i class="pi pi-exclamation-triangle text-yellow-600 text-lg"></i>
-            <div class="flex flex-col gap-2 flex-1">
-              <p class="text-sm font-bold m-0">
+            <i class="pi pi-exclamation-triangle text-lg text-yellow-600"></i>
+            <div class="flex flex-1 flex-col gap-2">
+              <p class="m-0 text-sm font-bold">
                 {{ $t('manager.conflicts.warningBanner.title') }}
               </p>
-              <p class="text-xs m-0">
+              <p class="m-0 text-xs">
                 {{ $t('manager.conflicts.warningBanner.message') }}
               </p>
               <p
-                class="text-sm font-bold m-0 cursor-pointer"
+                class="m-0 cursor-pointer text-sm font-bold"
                 @click="onClickWarningLink"
               >
                 {{ $t('manager.conflicts.warningBanner.button') }}
@@ -52,7 +52,7 @@
               @click="dismissWarningBanner"
             >
               <i
-                class="pi pi-times text-neutral-900 dark-theme:text-white text-xs"
+                class="pi pi-times text-xs text-neutral-900 dark-theme:text-white"
               ></i>
             </IconButton>
           </div>
@@ -69,7 +69,7 @@
           <div class="flex-1 overflow-auto">
             <div
               v-if="isLoading"
-              class="w-full h-full overflow-auto scrollbar-hide"
+              class="h-full scrollbar-hide w-full overflow-auto"
             >
               <GridSkeleton :grid-style="GRID_STYLE" :skeleton-card-count />
             </div>
@@ -110,9 +110,9 @@
           </div>
         </div>
       </div>
-      <div class="w-[clamp(250px,33%,306px)] border-l-0 flex z-20">
+      <div class="z-20 flex w-[clamp(250px,33%,306px)] border-l-0">
         <ContentDivider orientation="vertical" :width="0.2" />
-        <div class="w-full flex flex-col isolate">
+        <div class="isolate flex w-full flex-col">
           <InfoPanel
             v-if="!hasMultipleSelections && selectedNodePack"
             :node-pack="selectedNodePack"
diff --git a/src/workbench/extensions/manager/components/manager/ManagerHeader.vue b/src/workbench/extensions/manager/components/manager/ManagerHeader.vue
index 054f1fbf42..dbffd6c459 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerHeader.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <div class="flex items-center">
-      <h2 class="text-lg font-normal text-left">
+      <h2 class="text-left text-lg font-normal">
         {{ $t('manager.discoverCommunityContent') }}
       </h2>
     </div>
diff --git a/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue b/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
index 0e643b445f..571b22ecf5 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <aside
-    class="flex translate-x-0 max-w-[250px] w-3/12 z-5 transition-transform duration-300 ease-in-out"
+    class="z-5 flex w-3/12 max-w-[250px] translate-x-0 transition-transform duration-300 ease-in-out"
   >
     <ScrollPanel class="flex-1">
       <Listbox
@@ -16,8 +16,8 @@
         }"
       >
         <template #option="slotProps">
-          <div class="text-left flex items-center">
-            <i :class="['pi', slotProps.option.icon, 'text-sm mr-2']" />
+          <div class="flex items-center text-left">
+            <i :class="['pi', slotProps.option.icon, 'mr-2 text-sm']" />
             <span class="text-sm">{{ slotProps.option.label }}</span>
           </div>
         </template>
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index bce7cb901b..1425a21c4a 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="w-[552px] flex flex-col">
+  <div class="flex w-[552px] flex-col">
     <ContentDivider :width="1" />
-    <div class="px-4 py-6 w-full h-full flex flex-col gap-2">
+    <div class="flex h-full w-full flex-col gap-2 px-4 py-6">
       <!-- Description -->
       <div v-if="showAfterWhatsNew">
         <p
-          class="text-sm leading-4 text-neutral-800 dark-theme:text-white m-0 mb-4"
+          class="m-0 mb-4 text-sm leading-4 text-neutral-800 dark-theme:text-white"
         >
           {{ $t('manager.conflicts.description') }}
           <br /><br />
@@ -16,15 +16,16 @@
       <!-- Import Failed List Wrapper -->
       <div
         v-if="importFailedConflicts.length > 0"
-        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
       >
         <div
-          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          data-testid="conflict-dialog-panel-toggle"
+          class="flex h-8 w-full items-center justify-between gap-2 pl-4"
           @click="toggleImportFailedPanel"
         >
-          <div class="flex-1 flex">
+          <div class="flex flex-1">
             <span
-              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
               >{{ importFailedConflicts.length }}</span
             >
             <span
@@ -40,19 +41,20 @@
                   : 'pi pi-chevron-right text-xs'
               "
               text
-              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+              class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
             />
           </div>
         </div>
         <!-- Import failed list -->
         <div
           v-if="importFailedExpanded"
-          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+          data-testid="conflict-dialog-panel-expanded"
+          class="flex max-h-[142px] scrollbar-hide flex-col gap-2.5 overflow-y-auto px-4 py-2"
         >
           <div
             v-for="(packageName, i) in importFailedConflicts"
             :key="i"
-            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+            class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
             <span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
               {{ packageName }}
@@ -63,15 +65,16 @@
       </div>
       <!-- Conflict List Wrapper -->
       <div
-        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
       >
         <div
-          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          data-testid="conflict-dialog-panel-toggle"
+          class="flex h-8 w-full items-center justify-between gap-2 pl-4"
           @click="toggleConflictsPanel"
         >
-          <div class="flex-1 flex">
+          <div class="flex flex-1">
             <span
-              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
               >{{ allConflictDetails.length }}</span
             >
             <span
@@ -87,19 +90,20 @@
                   : 'pi pi-chevron-right text-xs'
               "
               text
-              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+              class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
             />
           </div>
         </div>
         <!-- Conflicts list -->
         <div
           v-if="conflictsExpanded"
-          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+          data-testid="conflict-dialog-panel-expanded"
+          class="flex max-h-[142px] scrollbar-hide flex-col gap-2.5 overflow-y-auto px-4 py-2"
         >
           <div
             v-for="(conflict, i) in allConflictDetails"
             :key="i"
-            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+            class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
             <span
               class="text-xs text-neutral-600 dark-theme:text-neutral-300"
@@ -111,15 +115,16 @@
       </div>
       <!-- Extension List Wrapper -->
       <div
-        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+        class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
       >
         <div
-          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          data-testid="conflict-dialog-panel-toggle"
+          class="flex h-8 w-full items-center justify-between gap-2 pl-4"
           @click="toggleExtensionsPanel"
         >
-          <div class="flex-1 flex">
+          <div class="flex flex-1">
             <span
-              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
               >{{ conflictData.length }}</span
             >
             <span
@@ -135,19 +140,20 @@
                   : 'pi pi-chevron-right text-xs'
               "
               text
-              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+              class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
             />
           </div>
         </div>
         <!-- Extension list -->
         <div
           v-if="extensionsExpanded"
-          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+          data-testid="conflict-dialog-panel-expanded"
+          class="flex max-h-[142px] scrollbar-hide flex-col gap-2.5 overflow-y-auto px-4 py-2"
         >
           <div
             v-for="conflictResult in conflictData"
             :key="conflictResult.package_id"
-            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+            class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
           >
             <span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
               {{ conflictResult.package_name }}
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue b/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue
index c76f779080..2b4ab4c94f 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex items-center justify-between w-full px-3 py-4">
-    <div class="w-full flex items-center justify-between gap-2 pr-1">
+  <div class="flex w-full items-center justify-between px-3 py-4">
+    <div class="flex w-full items-center justify-between gap-2 pr-1">
       <Button
         :label="$t('manager.conflicts.conflictInfoTitle')"
         text
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue b/src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue
index 70e30d129e..368a1229fb 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-12 flex items-center justify-between w-full pl-6">
+  <div class="flex h-12 w-full items-center justify-between pl-6">
     <div class="flex items-center gap-2">
       <!-- Warning Icon -->
       <i class="pi pi-exclamation-triangle text-lg"></i>
diff --git a/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue b/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
index 6f7a1ec3a1..25c9019e9b 100644
--- a/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
+++ b/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
@@ -1,14 +1,14 @@
 <template>
   <Message
     :severity="statusSeverity"
-    class="p-0 flex items-center rounded-xl break-words w-fit"
+    class="flex w-fit items-center rounded-xl p-0 break-words"
     :pt="{
       text: { class: 'text-xs' },
       content: { class: 'px-2 py-0.5' }
     }"
   >
     <i
-      class="pi pi-circle-fill mr-1.5 text-[0.6rem] p-0"
+      class="pi pi-circle-fill mr-1.5 p-0 text-[0.6rem]"
       :style="{ opacity: 0.8 }"
     />
     {{ $t(`manager.status.${statusLabel}`) }}
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue b/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
index 440a886af2..6c59af95d6 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
@@ -4,7 +4,7 @@
       v-tooltip.top="
         isDisabled ? $t('manager.enablePackToChangeVersion') : null
       "
-      class="inline-flex items-center gap-1 rounded-2xl text-xs py-1"
+      class="inline-flex items-center gap-1 rounded-2xl py-1 text-xs"
       :class="{
         'bg-dialog-surface px-1.5': fill,
         'cursor-pointer': !isDisabled,
@@ -19,7 +19,7 @@
     >
       <i
         v-if="isUpdateAvailable"
-        class="pi pi-arrow-circle-up text-blue-600 text-xs"
+        class="pi pi-arrow-circle-up text-xs text-blue-600"
       />
       <span>{{ installedVersion }}</span>
       <i v-if="!isDisabled" class="pi pi-chevron-right text-xxs" />
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
index e5d1876e98..3ea7b15e3e 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="w-64 pt-1">
     <div class="py-2">
-      <span class="pl-3 text-md font-semibold text-neutral-500">
+      <span class="text-md pl-3 font-semibold text-neutral-500">
         {{ $t('manager.selectVersion') }}
       </span>
     </div>
     <div
       v-if="isLoadingVersions || isQueueing"
-      class="text-center text-muted py-4 flex flex-col items-center"
+      class="flex flex-col items-center py-4 text-center text-muted"
     >
-      <ProgressSpinner class="w-8 h-8 mb-2" />
+      <ProgressSpinner class="mb-2 h-8 w-8" />
       {{ $t('manager.loadingVersions') }}
     </div>
     <div v-else-if="versionOptions.length === 0" class="py-2">
@@ -27,13 +27,13 @@
       option-value="value"
       :options="processedVersionOptions"
       :highlight-on-select="false"
-      class="w-full max-h-[50vh] border-none shadow-none rounded-md"
+      class="max-h-[50vh] w-full rounded-md border-none shadow-none"
       :pt="{
         listContainer: { class: 'scrollbar-hide' }
       }"
     >
       <template #option="slotProps">
-        <div class="flex justify-between items-center w-full p-1">
+        <div class="flex w-full items-center justify-between p-1">
           <div class="flex items-center gap-2">
             <template v-if="slotProps.option.value === 'nightly'">
               <div class="w-4"></div>
@@ -59,7 +59,7 @@
       </template>
     </Listbox>
     <ContentDivider class="my-2" />
-    <div class="flex justify-end gap-2 py-1 px-3">
+    <div class="flex justify-end gap-2 px-3 py-1">
       <Button
         text
         class="text-sm"
@@ -71,7 +71,7 @@
       <Button
         severity="secondary"
         :label="$t('g.install')"
-        class="py-2.5 px-4 text-sm dark-theme:bg-unset bg-black/80 dark-theme:text-unset text-neutral-100 rounded-lg"
+        class="dark-theme:bg-unset dark-theme:text-unset rounded-lg bg-black/80 px-4 py-2.5 text-sm text-neutral-100"
         :disabled="isQueueing"
         @click="handleSubmit"
       />
diff --git a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
index f95af0c0b1..756e5a6072 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
@@ -6,10 +6,10 @@
         value: $t('manager.conflicts.warningTooltip'),
         showDelay: 300
       }"
-      class="flex items-center justify-center w-6 h-6 cursor-pointer"
+      class="flex h-6 w-6 cursor-pointer items-center justify-center"
       @click="showConflictModal(true)"
     >
-      <i class="pi pi-exclamation-triangle text-yellow-500 text-xl"></i>
+      <i class="pi pi-exclamation-triangle text-xl text-yellow-500"></i>
     </div>
     <ToggleSwitch
       v-if="!canToggleDirectly"
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
index 8696e837d4..16a712792f 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-if="nodePack">
-    <div class="flex flex-col h-full z-40 overflow-hidden relative">
-      <div class="top-0 z-10 px-6 pt-6 w-full">
+    <div class="relative z-40 flex h-full flex-col overflow-hidden">
+      <div class="top-0 z-10 w-full px-6 pt-6">
         <InfoPanelHeader
           :node-packs="[nodePack]"
           :has-conflict="hasCompatibilityIssues"
@@ -9,7 +9,7 @@
       </div>
       <div
         ref="scrollContainer"
-        class="p-6 pt-2 overflow-y-auto flex-1 text-sm scrollbar-hide"
+        class="scrollbar-hide flex-1 overflow-y-auto p-6 pt-2 text-sm"
       >
         <div class="mb-6">
           <MetadataRow
@@ -53,7 +53,7 @@
     </div>
   </template>
   <template v-else>
-    <div class="pt-4 px-8 flex-1 overflow-hidden text-sm">
+    <div class="flex-1 overflow-hidden px-8 pt-4 text-sm">
       {{ $t('manager.infoPanelEmpty') }}
     </div>
   </template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
index fda685a506..c1be524e9c 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
@@ -4,7 +4,7 @@
       <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
     </slot>
     <h2
-      class="text-2xl font-bold text-center mt-4 mb-2"
+      class="mt-4 mb-2 text-center text-2xl font-bold"
       style="word-break: break-all"
     >
       <slot name="title">
@@ -13,7 +13,7 @@
     </h2>
     <div
       v-if="!importFailed"
-      class="mt-2 mb-4 w-full max-w-xs flex justify-center"
+      class="mt-2 mb-4 flex w-full max-w-xs justify-center"
     >
       <slot name="install-button">
         <PackUninstallButton
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
index 8e5b15d787..26651d535a 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
@@ -1,13 +1,13 @@
 <template>
-  <div v-if="nodePacks?.length" class="flex flex-col h-full">
-    <div class="p-6 flex-1 overflow-auto">
+  <div v-if="nodePacks?.length" class="flex h-full flex-col">
+    <div class="flex-1 overflow-auto p-6">
       <InfoPanelHeader :node-packs>
         <template #thumbnail>
           <PackIconStacked :node-packs="nodePacks" />
         </template>
         <template #title>
           <div class="mt-5">
-            <span class="inline-block mr-2 text-blue-500 text-base">{{
+            <span class="mr-2 inline-block text-base text-blue-500">{{
               nodePacks.length
             }}</span>
             <span class="text-base">{{ $t('manager.packsSelected') }}</span>
@@ -48,7 +48,7 @@
       </div>
     </div>
   </div>
-  <div v-else class="mt-4 mx-8 flex-1 overflow-hidden text-sm">
+  <div v-else class="mx-8 mt-4 flex-1 overflow-hidden text-sm">
     {{ $t('manager.infoPanelEmpty') }}
   </div>
 </template>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
index d07f5e2675..9ee622e81f 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="overflow-hidden">
     <Tabs :value="activeTab">
-      <TabList class="overflow-x-auto scrollbar-hide">
-        <Tab v-if="hasCompatibilityIssues" value="warning" class="p-2 mr-6">
+      <TabList class="scrollbar-hide overflow-x-auto">
+        <Tab v-if="hasCompatibilityIssues" value="warning" class="mr-6 p-2">
           <div class="flex items-center gap-1">
             <span>⚠️</span>
             {{ importFailed ? $t('g.error') : $t('g.warning') }}
           </div>
         </Tab>
-        <Tab value="description" class="p-2 mr-6">
+        <Tab value="description" class="mr-6 p-2">
           {{ $t('g.description') }}
         </Tab>
         <Tab value="nodes" class="p-2">
           {{ $t('g.nodes') }}
         </Tab>
       </TabList>
-      <TabPanels class="overflow-auto py-4 px-2">
+      <TabPanels class="overflow-auto px-2 py-4">
         <TabPanel
           v-if="hasCompatibilityIssues"
           value="warning"
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
index ce78dabb70..3307a140e1 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
@@ -4,7 +4,7 @@
       <div class="mb-3">
         {{ section.title }}
       </div>
-      <div class="text-muted break-words">
+      <div class="break-words text-muted">
         <a
           v-if="section.isUrl"
           :href="section.text"
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
index feca3a07ca..53377f3a6d 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
@@ -16,7 +16,7 @@
         <em v-else-if="segment.type === 'italic'">{{ segment.text }}</em>
         <code
           v-else-if="segment.type === 'code'"
-          class="px-1 py-0.5 rounded text-xs"
+          class="rounded px-1 py-0.5 text-xs"
           >{{ segment.text }}</code
         >
         <span v-else>{{ segment.text }}</span>
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 a1355f5e32..e6b203cd8b 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
@@ -4,7 +4,7 @@
       v-if="nodePack?.description"
       :sections="descriptionSections"
     />
-    <p v-else class="text-muted italic text-sm">
+    <p v-else class="text-sm text-muted italic">
       {{ $t('manager.noDescription') }}
     </p>
     <div v-if="nodePack?.latest_version?.dependencies?.length">
@@ -14,7 +14,7 @@
       <div
         v-for="(dep, index) in nodePack.latest_version.dependencies"
         :key="index"
-        class="text-muted break-words"
+        class="break-words text-muted"
       >
         {{ dep }}
       </div>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
index e832f11266..64cb161459 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
@@ -4,16 +4,16 @@
       <div
         v-for="nodeDef in mappedNodeDefs"
         :key="createNodeDefKey(nodeDef)"
-        class="border rounded-lg p-4"
+        class="rounded-lg border p-4"
       >
-        <NodePreview :node-def="nodeDef" class="text-[.625rem]! min-w-full!" />
+        <NodePreview :node-def="nodeDef" class="min-w-full! text-[.625rem]!" />
       </div>
     </template>
     <template v-else-if="isLoading">
       <ProgressSpinner />
     </template>
     <template v-else-if="nodeNames.length">
-      <div v-for="node in nodeNames" :key="node" class="text-muted truncate">
+      <div v-for="node in nodeNames" :key="node" class="truncate text-muted">
         {{ node }}
       </div>
     </template>
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 a6fbc2c337..853728074e 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -2,21 +2,21 @@
   <div class="flex flex-col gap-3">
     <button
       v-if="importFailedInfo"
-      class="cursor-pointer outline-none border-none inline-flex items-center justify-end bg-transparent gap-1"
+      class="inline-flex cursor-pointer items-center justify-end gap-1 border-none bg-transparent outline-none"
       @click="showImportFailedDialog"
     >
       <i class="pi pi-code text-base"></i>
-      <span class="dark-theme:text-white text-sm">{{
+      <span class="text-sm dark-theme:text-white">{{
         t('serverStart.openLogs')
       }}</span>
     </button>
     <div
       v-for="(conflict, index) in conflictResult?.conflicts || []"
       :key="index"
-      class="p-3 bg-yellow-800/20 rounded-md"
+      class="rounded-md bg-yellow-800/20 p-3"
     >
-      <div class="flex justify-between items-center">
-        <div class="text-sm break-words flex-1">
+      <div class="flex items-center justify-between">
+        <div class="flex-1 text-sm break-words">
           {{ getConflictMessage(conflict, $t) }}
         </div>
       </div>
diff --git a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
index e5b5ea60c9..ffb158fa11 100644
--- a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
+++ b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="w-full aspect-7/3 overflow-hidden">
+  <div class="aspect-7/3 w-full overflow-hidden">
     <!-- default banner show -->
-    <div v-if="showDefaultBanner" class="w-full h-full">
+    <div v-if="showDefaultBanner" class="h-full w-full">
       <img
         :src="DEFAULT_BANNER"
         alt="default banner"
-        class="w-full h-full object-cover"
+        class="h-full w-full object-cover"
       />
     </div>
     <!-- banner_url or icon show -->
-    <div v-else class="relative w-full h-full">
+    <div v-else class="relative h-full w-full">
       <!-- blur background -->
       <div
         v-if="imgSrc"
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
index 266a55e7e8..9013b5e550 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
@@ -1,6 +1,6 @@
 <template>
   <Card
-    class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-lg shadow-elevation-3 dark-theme:bg-dark-elevation-2 transition-all duration-200"
+    class="shadow-elevation-3 inline-flex h-full w-full flex-col items-start justify-between overflow-hidden rounded-lg transition-all duration-200 dark-theme:bg-dark-elevation-2"
     :class="{
       'selected-card': isSelected,
       'opacity-60': isDisabled
@@ -21,21 +21,21 @@
       <PackBanner :node-pack="nodePack" />
     </template>
     <template #content>
-      <div class="pt-4 px-4 pb-3 w-full h-full">
-        <div class="flex flex-col gap-y-1 w-full h-full">
+      <div class="h-full w-full px-4 pt-4 pb-3">
+        <div class="flex h-full w-full flex-col gap-y-1">
           <span
-            class="text-sm font-bold truncate overflow-hidden text-ellipsis"
+            class="truncate overflow-hidden text-sm font-bold text-ellipsis"
           >
             {{ nodePack.name }}
           </span>
           <p
             v-if="nodePack.description"
-            class="flex-1 text-muted text-xs font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-4 mb-1 overflow-hidden"
+            class="my-0 mb-1 line-clamp-3 min-h-12 flex-1 overflow-hidden text-xs leading-4 font-medium break-words text-muted"
           >
             {{ nodePack.description }}
           </p>
           <div class="flex flex-col gap-y-2">
-            <div class="flex-1 flex items-center gap-2">
+            <div class="flex flex-1 items-center gap-2">
               <div v-if="nodesCount" class="p-2 pl-0 text-xs">
                 {{ nodesCount }} {{ $t('g.nodes') }}
               </div>
@@ -47,7 +47,7 @@
               />
               <div
                 v-if="formattedLatestVersionDate"
-                class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
+                class="flex items-center justify-center gap-1 px-2 py-1 text-xs font-medium text-muted"
               >
                 {{ formattedLatestVersionDate }}
               </div>
@@ -55,7 +55,7 @@
             <div class="flex">
               <span
                 v-if="publisherName"
-                class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
+                class="max-w-40 truncate text-xs leading-3 font-medium text-muted"
               >
                 {{ publisherName }}
               </span>
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
index 57e6ccb2c5..733e93bfb9 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="min-h-12 flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
+    class="flex min-h-12 items-center justify-between px-4 py-2 text-xs leading-3 font-medium text-muted"
   >
     <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
       <i class="pi pi-download text-muted"></i>
diff --git a/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
index e0dfc6497e..0d753267a0 100644
--- a/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
+++ b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="w-full max-w-[204] aspect-[2/1] rounded-lg overflow-hidden">
+  <div class="aspect-[2/1] w-full max-w-[204] overflow-hidden rounded-lg">
     <!-- default banner show -->
-    <div v-if="showDefaultBanner" class="w-full h-full">
+    <div v-if="showDefaultBanner" class="h-full w-full">
       <img
         :src="DEFAULT_BANNER"
         alt="default banner"
-        class="w-full h-full object-cover"
+        class="h-full w-full object-cover"
       />
     </div>
     <!-- banner_url or icon show -->
-    <div v-else class="relative w-full h-full">
+    <div v-else class="relative h-full w-full">
       <!-- blur background -->
       <div
         v-if="imgSrc"
diff --git a/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue b/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
index be9a7297ca..0427dfe58b 100644
--- a/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
+++ b/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="relative w-[224px] h-[104px] shadow-xl">
+  <div class="relative h-[104px] w-[224px] shadow-xl">
     <div
       v-for="(pack, index) in nodePacks.slice(0, maxVisible)"
       :key="pack.id"
-      class="absolute w-[210px] h-[90px]"
+      class="absolute h-[90px] w-[210px]"
       :style="{
         bottom: `${index * offset}px`,
         right: `${index * offset}px`,
         zIndex: maxVisible - index
       }"
     >
-      <div class="border rounded-lg shadow-lg p-0.5">
+      <div class="rounded-lg border p-0.5 shadow-lg">
         <PackIcon :node-pack="pack" />
       </div>
     </div>
diff --git a/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue b/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
index 990e4773fc..dbb1150d62 100644
--- a/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative w-full p-6">
-    <div class="h-12 flex items-center gap-1 justify-between">
-      <div class="flex items-center w-5/12">
+    <div class="flex h-12 items-center justify-between gap-1">
+      <div class="flex w-5/12 items-center">
         <AutoComplete
           v-model.lazy="searchQuery"
           :suggestions="suggestions || []"
@@ -38,8 +38,8 @@
         :has-disabled-update-packs="hasDisabledUpdatePacks"
       />
     </div>
-    <div class="flex mt-3 text-sm">
-      <div class="flex gap-6 ml-1">
+    <div class="mt-3 flex text-sm">
+      <div class="ml-1 flex gap-6">
         <SearchFilterDropdown
           v-model:model-value="searchMode"
           :options="filterOptions"
@@ -51,7 +51,7 @@
           :label="$t('g.sort')"
         />
       </div>
-      <div class="flex items-center gap-4 ml-6">
+      <div class="ml-6 flex items-center gap-4">
         <small v-if="hasResults" class="text-color-secondary">
           {{ $t('g.resultsCount', { count: searchResults?.length || 0 }) }}
         </small>
diff --git a/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue b/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
index fd8fbe9648..24e0180d88 100644
--- a/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
+++ b/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="rounded-lg shadow-sm h-full overflow-hidden flex flex-col"
+    class="flex h-full flex-col overflow-hidden rounded-lg shadow-sm"
     data-virtual-grid-item
   >
     <!-- Card header - flush with top, approximately 15% of height -->
-    <div class="w-full px-4 py-3 flex justify-between items-center">
+    <div class="flex w-full items-center justify-between px-4 py-3">
       <div class="flex items-center">
-        <div class="w-6 h-6 flex items-center justify-center">
+        <div class="flex h-6 w-6 items-center justify-center">
           <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
         </div>
         <Skeleton width="5rem" height="1rem" class="ml-2" />
@@ -15,14 +15,14 @@
     </div>
 
     <!-- Card content with icon on left and text on right -->
-    <div class="flex-1 p-4 flex">
+    <div class="flex flex-1 p-4">
       <!-- Left icon - 64x64 -->
-      <div class="shrink-0 mr-4">
+      <div class="mr-4 shrink-0">
         <Skeleton width="4rem" height="4rem" border-radius="0.5rem" />
       </div>
 
       <!-- Right content -->
-      <div class="flex-1 flex flex-col overflow-hidden">
+      <div class="flex flex-1 flex-col overflow-hidden">
         <!-- Title -->
         <Skeleton width="80%" height="1rem" class="mb-2" />
 
@@ -42,7 +42,7 @@
     </div>
 
     <!-- Card footer - similar to header -->
-    <div class="w-full px-5 py-4 flex justify-between items-center">
+    <div class="flex w-full items-center justify-between px-5 py-4">
       <Skeleton width="4rem" height="0.8rem" />
       <Skeleton width="6rem" height="0.8rem" />
     </div>
diff --git a/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts b/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
index bcb4d49543..51a1821a88 100644
--- a/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
+++ b/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
@@ -209,11 +209,13 @@ describe('NodeConflictDialogContent', () => {
       const wrapper = createWrapper()
 
       // Find import failed panel header (first one)
-      const importFailedHeader = wrapper.find('.w-full.h-8.flex.items-center')
+      const importFailedHeader = wrapper.find(
+        '[data-testid="conflict-dialog-panel-toggle"]'
+      )
 
       // Initially collapsed
       expect(
-        wrapper.find('[class*="py-2 px-4 flex flex-col gap-2.5"]').exists()
+        wrapper.find('[data-testid="conflict-dialog-panel-expanded"]').exists()
       ).toBe(false)
 
       // Click to expand import failed panel
@@ -221,7 +223,7 @@ describe('NodeConflictDialogContent', () => {
 
       // Should be expanded now and show package name
       const expandedContent = wrapper.find(
-        '[class*="py-2 px-4 flex flex-col gap-2.5"]'
+        '[data-testid="conflict-dialog-panel-expanded"]'
       )
       expect(expandedContent.exists()).toBe(true)
       expect(expandedContent.text()).toContain('Test Package 3')
@@ -236,7 +238,7 @@ describe('NodeConflictDialogContent', () => {
 
       // Find conflicts panel header (second one)
       const conflictsHeader = wrapper.findAll(
-        '.w-full.h-8.flex.items-center'
+        '[data-testid="conflict-dialog-panel-toggle"]'
       )[1]
 
       // Click to expand conflicts panel
@@ -252,7 +254,7 @@ describe('NodeConflictDialogContent', () => {
 
       // Find extensions panel header (third one)
       const extensionsHeader = wrapper.findAll(
-        '.w-full.h-8.flex.items-center'
+        '[data-testid="conflict-dialog-panel-toggle"]'
       )[2]
 
       // Click to expand extensions panel
@@ -260,7 +262,7 @@ describe('NodeConflictDialogContent', () => {
 
       // Should be expanded now and show all package names
       const expandedContent = wrapper.findAll(
-        '[class*="py-2 px-4 flex flex-col gap-2.5"]'
+        '[data-testid="conflict-dialog-panel-expanded"]'
       )[0]
       expect(expandedContent.exists()).toBe(true)
       expect(expandedContent.text()).toContain('Test Package 1')
@@ -272,13 +274,13 @@ describe('NodeConflictDialogContent', () => {
       const wrapper = createWrapper()
 
       const importFailedHeader = wrapper.findAll(
-        '.w-full.h-8.flex.items-center'
+        '[data-testid="conflict-dialog-panel-toggle"]'
       )[0]
       const conflictsHeader = wrapper.findAll(
-        '.w-full.h-8.flex.items-center'
+        '[data-testid="conflict-dialog-panel-toggle"]'
       )[1]
       const extensionsHeader = wrapper.findAll(
-        '.w-full.h-8.flex.items-center'
+        '[data-testid="conflict-dialog-panel-toggle"]'
       )[2]
 
       // Open import failed panel first
@@ -317,7 +319,7 @@ describe('NodeConflictDialogContent', () => {
 
       // Expand conflicts panel (second header)
       const conflictsHeader = wrapper.findAll(
-        '.w-full.h-8.flex.items-center'
+        '[data-testid="conflict-dialog-panel-toggle"]'
       )[1]
       await conflictsHeader.trigger('click')
 
@@ -331,7 +333,7 @@ describe('NodeConflictDialogContent', () => {
 
       // Expand import failed panel (first header)
       const importFailedHeader = wrapper.findAll(
-        '.w-full.h-8.flex.items-center'
+        '[data-testid="conflict-dialog-panel-toggle"]'
       )[0]
       await importFailedHeader.trigger('click')
 
@@ -346,7 +348,7 @@ describe('NodeConflictDialogContent', () => {
 
       // Expand extensions panel (third header)
       const extensionsHeader = wrapper.findAll(
-        '.w-full.h-8.flex.items-center'
+        '[data-testid="conflict-dialog-panel-toggle"]'
       )[2]
       await extensionsHeader.trigger('click')
 
@@ -387,7 +389,9 @@ describe('NodeConflictDialogContent', () => {
       const wrapper = createWrapper()
 
       // Test all three panels
-      const headers = wrapper.findAll('.w-full.h-8.flex.items-center')
+      const headers = wrapper.findAll(
+        '[data-testid="conflict-dialog-panel-toggle"]'
+      )
 
       for (let i = 0; i < headers.length; i++) {
         await headers[i].trigger('click')
@@ -423,7 +427,9 @@ describe('NodeConflictDialogContent', () => {
       mockConflictData.value = mockConflictResults
       const wrapper = createWrapper()
 
-      const headers = wrapper.findAll('.w-full.h-8.flex.items-center')
+      const headers = wrapper.findAll(
+        '[data-testid="conflict-dialog-panel-toggle"]'
+      )
       expect(headers).toHaveLength(3) // import failed, conflicts and extensions headers
 
       headers.forEach((header) => {
diff --git a/tsconfig.json b/tsconfig.json
index a76fdd176f..e98c48c4d9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -39,7 +39,11 @@
     },
     "typeRoots": [
       "src/types",
-      "node_modules/@types"
+      "node_modules/@types",
+      "./node_modules"
+    ],
+    "types": [
+      "vitest/globals"
     ],
     "outDir": "./dist",
     "rootDir": "./"
@@ -55,5 +59,6 @@
     "tailwind.config.ts",
     "tests-ui/**/*",
     "vitest.config.ts",
+    // "vitest.setup.ts",
   ]
 }
\ No newline at end of file
diff --git a/vite.config.mts b/vite.config.mts
index 3b9ab11b2e..2dad24dc91 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -5,7 +5,8 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
-import { type UserConfig, defineConfig } from 'vite'
+import { defineConfig } from 'vite'
+import type { UserConfig } from 'vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'