feat: add eslint-plugin-tailwindcss (#199)

frontend/.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     "@nuxtjs/eslint-config-typescript",
     "plugin:vue/vue3-recommended",
     "plugin:prettier/recommended",
+    "plugin:tailwindcss/recommended",
   ],
   parserOptions: {
     ecmaVersion: "latest",

frontend/components/App/Header.vue

@@ -68,23 +68,23 @@
   <LabelCreateModal v-model="modals.label" />
   <LocationCreateModal v-model="modals.location" />
 
-  <div class="bg-neutral absolute shadow-xl top-0 h-[20rem] max-h-96 -z-10 w-full"></div>
+  <div class="absolute top-0 -z-10 h-80 max-h-96 w-full bg-neutral shadow-xl"></div>
 
-  <BaseContainer cmp="header" class="py-6 max-w-none">
+  <BaseContainer cmp="header" class="max-w-none py-6">
     <BaseContainer>
       <NuxtLink to="/home">
-        <h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
+        <h2 class="mt-1 flex text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl">
           HomeB
-          <AppLogo class="w-12 -mb-4" />
+          <AppLogo class="-mb-4 w-12" />
           x
         </h2>
       </NuxtLink>
-      <div class="ml-1 mt-2 text-lg text-neutral-content/75 space-x-2">
+      <div class="ml-1 mt-2 space-x-2 text-lg text-neutral-content/75">
         <template v-for="link in links">
           <NuxtLink
             v-if="!link.action"
             :key="link.name"
-            class="hover:text-base-content transition-color duration-200 italic"
+            class="italic transition-colors duration-200 hover:text-base-content"
             :to="link.href"
           >
             {{ link.name }}
@@ -93,23 +93,23 @@
             v-else
             :key="link.name + 'link'"
             for="location-form-modal"
-            class="hover:text-base-content transition-color duration-200 italic"
+            class="italic transition-colors duration-200 hover:text-base-content"
             @click="link.action"
           >
             {{ link.name }}
           </button>
           <span v-if="!link.last" :key="link.name"> / </span>
         </template>
       </div>
-      <div class="flex mt-6">
+      <div class="mt-6 flex">
         <div class="dropdown">
           <label tabindex="0" class="btn btn-primary btn-sm">
             <span>
-              <MdiPlus class="mr-1 -ml-1" />
+              <MdiPlus class="-ml-1 mr-1" />
             </span>
             Create
           </label>
-          <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+          <ul tabindex="0" class="dropdown-content menu rounded-box w-52 bg-base-100 p-2 shadow">
             <li v-for="btn in dropdown" :key="btn.name">
               <button @click="btn.action">
                 {{ btn.name }}

frontend/components/App/ImportDialog.vue

@@ -4,11 +4,11 @@
     <p>
       {{ $t("components.app.import_dialog.description") }}
     </p>
-    <div class="alert alert-warning shadow-lg mt-4">
+    <div class="alert alert-warning mt-4 shadow-lg">
       <div>
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current flex-shrink-0 h-6 w-6 mb-auto"
+          class="mb-auto size-6 shrink-0 stroke-current"
           fill="none"
           viewBox="0 0 24 24"
         >
@@ -30,10 +30,10 @@
         <input ref="importRef" type="file" class="hidden" accept=".csv,.tsv" @change="setFile" />
 
         <BaseButton type="button" @click="uploadCsv">
-          <MdiUpload class="h-5 w-5 mr-2" />
+          <MdiUpload class="mr-2 size-5" />
           {{ $t("components.app.import_dialog.upload") }}
         </BaseButton>
-        <p class="text-center pt-4 -mb-5">
+        <p class="-mb-5 pt-4 text-center">
           {{ importCsv?.name }}
         </p>
       </div>

frontend/components/App/Toast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="force-above fixed top-2 right-2 w-[300px]">
+  <div class="fixed right-2 top-2 z-[9999] w-[300px]">
     <TransitionGroup name="notify" tag="div">
       <div
         v-for="(notify, index) in notifications.slice(0, 4)"
@@ -14,14 +14,14 @@
       >
         <div class="flex gap-1">
           <template v-if="notify.type == 'success'">
-            <MdiCheckboxMarkedCircle class="h-5 w-5" />
+            <MdiCheckboxMarkedCircle class="size-5" />
           </template>
           <template v-if="notify.type == 'info'">
-            <MdiInformationSlabCircle class="h-5 w-5" />
+            <MdiInformationSlabCircle class="size-5" />
           </template>
 
           <template v-if="notify.type == 'error'">
-            <MdiAlert class="h-5 w-5" />
+            <MdiAlert class="size-5" />
           </template>
           {{ notify.message }}
         </div>
@@ -41,10 +41,6 @@
 </script>
 
 <style scoped>
-  .force-above {
-    z-index: 9999;
-  }
-
   .notify-move,
   .notify-enter-active,
   .notify-leave-active {

frontend/components/Base/Card.vue

@@ -2,12 +2,12 @@
   <div class="card bg-base-100 shadow-xl sm:rounded-lg">
     <div v-if="$slots.title" class="px-4 py-5 sm:px-6">
       <component :is="collapsable ? 'button' : 'div'" v-on="collapsable ? { click: toggle } : {}">
-        <h3 class="text-lg font-medium leading-6 flex items-center">
+        <h3 class="flex items-center text-lg font-medium leading-6">
           <slot name="title"></slot>
           <template v-if="collapsable">
-            <span class="ml-2 swap swap-rotate" :class="`${collapsed ? 'swap-active' : ''}`">
-              <MdiChevronRight class="h-6 w-6 swap-on" />
-              <MdiChevronDown class="h-6 w-6 swap-off" />
+            <span class="swap swap-rotate ml-2" :class="`${collapsed ? 'swap-active' : ''}`">
+              <MdiChevronRight class="swap-on size-6" />
+              <MdiChevronDown class="swap-off size-6" />
             </span>
           </template>
         </h3>

frontend/components/Base/Container.vue

@@ -8,7 +8,7 @@
 </script>
 
 <template>
-  <component :is="cmp" class="container max-w-6xl mx-auto px-3">
+  <component :is="cmp" class="container mx-auto max-w-6xl px-3">
     <slot />
   </component>
 </template>

frontend/components/Base/Modal.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="z-[999]">
     <input :id="modalId" v-model="modal" type="checkbox" class="modal-toggle" />
-    <div class="modal modal-bottom sm:modal-middle overflow-visible">
-      <div class="modal-box overflow-visible relative">
-        <button :for="modalId" class="btn btn-sm btn-circle absolute right-2 top-2" @click="close">✕</button>
+    <div class="modal modal-bottom overflow-visible sm:modal-middle">
+      <div class="modal-box relative overflow-visible">
+        <button :for="modalId" class="btn btn-circle btn-sm absolute right-2 top-2" @click="close">✕</button>
 
-        <h3 class="font-bold text-lg">
+        <h3 class="text-lg font-bold">
           <slot name="title"></slot>
         </h3>
         <slot> </slot>

frontend/components/Base/SectionHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="pb-3">
     <h3
-      class="text-3xl font-bold tracking-tight flex items-center"
+      class="flex items-center text-3xl font-bold tracking-tight"
       :class="{
         'text-neutral-content': dark,
         'text-content': !dark,

frontend/components/DetailAction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-10 py-6">
+  <div class="grid grid-cols-1 gap-10 py-6 md:grid-cols-4">
     <div class="col-span-3">
       <h4 class="mb-1 text-lg font-semibold">
         <slot name="title"></slot>

frontend/components/Form/Autocomplete.vue

@@ -8,13 +8,13 @@
         <input
           v-model="internalSearch"
           tabindex="0"
-          class="input w-full items-center flex flex-wrap border border-gray-400 rounded-lg"
+          class="input flex w-full flex-wrap items-center rounded-lg border border-gray-400"
           @keyup.enter="selectFirst"
         />
         <button
           v-if="!!modelValue && Object.keys(modelValue).length !== 0"
           style="transform: translateY(-50%)"
-          class="top-1/2 absolute right-2 btn btn-xs btn-circle no-animation"
+          class="btn btn-circle btn-xs no-animation absolute right-2 top-1/2"
           @click="clear"
         >
           x
@@ -23,7 +23,7 @@
       <ul
         tabindex="0"
         style="display: inline"
-        class="dropdown-content mb-1 menu shadow border border-gray-400 rounded bg-base-100 w-full z-[9999] max-h-60 overflow-y-scroll"
+        class="dropdown-content menu z-[9999] mb-1 max-h-60 w-full overflow-y-scroll rounded border border-gray-400 bg-base-100 shadow"
       >
         <li v-for="(obj, idx) in filtered" :key="idx">
           <div type="button" @click="select(obj)">

frontend/components/Form/Autocomplete2.vue

@@ -7,7 +7,7 @@
       <div class="relative">
         <ComboboxInput
           :display-value="i => extractDisplay(i as SupportValues)"
-          class="w-full input input-bordered"
+          class="input input-bordered w-full"
           @change="search = $event.target.value"
         />
         <button
@@ -16,14 +16,14 @@
           class="absolute inset-y-0 right-6 flex items-center rounded-r-md px-2 focus:outline-none"
           @click="clear"
         >
-          <MdiClose class="w-5 h-5" />
+          <MdiClose class="size-5" />
         </button>
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
-          <MdiChevronDown class="w-5 h-5" />
+          <MdiChevronDown class="size-5" />
         </ComboboxButton>
         <ComboboxOptions
           v-if="computedItems.length > 0"
-          class="absolute dropdown-content z-10 mt-2 max-h-60 w-full overflow-auto rounded-md card bg-base-100 border border-gray-400"
+          class="card dropdown-content absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded-md border border-gray-400 bg-base-100"
         >
           <ComboboxOption
             v-for="item in computedItems"
@@ -34,7 +34,7 @@
           >
             <li
               :class="[
-                'relative cursor-default select-none py-2 pl-3 pr-9 duration-75 ease-in-out transition-colors',
+                'relative cursor-default select-none py-2 pl-3 pr-9 transition-colors duration-75 ease-in-out',
                 active ? 'bg-primary text-primary-content' : 'text-base-content',
               ]"
             >
@@ -45,11 +45,11 @@
                 <span
                   v-if="selected"
                   :class="[
-                    'absolute inset-y-0 right-0 flex text-primary items-center pr-4',
+                    'absolute inset-y-0 right-0 flex items-center pr-4 text-primary',
                     active ? 'text-primary-content' : 'bg-primary',
                   ]"
                 >
