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/views/DesktopUpdateView.vue

@@ -61,6 +61,8 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .download-bg::before {
   @apply m-0 absolute text-muted;
   font-family: 'primeicons';

src/views/DownloadGitView.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseViewTemplate>
     <div
-      class="max-w-screen-sm flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-right-top bg-origin-padding"
+      class="max-w-(--breakpoint-sm) flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-top-right bg-origin-padding"
     >
       <!-- Header -->
       <h1 class="mt-24 text-4xl font-bold text-red-500">

src/views/InstallView.vue

@@ -202,6 +202,8 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 :deep(.p-steppanel) {
   @apply bg-transparent;
 }

src/views/MaintenanceView.vue

@@ -3,7 +3,7 @@
     <div
       class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
     >
-      <div class="max-w-screen-sm w-screen m-8 relative">
+      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
         <!-- Header -->
         <h1 class="backspan pi-wrench text-4xl font-bold">
           {{ t('maintenance.title') }}
@@ -178,6 +178,8 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 :deep(.p-tag) {
   --p-tag-gap: 0.375rem;
 }

src/views/NotSupportedView.vue

@@ -79,6 +79,8 @@ const continueToInstall = async () => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .sad-container {
   @apply grid items-center justify-evenly;
   grid-template-columns: 25rem 1fr;

src/views/UserSelectView.vue

@@ -2,7 +2,7 @@
   <BaseViewTemplate dark>
     <main
       id="comfy-user-selection"
-      class="min-w-84 relative rounded-lg bg-[var(--comfy-menu-bg)] p-5 px-10 shadow-lg"
+      class="min-w-84 relative 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">

src/views/WelcomeView.vue

@@ -33,6 +33,8 @@ const navigateTo = async (path: string) => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .animated-gradient-text {
   @apply font-bold;
   font-size: clamp(2rem, 8vw, 4rem);

src/views/templates/BaseViewTemplate.vue

@@ -11,11 +11,9 @@
     <div
       v-show="isNativeWindow()"
       ref="topMenuRef"
-      class="app-drag w-full h-[var(--comfy-topbar-height)]"
+      class="app-drag w-full h-(--comfy-topbar-height)"
     />
-    <div
-      class="flex-grow w-full flex items-center justify-center overflow-auto"
-    >
+    <div class="grow w-full flex items-center justify-center overflow-auto">
       <slot />
     </div>
   </div>