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/dialog/content/setting/CreditsPanel.vue

@@ -54,7 +54,7 @@
       </div>
 
       <template v-if="creditHistory.length > 0">
-        <div class="flex-grow">
+        <div class="grow">
           <DataTable :value="creditHistory" :show-headers="false">
             <Column field="title" :header="$t('g.name')">
               <template #body="{ data }">

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -295,6 +295,8 @@ async function resetAllKeybindings() {
 </script>
 
 <style scoped>
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-datatable-tbody) > tr > td {
   @apply p-1;
   min-height: 2rem;

src/components/dialog/content/setting/PanelTemplate.vue

@@ -2,7 +2,7 @@
   <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
     <div class="flex flex-col h-full w-full gap-2">
       <slot name="header" />
-      <ScrollPanel class="flex-grow h-0 pr-2">
+      <ScrollPanel class="grow h-0 pr-2">
         <slot />
       </ScrollPanel>
       <slot name="footer" />