-                  <MdiCheck class="h-5 w-5" aria-hidden="true" />
+                  <MdiCheck class="size-5" aria-hidden="true" />
                 </span>
               </slot>
             </li>

frontend/components/Form/Multiselect.vue

@@ -4,20 +4,20 @@
       <span class="label-text">{{ label }}</span>
     </label>
     <div class="dropdown dropdown-top sm:dropdown-end">
-      <div tabindex="0" class="w-full min-h-[48px] flex gap-2 p-4 flex-wrap border border-gray-400 rounded-lg">
+      <div tabindex="0" class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-gray-400 p-4">
         <span v-for="itm in value" :key="name != '' ? itm[name] : itm" class="badge">
           {{ name != "" ? itm[name] : itm }}
         </span>
       </div>
       <div
         tabindex="0"
         style="display: inline"
-        class="dropdown-content mb-1 menu w-full z-[9999] shadow border border-gray-400 rounded bg-base-100"
+        class="dropdown-content menu z-[9999] mb-1 w-full rounded border border-gray-400 bg-base-100 shadow"
       >
         <div class="m-2">
-          <input v-model="search" placeholder="Search…" class="input input-sm input-bordered w-full" />
+          <input v-model="search" placeholder="Search…" class="input input-bordered input-sm w-full" />
         </div>
