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/bottomPanel/BottomPanel.vue

@@ -40,8 +40,8 @@
         </div>
       </TabList>
     </Tabs>
-    <!-- h-0 to force the div to flex-grow -->
-    <div class="flex-grow h-0">
+    <!-- h-0 to force the div to grow -->
+    <div class="grow h-0">
       <ExtensionSlot
         v-if="
           bottomPanelStore.bottomPanelVisible &&

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -18,13 +18,13 @@
             :key="command.id"
             class="shortcut-item flex justify-between items-center py-2 rounded hover:bg-surface-100 dark-theme:hover:bg-surface-700 transition-colors duration-200"
           >
-            <div class="shortcut-info flex-grow pr-4">
+            <div class="shortcut-info grow pr-4">
               <div class="shortcut-name text-sm font-medium">
                 {{ t(`commands.${normalizeI18nKey(command.id)}.label`) }}
               </div>
             </div>
 
-            <div class="keybinding-display flex-shrink-0">
+            <div class="keybinding-display shrink-0">
               <div
                 class="keybinding-combo flex gap-1"
                 :aria-label="`Keyboard shortcut: ${command.keybinding!.combo.getKeySequences().join(' + ')}`"