[7141] Bump tailwindcss from 2.2.19 to 4.2.1

config/postcss.config.js

@@ -1,7 +1,6 @@
-const path = require('path')
 module.exports = {
     plugins: [
-        require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
+        require('@tailwindcss/postcss'),
         require('autoprefixer')
     ]
 }

config/tailwind.config.js

@@ -1,51 +1,47 @@
+const path = require('path')
+
 module.exports = {
-    mode: 'jit',
-    purge: {
-        enabled: true,
-        content: [
-            'frontend/public/index.html',
-            'frontend/src/**/*.js',
-            'frontend/src/**/*.vue'
-        ],
-        safelist: [
-            'forge-status-stopped',
-            'forge-status-error',
-            'forge-status-safe',
-            'forge-status-running',
-            'forge-status-starting',
-            'forge-log-entry-level-info',
-            'forge-log-entry-level-warn',
-            'forge-log-entry-level-error',
-            'forge-log-entry-level-system',
-            'forge-minimal-status-error',
-            'forge-minimal-status-crashed',
-            'forge-minimal-status-stopping',
-            'forge-minimal-status-suspending',
-            'forge-minimal-status-stopped',
-            'forge-minimal-status-suspended',
-            'forge-minimal-status-info',
-            'forge-minimal-status-offline',
-            'forge-minimal-status-success',
-            'forge-minimal-status-connected',
-            'forge-minimal-status-protected',
-            'forge-minimal-status-running',
-            'forge-minimal-status-importing',
-            'forge-minimal-status-safe',
-            'forge-minimal-status-warning',
-            'forge-minimal-status-starting',
-            'forge-minimal-status-info',
-            'forge-minimal-status-pushing',
-            'forge-minimal-status-pulling',
-            'forge-minimal-status-loading',
-            'forge-minimal-status-rollback',
-            'forge-minimal-status-installing',
-            'forge-minimal-status-restarting',
-            'forge-minimal-status-updating',
-            'text-green-400',
-            'bg-green-50'
-        ]
-    },
-    darkMode: false, // or 'media' or 'class'
+    content: [
+        path.resolve(__dirname, '../frontend/public/index.html'),
+        path.resolve(__dirname, '../frontend/src/**/*.js'),
+        path.resolve(__dirname, '../frontend/src/**/*.vue')
+    ],
+    safelist: [
+        'forge-status-stopped',
+        'forge-status-error',
+        'forge-status-safe',
+        'forge-status-running',
+        'forge-status-starting',
+        'forge-log-entry-level-info',
+        'forge-log-entry-level-warn',
+        'forge-log-entry-level-error',
+        'forge-log-entry-level-system',
+        'forge-minimal-status-error',
+        'forge-minimal-status-crashed',
+        'forge-minimal-status-stopping',
+        'forge-minimal-status-suspending',
+        'forge-minimal-status-stopped',
+        'forge-minimal-status-suspended',
+        'forge-minimal-status-info',
+        'forge-minimal-status-offline',
+        'forge-minimal-status-success',
+        'forge-minimal-status-connected',
+        'forge-minimal-status-protected',
+        'forge-minimal-status-running',
+        'forge-minimal-status-importing',
+        'forge-minimal-status-safe',
+        'forge-minimal-status-warning',
+        'forge-minimal-status-starting',
+        'forge-minimal-status-pushing',
+        'forge-minimal-status-pulling',
+        'forge-minimal-status-loading',
+        'forge-minimal-status-rollback',
+        'forge-minimal-status-installing',
+        'forge-minimal-status-restarting',
+        'forge-minimal-status-updating',
+        'text-green-400',
+        'bg-green-50'
+    ],
     theme: {
         extend: {
             colors: {
@@ -63,8 +59,5 @@ module.exports = {
                 }
             }
         }
-    },
-    variants: {
-        extend: {}
     }
 }

frontend/src/App.vue

@@ -1,15 +1,15 @@
 <template>
     <div id="ff-app" class="flex flex-col" :class="{'hidden-left-drawer': hiddenLeftDrawer}">
         <template v-if="offline">
-            <main class="ff-bg-dark flex-grow flex flex-col">
-                <div class="w-full max-w-screen-2xl mx-auto my-2 sm:my-8 flex-grow flex flex-col">
+            <main class="ff-bg-dark grow flex flex-col">
+                <div class="w-full max-w-(--breakpoint-2xl) mx-auto my-2 sm:my-8 grow flex flex-col">
                     <Offline />
                 </div>
             </main>
         </template>
         <template v-else-if="appLoader">