-        <ul class="overflow-y-scroll max-h-60">
+        <ul class="max-h-60 overflow-y-scroll">
           <li
             v-for="(obj, idx) in filteredItems"
             :key="idx"

frontend/components/Form/Password.vue

@@ -3,11 +3,11 @@
     <FormTextField v-model="value" placeholder="Password" :label="label" :type="inputType"> </FormTextField>
     <button
       type="button"
-      class="inline-flex p-1 ml-1 justify-center mt-auto mb-3 tooltip absolute top-11 right-3"
+      class="tooltip absolute right-3 top-11 mb-3 ml-1 mt-auto inline-flex justify-center p-1"
       data-tip="Toggle Password Show"
       @click="toggle()"
     >
-      <MdiEye name="mdi-eye" class="h-5 w-5" />
+      <MdiEye name="mdi-eye" class="size-5" />
     </button>
   </div>
 </template>

frontend/components/Form/TextArea.vue

@@ -3,7 +3,7 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <textarea ref="el" v-model="value" class="textarea w-full textarea-bordered h-28" :placeholder="placeholder" />
+    <textarea ref="el" v-model="value" class="textarea textarea-bordered h-28 w-full" :placeholder="placeholder" />
     <label v-if="limit" class="label">
       <span class="label-text-alt"></span>
       <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
@@ -16,7 +16,7 @@
     <textarea
       ref="el"
       v-model="value"
-      class="textarea textarea-bordered w-full col-span-3 mt-3 h-28"
+      class="textarea textarea-bordered col-span-3 mt-3 h-28 w-full"
       auto-grow
       :placeholder="placeholder"
       auto-height

frontend/components/Form/TextField.vue

@@ -9,7 +9,7 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <input v-model="value" :placeholder="placeholder" class="input input-bordered col-span-3 w-full mt-2" />
+    <input v-model="value" :placeholder="placeholder" class="input input-bordered col-span-3 mt-2 w-full" />
   </div>
 </template>
 

frontend/components/Item/AttachmentsList.vue

@@ -6,15 +6,15 @@
       class="flex items-center justify-between py-3 pl-3 pr-4 text-sm"
     >
       <div class="flex w-0 flex-1 items-center">
-        <MdiPaperclip class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+        <MdiPaperclip class="size-5 shrink-0 text-gray-400" aria-hidden="true" />
         <span class="ml-2 w-0 flex-1 truncate"> {{ attachment.document.title }}</span>
       </div>
-      <div class="ml-4 flex-shrink-0">
+      <div class="ml-4 shrink-0">
         <a class="tooltip mr-2" data-tip="Download" :href="attachmentURL(attachment.id)" target="_blank">
-          <MdiDownload class="h-5 w-5" />
+          <MdiDownload class="size-5" />
         </a>
         <a class="tooltip" data-tip="Open" :href="attachmentURL(attachment.id)" target="_blank">
-          <MdiOpenInNew class="h-5 w-5" />
+          <MdiOpenInNew class="size-5" />
         </a>
       </div>
     </li>