Lint: Add tailwind linter (#5984)

## Summary

Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss)
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)).

## Changes

- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

src/components/common/FileDownload.vue

@@ -11,7 +11,7 @@
         icon="pi pi-exclamation-triangle"
         size="small"
         variant="outlined"
-        class="h-min my-2 px-1 max-w-xs"
+        class="my-2 h-min max-w-xs px-1"
         :title="props.error"
         :pt="{
           text: { class: 'overflow-hidden text-ellipsis' }

src/components/common/FormImageUpload.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="image-upload-wrapper">
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <div
-        class="preview-box border rounded p-2 w-16 h-16 flex items-center justify-center"
+        class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
         :class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
       >
         <img
           v-if="modelValue"
           :src="modelValue"
-          class="max-w-full max-h-full object-contain"
+          class="max-h-full max-w-full object-contain"
         />
-        <i v-else class="pi pi-image text-gray-400 text-xl" />
+        <i v-else class="pi pi-image text-xl text-gray-400" />
       </div>
 
       <div class="flex flex-col gap-2">

src/components/common/LazyImage.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="containerRef"
-    class="relative overflow-hidden w-full h-full flex items-center justify-center"
+    class="relative flex h-full w-full items-center justify-center overflow-hidden"
   >
     <Skeleton
       v-if="!isImageLoaded"
@@ -22,7 +22,7 @@
     />
     <div
       v-if="hasError"
-      class="absolute inset-0 flex items-center justify-center bg-surface-50 dark-theme:bg-surface-800 text-muted"
+      class="absolute inset-0 flex items-center justify-center bg-surface-50 text-muted dark-theme:bg-surface-800"
     >
       <img
         src="/assets/images/default-template.png"

src/components/common/NoResultsPlaceholder.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="no-results-placeholder p-8 h-full" :class="props.class">
+  <div class="no-results-placeholder h-full p-8" :class="props.class">
     <Card>
       <template #content>
         <div class="flex flex-col items-center">
           <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem" />
           <h3>{{ title }}</h3>
-          <p :class="textClass" class="whitespace-pre-line text-center">
+          <p :class="textClass" class="text-center whitespace-pre-line">
             {{ message }}
           </p>
           <Button

src/components/common/SearchBox.vue

@@ -28,7 +28,7 @@
     </IconField>
     <div
       v-if="filters?.length"
-      class="search-filters pt-2 flex flex-wrap gap-2"
+      class="search-filters flex flex-wrap gap-2 pt-2"
     >
       <SearchFilterChip
         v-for="filter in filters"

src/components/common/SystemStatsPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <h2 class="text-2xl font-semibold mb-4">
+      <h2 class="mb-4 text-2xl font-semibold">
         {{ $t('g.systemInfo') }}
       </h2>
       <div class="grid grid-cols-2 gap-2">
@@ -17,7 +17,7 @@
     <Divider />
 
     <div>
-      <h2 class="text-2xl font-semibold mb-4">
+      <h2 class="mb-4 text-2xl font-semibold">
         {{ $t('g.devices') }}
       </h2>
       <TabView v-if="props.stats.devices.length > 1">

src/components/common/TreeExplorer.vue

@@ -2,7 +2,7 @@
   <Tree
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
-    class="tree-explorer py-0 px-2 2xl:px-4"
+    class="tree-explorer px-2 py-0 2xl:px-4"
     :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"

src/components/common/UrlInput.vue

@@ -12,9 +12,9 @@
       :class="{
         'pi pi-spin pi-spinner text-neutral-400':
           validationState === ValidationState.LOADING,
-        'pi pi-check text-green-500 cursor-pointer':
+        'pi pi-check cursor-pointer text-green-500':
           validationState === ValidationState.VALID,
-        'pi pi-times text-red-500 cursor-pointer':
+        'pi pi-times cursor-pointer text-red-500':
           validationState === ValidationState.INVALID
       }"
       @click="validateUrl(props.modelValue)"

src/components/common/UserCredit.vue

@@ -11,7 +11,7 @@
       severity="secondary"
       icon="pi pi-dollar"
       rounded
-      class="text-amber-400 p-1"
+      class="p-1 text-amber-400"
     />
     <div :class="textClass">{{ formattedBalance }}</div>
   </div>