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

@@ -1,6 +1,6 @@
 <template>
   <PanelTemplate value="About" class="about-container">
-    <h2 class="text-2xl font-bold mb-2">
+    <h2 class="mb-2 text-2xl font-bold">
       {{ $t('g.about') }}
     </h2>
     <div class="space-y-2">

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

@@ -1,7 +1,7 @@
 <template>
   <TabPanel value="Credits" class="credits-container h-full">
-    <div class="flex flex-col h-full">
-      <h2 class="text-2xl font-bold mb-2">
+    <div class="flex h-full flex-col">
+      <h2 class="mb-2 text-2xl font-bold">
         {{ $t('credits.credits') }}
       </h2>
 
@@ -11,7 +11,7 @@
         <h3 class="text-sm font-medium text-muted">
           {{ $t('credits.yourCreditBalance') }}
         </h3>
-        <div class="flex justify-between items-center">
+        <div class="flex items-center justify-between">
           <UserCredit text-class="text-3xl font-bold" />
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
@@ -41,7 +41,7 @@
         </div>
       </div>
 
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
         <h3>{{ $t('credits.activity') }}</h3>
         <Button
           :label="$t('credits.invoiceHistory')"
@@ -66,7 +66,7 @@
               <template #body="{ data }">
                 <div
                   :class="[
-                    'text-base font-medium text-center',
+                    'text-center text-base font-medium',
                     data.isPositive ? 'text-sky-500' : 'text-red-400'
                   ]"
                 >

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

@@ -51,10 +51,7 @@
         class="max-w-64 2xl:max-w-full"
       >
         <template #body="slotProps">
-          <div
-            class="overflow-hidden text-ellipsis whitespace-nowrap"
-            :title="slotProps.data.id"
-          >
+          <div class="truncate" :title="slotProps.data.id">
             {{ slotProps.data.label }}
           </div>
         </template>

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

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

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

@@ -30,7 +30,7 @@
           <div class="event-details">
             <!-- Credits Added -->
             <template v-if="data.event_type === EventType.CREDIT_ADDED">
-              <div class="text-green-500 font-semibold">
+              <div class="font-semibold text-green-500">
                 {{ $t('credits.added') }} ${{
                   customerEventService.formatAmount(data.params?.amount)
                 }}

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

@@ -1,7 +1,7 @@
 <template>
   <TabPanel value="User" class="user-settings-container h-full">
-    <div class="flex flex-col h-full">
-      <h2 class="text-2xl font-bold mb-2">{{ $t('userSettings.title') }}</h2>
+    <div class="flex h-full flex-col">
+      <h2 class="mb-2 text-2xl font-bold">{{ $t('userSettings.title') }}</h2>
       <Divider class="mb-3" />
 
       <!-- Normal User Panel -->
@@ -35,7 +35,7 @@
           <h3 class="font-medium">
             {{ $t('userSettings.provider') }}
           </h3>
-          <div class="text-muted flex items-center gap-1">
+          <div class="flex items-center gap-1 text-muted">
             <i :class="providerIcon" />
             {{ providerName }}
             <Button
@@ -54,7 +54,7 @@
 
         <ProgressSpinner
           v-if="loading"
-          class="w-8 h-8 mt-4"
+          class="mt-4 h-8 w-8"
           style="--pc-spinner-color: #000"
         />
         <div v-else class="mt-4 flex flex-col gap-2">