-            <main class="ff-bg-dark flex-grow flex flex-col">
-                <div class="w-full mx-auto flex-grow flex flex-col">
+            <main class="ff-bg-dark grow flex flex-col">
+                <div class="w-full mx-auto grow flex flex-col">
                     <Loading color="white" />
                 </div>
             </main>

frontend/src/components/CodeSnippet.vue

@@ -1,5 +1,5 @@
 <template>
-    <pre class="overflow-auto text-xs font-light p-4 border rounded bg-gray-800 text-gray-200"><slot /></pre>
+    <pre class="overflow-auto text-xs font-light p-4 border rounded-sm bg-gray-800 text-gray-200"><slot /></pre>
 </template>
 
 <script>

frontend/src/components/DevicesBrowser.vue

@@ -588,7 +588,7 @@ export default {
             }
 
             menu.push(null)
-            menu.push({ name: 'Delete', class: ['!text-red-600'], action: this.showTeamBulkDeviceDeleteDialog, disabled: !enableDelete })
+            menu.push({ name: 'Delete', class: ['text-red-600!'], action: this.showTeamBulkDeviceDeleteDialog, disabled: !enableDelete })
             return menu
         },
         applicationContext () {

frontend/src/components/DropdownMenu.vue

@@ -20,7 +20,7 @@
                 <MenuItems
                     v-if="open"
                     ref="menu-items"
-                    class="z-[1000] fixed bg-white rounded overflow-hidden shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
+                    class="z-1000 fixed bg-white rounded-sm overflow-hidden shadow-lg ring-1 ring-black/10 focus:outline-hidden"
                     :style="teleportedStyle"
                 >
                     <div class="apx-1 apy-1">
@@ -38,7 +38,7 @@
                             <template v-else>
                                 <a :class="[active ? 'bg-gray-200' : '', item.selected? 'bg-gray-100':'', 'block px-4 py-2 text-sm text-gray-700',...(item.class||[])]" :data-action="`menu-${item.name.toLowerCase()}`" @click="item.action">
                                     <component :is="item.icon" v-if="item.icon" class="w-4 inline" />
-                                    <img v-if="item.imgUrl" :src="item.imgUrl" class="h-4 v-4 inline rounded mr-1">
+                                    <img v-if="item.imgUrl" :src="item.imgUrl" class="h-4 v-4 inline rounded-sm mr-1">
                                     {{ item.name }}
                                 </a>
                             </template>

frontend/src/components/ExpertButton.vue

@@ -6,7 +6,7 @@
             data-click-exclude="right-drawer"
             @click="onClick"
         >
-            <img src="/ff-minimal-red.svg" alt="FlowFuse" class="w-5 h-5 -ml-1 mr-0.5 flex-shrink-0">
+            <img src="/ff-minimal-red.svg" alt="FlowFuse" class="w-5 h-5 -ml-1 mr-0.5 shrink-0">
             <span>Expert</span>
         </button>
     </div>

frontend/src/components/FormHeading.vue

@@ -1,6 +1,6 @@
 <template>
     <h1 class="text-lg font-medium mb-2 border-b border-gray-200 flex">
-        <div class="flex-grow"><slot /></div>
+        <div class="grow"><slot /></div>
         <div><slot name="tools" /></div>
     </h1>
 </template>

frontend/src/components/Loading.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="ff-loading flex-grow flex flex-col items-center justify-center mx-auto"
+        class="ff-loading grow flex flex-col items-center justify-center mx-auto"
         :class="{'theme-light': color == 'black', 'theme-dark': color == 'white'}"
         data-el="loading"
     >

frontend/src/components/NavItem.vue

@@ -3,7 +3,7 @@
         <div class="flex w-full justify-between items-center">
             <component v-if="icon" :is="icon" class="ff-icon transition-fade--color" />
             <img v-if="avatar" :src="avatar" class="ff-avatar">
-            <label class="transition-fade--color flex-grow">{{ label }}</label>
+            <label class="transition-fade--color grow">{{ label }}</label>
             <span v-if="featureUnavailable" data-el="premium-feature" v-ff-tooltip="'Not available in this Tier'">
                 <SparklesIcon class="ff-icon transition-fade--color hollow" style="stroke-width: 1;" />
             </span>

frontend/src/components/Offline.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-grow flex flex-col items-center justify-center mx-auto h-92 text-gray-400">
+    <div class="grow flex flex-col items-center justify-center mx-auto h-92 text-gray-400">
         <div class="text-center text-white">
             <div class="text-6xl mb-3">Oh Dear</div>
             <div class="text-2xl">We tried phoning the server, but no-one answered.</div>

frontend/src/components/SectionNavigationHeader.vue

@@ -3,7 +3,7 @@
         <div class="flex flex-wrap justify-between pb-3 gap-y-2">
             <div class="flex-1 flex items-center md:w-auto mr-8 gap-x-2">
                 <slot name="hero">
-                    <div class="flex-grow items-center grid gap-1">
+                    <div class="grow items-center grid gap-1">
                         <div class="inline-flex flex-wrap gap-1">
                             <div v-if="!hasCustomBreadcrumbs" class="flex items-center mr-6">
                                 <slot name="breadcrumbs" />

frontend/src/components/SectionTopMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="ff-section-header flex border-b border-gray-400 mb-4 sm:mb-2 text-gray-500 justify-between min-h-12">
         <div class="w-full flex flex-nowrap justify-between mb-2 items-center gap-2">
-            <div class="flex-shrink flex-grow flex-wrap max-w-full flex gap-x-2 items-baseline min-w-0">
+            <div class="shrink grow flex-wrap max-w-full flex gap-x-2 items-baseline min-w-0">
                 <div class="flex gap-2 items-center">
                     <slot name="hero">
                         <div class="flex" :data-hero="hero">
@@ -12,14 +12,14 @@
                 </div>
                 <div v-if="info" class="hidden sm:block text-gray-400 info truncate text-sm">{{ info }}</div>
             </div>
-            <div class="actions flex-shrink-0">
+            <div class="actions shrink-0">
                 <ul v-if="options.length > 0" class="flex">
                     <li v-for="item in options" :key="item.name" class="mr-8 pt-1 flex">
                         <router-link :to="item.path" class="forge-nav-item" active-class="forge-nav-item-active" :data-nav="`section-${item.name.toLowerCase()}`">{{ item.name }}</router-link>
                     </li>
                 </ul>
-                <ul v-if="hasTools" class="flex-shrink-0">
-                    <li class="w-full md:w-auto flex-grow text-right">
+                <ul v-if="hasTools" class="shrink-0">
+                    <li class="w-full md:w-auto grow text-right">
                         <slot name="tools" />
                     </li>
                 </ul>

frontend/src/components/audit-log/AuditEntry.vue

@@ -15,16 +15,16 @@
             </div>
             <div v-if="!disableAssociations" class="lg:w-36">
                 <template v-if="association && entry.scope.type === 'device'">
-                    <router-link class="flex content-center" :to="{ name: 'Device', params: { id: entry.scope.id } }"><ChipIcon class="ff-icon relative invisible lg:visible " /> <span class="truncate ml-2 !leading-normal">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'Device', params: { id: entry.scope.id } }"><ChipIcon class="ff-icon relative invisible lg:visible " /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="association && entry.scope.type === 'project'">
-                    <router-link class="flex content-center" :to="{ name: 'Instance', params: { id: entry.scope.id } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 !leading-normal">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'Instance', params: { id: entry.scope.id } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="association && entry.scope.type === 'application'">
-                    <router-link class="flex content-center" :to="{ name: 'Application', params: { id: entry.scope.id }}"><TemplateIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 !leading-normal">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'Application', params: { id: entry.scope.id }}"><TemplateIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="entry.scope.type === 'team'">
-                    <router-link class="flex content-center" :to="'#'"><UserGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 !leading-normal">This Team</span></router-link>
+                    <router-link class="flex content-center" :to="'#'"><UserGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">This Team</span></router-link>
                 </template>
             </div>
         </div>

