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/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -65,7 +65,7 @@ const theButtonStyle = computed(() =>
       "
       @click="emit('select-click', $event)"
     >
-      <span class="px-4 py-2 min-w-0 text-left">
+      <span class="min-w-0 px-4 py-2 text-left">
         <span v-if="!selectedItems.length" class="min-w-0">
           {{ props.placeholder }}
         </span>
@@ -89,7 +89,7 @@ const theButtonStyle = computed(() =>
       <i class="icon-[lucide--folder-search] size-4" />
       <input
         type="file"
-        class="opacity-0 absolute inset-0 -z-1"
+        class="absolute inset-0 -z-1 opacity-0"
         :multiple="maxSelectable > 1"
         :disabled="disabled"
         :accept="accept"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -36,7 +36,7 @@ const searchQuery = defineModel<string>('searchQuery')
 
 <template>
   <div
-    class="w-103 max-h-[640px] pt-4 bg-node-component-surface rounded-lg outline outline-offset-[-1px] outline-node-component-border flex flex-col"
+    class="flex max-h-[640px] w-103 flex-col rounded-lg bg-node-component-surface pt-4 outline outline-offset-[-1px] outline-node-component-border"
   >
     <!-- Filter -->
     <FormDropdownMenuFilter
@@ -53,7 +53,7 @@ const searchQuery = defineModel<string>('searchQuery')
       :is-querying="isQuerying"
     />
     <!-- List -->
-    <div class="flex overflow-hidden relative h-full">
+    <div class="relative flex h-full overflow-hidden">
       <div
         :class="
           cn(
@@ -67,11 +67,11 @@ const searchQuery = defineModel<string>('searchQuery')
         "
       >
         <div
-          class="absolute top-0 inset-x-3 h-5 bg-gradient-to-b from-backdrop to-transparent pointer-events-none z-10"
+          class="pointer-events-none absolute inset-x-3 top-0 z-10 h-5 bg-gradient-to-b from-backdrop to-transparent"
         />
         <div
           v-if="items.length === 0"
-          class="flex justify-center items-center absolute inset-0"
+          class="absolute inset-0 flex items-center justify-center"
         >
           <i
             title="No items"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue

@@ -44,7 +44,7 @@ function handleSortSelected(item: SortOption) {
 </script>
 
 <template>
-  <div class="flex gap-2 text-zinc-400 px-4">
+  <div class="flex gap-2 px-4 text-zinc-400">
     <label
       :class="
         cn(
@@ -58,9 +58,9 @@ function handleSortSelected(item: SortOption) {
     >
       <i
         v-if="isQuerying"
-        class="icon-[lucide--loader-circle] mr-2 size-4 animate-spin"
+        class="mr-2 icon-[lucide--loader-circle] size-4 animate-spin"
       />
-      <i v-else class="icon-[lucide--search] mr-2 size-4" />
+      <i v-else class="mr-2 icon-[lucide--search] size-4" />
       <input
         v-model="searchQuery"
         type="text"
@@ -85,7 +85,7 @@ function handleSortSelected(item: SortOption) {
     >
       <div
         v-if="sortSelected !== 'default'"
-        class="size-2 absolute top-[-2px] left-[-2px] bg-blue-500 rounded-full"
+        class="absolute top-[-2px] left-[-2px] size-2 rounded-full bg-blue-500"
       />
       <i class="icon-[lucide--arrow-up-down] size-4" />
     </button>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue

@@ -11,7 +11,7 @@ const filterSelected = defineModel<OptionId>('filterSelected')
 </script>
 
 <template>
-  <div class="flex gap-1 text-zinc-400 px-4 mb-4">
+  <div class="mb-4 flex gap-1 px-4 text-zinc-400">
     <div
       v-for="option in filterOptions"
       :key="option.id"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -92,10 +92,10 @@ function handleVideoLoad(event: Event) {
       <!-- Selected Icon -->
       <div
         v-if="selected"
-        class="rounded-full bg-blue-500 border-1 border-white size-4 absolute top-1 left-1"
+        class="absolute top-1 left-1 size-4 rounded-full border-1 border-white bg-blue-500"
       >
         <i
-          class="icon-[lucide--check] size-3 text-white -translate-y-[0.5px]"
+          class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-white"
         />
       </div>
       <video