feat: add eslint-plugin-better-tailwindcss for Tailwind v4 linting (#9245)

## Summary

Add `eslint-plugin-better-tailwindcss` to the ESLint toolchain for
Tailwind CSS v4 class linting.

## Changes

- **What**: Integrate `eslint-plugin-better-tailwindcss` (v4.3.1) with
the recommended config, pointed at the design-system CSS entry point for
v4 theme resolution. Five rules are enabled initially:
`enforce-canonical-classes`, `no-deprecated-classes`,
`no-conflicting-classes`, `no-duplicate-classes`,
`no-unnecessary-whitespace`. Three rules are disabled pending follow-up:
`no-unknown-classes` (needs PrimeIcon/custom class whitelisting),
`enforce-consistent-line-wrapping` (oxfmt conflict risk),
`enforce-consistent-class-order` (large batch change).
- **Dependencies**: `eslint-plugin-better-tailwindcss` ^4.3.1
- Fix conflicting `outline outline-1` classes in
`FormDropdownMenuActions.vue` (caught by the new
`no-conflicting-classes` rule).

## Review Focus

- Is the rule severity/enablement strategy appropriate for incremental
adoption?
- The 700 warnings (mostly `enforce-canonical-classes` and
`no-deprecated-classes`) are all auto-fixable via `eslint --fix` —
should we batch-fix them in this PR or a follow-up?

Fixes COM-15518

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9245-feat-add-eslint-plugin-better-tailwindcss-for-Tailwind-v4-linting-3136d73d365081df8a64dd55962d073f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -64,7 +64,7 @@
             layout="vertical"
             :pt:gutter="
               cn(
-                'rounded-tl-lg rounded-tr-lg ',
+                'rounded-tl-lg rounded-tr-lg',
                 !(bottomPanelVisible && !focusMode) && 'hidden'
               )
             "

src/components/topbar/CurrentUserButton.vue

@@ -12,7 +12,7 @@
         :class="
           cn(
             'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
-            compact && 'size-full '
+            compact && 'size-full'
           )
         "
       >

src/components/widget/nav/NavTitle.vue

@@ -15,7 +15,7 @@
       v-if="collapsible"
       :class="
         cn(
-          'pi transition-transform duration-200 text-xs text-text-secondary ',
+          'pi transition-transform duration-200 text-xs text-text-secondary',
           isCollapsed ? 'pi-chevron-right' : 'pi-chevron-down'
         )
       "

src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts

@@ -175,7 +175,7 @@ export function useNodeTooltips(nodeType: MaybeRef<string>) {
           class: cn(
             context.top && 'border-t-node-component-tooltip-border',
             context.bottom && 'border-b-node-component-tooltip-border',
-            context.left && 'border-l-node-component-tooltip-border ',
+            context.left && 'border-l-node-component-tooltip-border',
             context.right && 'border-r-node-component-tooltip-border'
           )
         })

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue

@@ -42,7 +42,7 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
 })
 
 const actionButtonStyle = cn(
-  'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-node-component-border transition-all duration-150'
+  'h-8 bg-zinc-500/20 rounded-lg outline-1 -outline-offset-1 outline-node-component-border transition-all duration-150'
 )
 
 const layoutSwitchItemStyle =
@@ -157,7 +157,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           cn(
             'flex flex-col gap-2 p-2 min-w-32',
             'bg-component-node-background',
-            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
+            'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
         "
       >
@@ -219,7 +219,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           cn(
             'flex flex-col gap-2 p-2 min-w-32',
             'bg-component-node-background',
-            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
+            'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
         "
       >
@@ -281,7 +281,7 @@ function toggleBaseModelSelection(item: FilterOption) {
           cn(
             'flex flex-col gap-2 p-2 min-w-32',
             'bg-component-node-background',
-            'rounded-lg outline outline-offset-[-1px] outline-component-node-border'
+            'rounded-lg outline -outline-offset-1 outline-component-node-border'
           )
         "
       >

src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts

@@ -1,7 +1,7 @@
 import { cn } from '@comfyorg/tailwind-utils'
 
 const sharedButtonClasses = cn(
-  'inline-flex items-center justify-center border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out ',
+  'inline-flex items-center justify-center border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out',
   'hover:bg-node-component-surface-hovered active:bg-node-component-surface-selected',
   'disabled:bg-node-component-disabled disabled:text-node-icon-disabled disabled:cursor-not-allowed'
 )