Upgrade: Tailwind v4 (#5246)

* temp: move tailwind calls out of the layer

* temp: ts tailwind config

* upgrade: Tailwind v4
This got a little out of hand.
Had to add a relative reference to the stylesheet in any component that uses @apply instead of the utility classes directly.

* upgrade: bg-opacity is now a modifier

* fix: Classic menu buttons assume a border

* Update test expectations [skip ci]

* fix: New preflight removal pattern

* fix: Skeletons don't have skin

* Update test expectations [skip ci]

* fix: Missing @reference

* [auto-fix] Apply ESLint and Prettier fixes

---------

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

src/components/node/NodePreview.spec.ts

@@ -76,11 +76,11 @@ describe('NodePreview', () => {
     expect(wrapper.find('._sb_preview_badge').text()).toBe('Preview')
   })
 
-  it('applies overflow-ellipsis class to node header for text truncation', () => {
+  it('applies text-ellipsis class to node header for text truncation', () => {
     const wrapper = mountComponent()
     const nodeHeader = wrapper.find('.node_header')
 
-    expect(nodeHeader.classes()).toContain('overflow-ellipsis')
+    expect(nodeHeader.classes()).toContain('text-ellipsis')
     expect(nodeHeader.classes()).toContain('mr-4')
   })
 
@@ -105,7 +105,7 @@ describe('NodePreview', () => {
     expect(nodeHeader.attributes('title')).toBe(longNameNodeDef.display_name)
 
     // Verify overflow handling classes are applied
-    expect(nodeHeader.classes()).toContain('overflow-ellipsis')
+    expect(nodeHeader.classes()).toContain('text-ellipsis')
 
     // The actual text content should still be the full name (CSS handles truncation)
     expect(nodeHeader.text()).toContain(longNameNodeDef.display_name)

src/components/node/NodePreview.vue

@@ -6,7 +6,7 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
   <div class="_sb_node_preview">
     <div class="_sb_table">
       <div
-        class="node_header overflow-ellipsis mr-4"
+        class="node_header text-ellipsis mr-4"
         :title="nodeDef.display_name"
         :style="{
           backgroundColor: litegraphColors.NODE_DEFAULT_COLOR,