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/sidebar/SidebarIcon.vue

@@ -94,6 +94,8 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 </style>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 .side-bar-button {
   width: var(--sidebar-width);
   height: calc(var(--sidebar-width) + 0.5rem);

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -1,7 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="$t('sideToolbar.modelLibrary')"
-    class="bg-[var(--p-tree-background)]"
+    class="bg-(--p-tree-background)"
   >
     <template #tool-buttons>
       <Button

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -3,7 +3,7 @@
     <SidebarTabTemplate
       v-if="!isHelpOpen"
       :title="$t('sideToolbar.nodeLibrary')"
-      class="bg-[var(--p-tree-background)]"
+      class="bg-(--p-tree-background)"
     >
       <template #tool-buttons>
         <Button

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -20,8 +20,8 @@
       </Toolbar>
       <slot name="header" />
     </div>
-    <!-- h-0 to force scrollpanel to flex-grow -->
-    <ScrollPanel class="comfy-vue-side-bar-body flex-grow h-0">
+    <!-- h-0 to force scrollpanel to grow -->
+    <ScrollPanel class="comfy-vue-side-bar-body grow h-0">
       <slot name="body" />
     </ScrollPanel>
   </div>
@@ -38,6 +38,8 @@ const props = defineProps<{
 </script>
 
 <style scoped>
+@reference '../../../assets/css/style.css';
+
 :deep(.p-toolbar-end) .p-button {
   @apply py-1 2xl:py-2;
 }

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -1,7 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="$t('sideToolbar.workflows')"
-    class="workflows-sidebar-tab bg-[var(--p-tree-background)]"
+    class="workflows-sidebar-tab bg-(--p-tree-background)"
   >
     <template #tool-buttons>
       <Button

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col h-full bg-[var(--p-tree-background)] overflow-auto">
+  <div class="flex flex-col h-full bg-(--p-tree-background) overflow-auto">
     <div
-      class="px-3 py-2 flex items-center border-b border-[var(--p-divider-color)]"
+      class="px-3 py-2 flex items-center border-b border-(--p-divider-color)"
     >
       <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 flex-grow node-help-content w-full mx-auto">
+    <div class="p-4 grow node-help-content w-full mx-auto">
       <ProgressSpinner
         v-if="isLoading"
         class="m-auto"
@@ -118,7 +118,9 @@ const outputList = computed(() =>
 )
 </script>
 
-<style scoped lang="postcss">
+<style scoped>
+@reference './../../../../assets/css/style.css';
+
 .node-help-content :deep(:is(img, video)) {
   @apply max-w-full h-auto block mb-4;
 }

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -133,6 +133,8 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+@reference '../../../../assets/css/style.css';
+
 .node-lib-node-container {
   @apply h-full w-full;
 }