FlowFuse · cstns · Nov 11, 2025 · Nov 12, 2025 · Nov 21, 2025 · Nov 21, 2025
diff --git a/config/postcss.config.js b/config/postcss.config.js
@@ -1,7 +1,5 @@
-const path = require('path')
 module.exports = {
     plugins: [
-        require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
-        require('autoprefixer')
+        require('@tailwindcss/postcss')
     ]
 }
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
@@ -1,70 +1,3 @@
-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'
-    theme: {
-        extend: {
-            colors: {
-                teal: {
-                    50: '#E4FBFC',
-                    100: '#C4F3F5',
-                    200: '#B2EBEE',
-                    300: '#8CE2E7',
-                    400: '#74D4D9',
-                    500: '#50C3C9',
-                    600: '#35AAB0',
-                    700: '#31959A',
-                    800: '#397B7E',
-                    900: '#406466'
-                }
-            }
-        }
-    },
-    variants: {
-        extend: {}
-    }
-}
+// Tailwind CSS v4 uses CSS-first configuration via @theme directive
+// Content paths are auto-detected in v4
+module.exports = {}
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -84,12 +84,7 @@ module.exports = function (env, argv) {
                             loader: 'css-loader',
                             options: { import: true, url: true }
                         },
-                        {
-                            loader: 'sass-loader',
-                            options: {
-                                additionalData: '@import "@/ui-components/stylesheets/ff-colors.scss";@import "@/ui-components/stylesheets/ff-utility.scss";'
-                            }
-                        }
+                        'sass-loader'
 
                     ]
                 },

diff --git a/frontend/src/App.vue b/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="pending">
-            <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>

diff --git a/frontend/src/components/CodeSnippet.vue b/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>