frontend/src/components/charts/DeviceStatusBar.vue

@@ -23,7 +23,7 @@
                 @click="selected(b, bucket.devices)"
             >
                 <div>{{ bucket.devices.length }}</div>
-                <label class="truncate overflow-ellipsis">{{ bucket.label }}</label>
+                <label class="truncate text-ellipsis">{{ bucket.label }}</label>
             </div>
         </div>
     </div>

frontend/src/components/dialogs/AssetCompareDialog.vue

@@ -1,7 +1,7 @@
 <template>
     <ff-dialog
         ref="dialog" :header="header" confirm-label="Close" :closeOnConfirm="true" data-el="flow-view-dialog"
-        boxClass="!min-w-[80%] !min-h-[80%] !w-[80%] !h-[80%]" contentClass="overflow-hidden flex-grow"
+        boxClass="min-w-[80%]! min-h-[80%]! w-[80%]! h-[80%]!" contentClass="overflow-hidden grow"
         @confirm="confirm"
     >
         <template #default>
@@ -13,7 +13,7 @@
                     data-el="snapshots-list"
                     label-key="label"
                     option-title-key="description"
-                    class="flex-grow"
+                    class="grow"
                 />
                 <ff-kebab-menu v-if="hasCompared" :menu-items-attrs="{ 'data-click-exclude': 'right-drawer' }">
                     <ff-kebab-item
