Lint: Add tailwind linter (#5984)

## Summary

Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss)
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)).

## Changes

- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

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>

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>

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

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>
 

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>
 

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>
 

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>
 

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>

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}`"

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>
 

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>
 

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>

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>