diff --git a/frontend/src/components/DevicesBrowser.vue b/frontend/src/components/DevicesBrowser.vue
@@ -579,7 +579,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 () {

diff --git a/frontend/src/components/DropdownMenu.vue b/frontend/src/components/DropdownMenu.vue
@@ -15,7 +15,7 @@
             leave-from-class="transform scale-100 opacity-100"
             leave-to-class="transform scale-95 opacity-0"
         >
-            <MenuItems :class="[edge === 'left' ? 'left-0 origin-top-left' : 'right-0 origin-top-right','z-50 absolute w-56 mt-1 bg-white divide-y divide-gray-100 rounded overflow-hidden shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none']">
+            <MenuItems :class="[edge === 'left' ? 'left-0 origin-top-left' : 'right-0 origin-top-right','z-50 absolute w-56 mt-1 bg-white divide-y divide-gray-100 rounded-sm overflow-hidden shadow-md ring-1 ring-black/10 focus:outline-hidden']">
                 <div class="apx-1 apy-1">
                     <MenuItem v-for="(item, $index) in options" v-slot="{ active }" :key="$index" :disabled="!item || item.disabled == true ? true : false">
                         <template v-if="item == null">
@@ -27,7 +27,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>

diff --git a/frontend/src/components/ExpertButton.vue b/frontend/src/components/ExpertButton.vue
@@ -1,12 +1,12 @@
 <template>
     <div v-if="!isExpertDrawerOpen" class="expert-button-wrapper flex items-center justify-center h-full px-3" style="height: 60px;">
         <button
-            class="expert-button flex items-center gap-1.5 justify-center rounded-md px-[9px] py-[6px] font-bold text-[0.85rem] leading-[20px] text-gray-800 whitespace-nowrap transition-colors"
+            class="expert-button flex items-center gap-1.5 justify-center rounded px-[9px] py-[6px] font-bold text-[0.85rem] leading-[20px] text-gray-800 whitespace-nowrap transition-colors"
             data-el="expert-button"
             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>
@@ -43,7 +43,7 @@ export default {
 /* Dual-background gradient border technique from flowfuse.com */
 .expert-button {
     background: linear-gradient(white, white) padding-box,
-                linear-gradient(135deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                linear-gradient(135deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     border: 1px solid transparent;
     animation: gradient-border-rotate 4s linear infinite;
 
@@ -56,47 +56,47 @@ export default {
 @keyframes gradient-border-rotate {
     0% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(0deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(0deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     10% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(36deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(36deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     20% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(72deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(72deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     30% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(108deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(108deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     40% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(144deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(144deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     50% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(180deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(180deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     60% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(216deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(216deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     70% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(252deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(252deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     80% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(288deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(288deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     90% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(324deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(324deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
     100% {
         background: linear-gradient(white, white) padding-box,
-                    linear-gradient(360deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
+                    linear-gradient(360deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
     }
 }
 </style>
diff --git a/frontend/src/components/FileUpload.vue b/frontend/src/components/FileUpload.vue
@@ -102,31 +102,31 @@ export default {
 .ff-file-upload {
     width: 100%;
     display: flex;
-    gap: $ff-unit-sm;
+    gap: var(--ff-unit-sm);
     .ff-btn {
         flex-shrink: 0;
     }
 }
 .ff-file-upload--empty,
 .ff-file-upload--file {
     flex-grow: 1;
-    border: 1px solid $ff-grey-300;
-    padding: $ff-unit-sm $ff-unit-md;
-    border-radius: $ff-unit-sm;
+    border: 1px solid var(--ff-grey-300);
+    padding: var(--ff-unit-sm) var(--ff-unit-md);
+    border-radius: var(--ff-unit-sm);
     display: flex;
     align-items: center;
-    gap: $ff-unit-sm;
+    gap: var(--ff-unit-sm);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow-x: hidden;
 }
 .ff-file-upload--empty {
-    color: $ff-grey-400;
+    color: var(--ff-grey-400);
 }
 .ff-file-upload--clear {
     cursor: pointer;
     &:hover {
-        color: $ff-blue-600;
+        color: var(--ff-blue-600);
     }
 }
 </style>
diff --git a/frontend/src/components/FormHeading.vue b/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>

diff --git a/frontend/src/components/IconLink.vue b/frontend/src/components/IconLink.vue
@@ -37,22 +37,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../ui-components/stylesheets/ff-colors.scss';
-@import '../ui-components/stylesheets/ff-utility.scss';
-
 .ff-icon-link {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 
-border-radius: $ff-unit-sm;
-border: 1px solid $ff-grey-300;
+border-radius: var(--ff-unit-sm);
+border: 1px solid var(--ff-grey-300);
 
 height: 28px;
-padding: $ff-unit-sm 5px;
+padding: var(--ff-unit-sm) 5px;
 
-font-size: $ff-funit-sm;
+font-size: var(--ff-funit-sm);
 line-height: 20px;
 
 svg {
@@ -61,13 +58,13 @@ svg {
 
 &:hover {
   cursor: pointer;
-  border-color: $ff-blue-600;
+  border-color: var(--ff-blue-600);
 
-  color: $ff-blue-600;;
-  background-color: $ff-grey-50;
+  color: var(--ff-blue-600);;
+  background-color: var(--ff-grey-50);
 
   .ff-icon {
-      color: $ff-blue-600;
+      color: var(--ff-blue-600);
   }
 }
 }

diff --git a/frontend/src/components/Loading.vue b/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"
     >

diff --git a/frontend/src/components/NavItem.vue b/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>

diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
@@ -42,7 +42,7 @@ export default {
 .notifications-button-wrapper {
 
   .notifications-button {
-    color: $ff-grey-800;
+    color: var(--ff-grey-800);
     display: flex;
     align-items: center;
     flex: 1;
@@ -67,7 +67,7 @@ export default {
     &:hover {
       svg {
         will-change: transform ;
-        color: $ff-indigo-600;
+        color: var(--ff-indigo-600);
         transform: scale(1.25) translateZ(0); /* Using slight adjustments to whole values */
         backface-visibility: hidden;
         perspective: 1000px;
@@ -83,7 +83,7 @@ export default {
       position: absolute;
       font-size: 0.65rem;
       padding: 0 7px;
-      background-color: $ff-red-500;
+      background-color: var(--ff-red-500);
     }
   }
 }

diff --git a/frontend/src/components/Offline.vue b/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>

diff --git a/frontend/src/components/SectionNavigationHeader.vue b/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" />