@@ -39,19 +39,19 @@
             <!-- Navigation bar — shown after comparison -->
             <div v-if="hasCompared && !loading" class="flex items-center gap-2 px-3 py-1.5 border-b border-gray-200 bg-white shrink-0">
                 <div v-if="currentGroup" class="flex-1 flex items-center gap-2 min-w-0">
-                    <span class="text-xs font-semibold px-1.5 py-0.5 rounded capitalize shrink-0" :class="diffTypeBadgeClass(currentGroup.diffType)">{{ currentGroup.diffType }}</span>
+                    <span class="text-xs font-semibold px-1.5 py-0.5 rounded-sm capitalize shrink-0" :class="diffTypeBadgeClass(currentGroup.diffType)">{{ currentGroup.diffType }}</span>
                     <span class="font-semibold text-sm text-gray-800 truncate">{{ currentGroup.name }}</span>
-                    <span class="text-xs font-semibold text-gray-700 bg-gray-200 px-1.5 py-0.5 rounded shrink-0">{{ currentGroup.type }}</span>
-                    <span v-if="currentGroupCategoryLabel" class="text-xs font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded shrink-0">{{ currentGroupCategoryLabel }}</span>
-                    <span v-if="currentGroupTabMove" class="text-xs text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded shrink-0">
+                    <span class="text-xs font-semibold text-gray-700 bg-gray-200 px-1.5 py-0.5 rounded-sm shrink-0">{{ currentGroup.type }}</span>
+                    <span v-if="currentGroupCategoryLabel" class="text-xs font-semibold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded-sm shrink-0">{{ currentGroupCategoryLabel }}</span>
+                    <span v-if="currentGroupTabMove" class="text-xs text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded-sm shrink-0">
                         {{ currentGroupTabMove.from }} → {{ currentGroupTabMove.to }}
                     </span>
                 </div>
                 <div v-else class="flex-1 text-sm text-gray-400 text-center">No differences found</div>
                 <!-- Prev / counter / Next grouped so the two buttons are adjacent -->
                 <div class="flex items-center gap-1 shrink-0">
                     <button
-                        class="px-2 py-0.5 text-sm rounded border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed"
+                        class="px-2 py-0.5 text-sm rounded-sm border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed"
                         :disabled="currentGroupIndex === 0"
                         title="Previous change (←)"
                         @click="navigate(-1)"
@@ -60,7 +60,7 @@
                     </button>
                     <span class="text-xs text-gray-400 px-1">{{ groupedChanges.length ? `${currentGroupIndex + 1} / ${groupedChanges.length}` : '0' }}</span>
                     <button
-                        class="px-2 py-0.5 text-sm rounded border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed"
+                        class="px-2 py-0.5 text-sm rounded-sm border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed"
                         :disabled="currentGroupIndex >= groupedChanges.length - 1"
                         title="Next change (→)"
                         @click="navigate(1)"

frontend/src/components/dialogs/AssetDetailDialog.vue

@@ -2,8 +2,8 @@
     <ff-dialog
         v-if="visible"
         ref="dialog" :header="header" :sub-header="`Node-RED Version: ${nrVersion}`" confirm-label="Close" :closeOnConfirm="true"
-        data-el="flow-view-dialog" boxClass="!min-w-[80%] !min-h-[80%] !w-[80%] !h-[80%]"
-        contentClass="overflow-hidden flex-grow" @confirm="confirm()"
+        data-el="flow-view-dialog" boxClass="min-w-[80%]! min-h-[80%]! w-[80%]! h-[80%]!"
+        contentClass="overflow-hidden grow" @confirm="confirm()"
     >
         <template #default>
             <div ref="viewer" data-el="ff-flow-previewer" class="ff-flow-viewer" @click.stop.prevent>