use prettier tailwind plugin

package-lock.json

@@ -41,6 +41,7 @@
         "pino-pretty": "^7.5.1",
         "postcss": "^8.4.5",
         "prettier": "^2.5.1",
+        "prettier-plugin-tailwindcss": "^0.1.6",
         "prisma": "^3.8.1",
         "tailwindcss": "^3.0.15",
         "ts-node": "^10.4.0",
@@ -5410,6 +5411,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.6.tgz",
+      "integrity": "sha512-7OcFAv6d41KV61cDdn+mZycddAXQhv/B2yfA7ooK/yXPnBJf51Lx7iODOOQwOoMzSJQ/MJNqlK3BxqT9gDKVLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "prettier": ">=2.2.0"
+      }
+    },
     "node_modules/prisma": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/prisma/-/prisma-3.8.1.tgz",
@@ -11352,6 +11365,13 @@
         "fast-diff": "^1.1.2"
       }
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.6.tgz",
+      "integrity": "sha512-7OcFAv6d41KV61cDdn+mZycddAXQhv/B2yfA7ooK/yXPnBJf51Lx7iODOOQwOoMzSJQ/MJNqlK3BxqT9gDKVLA==",
+      "dev": true,
+      "requires": {}
+    },
     "prisma": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/prisma/-/prisma-3.8.1.tgz",

package.json

@@ -52,6 +52,7 @@
     "pino-pretty": "^7.5.1",
     "postcss": "^8.4.5",
     "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.6",
     "prisma": "^3.8.1",
     "tailwindcss": "^3.0.15",
     "ts-node": "^10.4.0",

src/App.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="h-full p-4">
     <Header />
-    <main class="h-full max-w-[900px] mx-auto">
+    <main class="mx-auto h-full max-w-[900px]">
       <router-view v-slot="{ Component }">
         <template v-if="Component">
           <div
             v-if="error"
-            class="flex flex-row space-x-2 items-center content-center justify-center m-20 text-red-500"
+            class="m-20 flex flex-row content-center items-center justify-center space-x-2 text-red-500"
           >
-            <IconError class="w-4 h-4" />
+            <IconError class="h-4 w-4" />
             <span>{{ t('errors.generic.text') }}</span>
           </div>
           <suspense v-else>
@@ -17,9 +17,9 @@
             </template>
             <template #fallback>
               <div
-                class="flex flex-row space-x-2 items-center content-center justify-center m-20"
+                class="m-20 flex flex-row content-center items-center justify-center space-x-2"
               >
-                <IconSpinner class="w-4 h-4" />
+                <IconSpinner class="h-4 w-4" />
                 <span> {{ t('common.loading.text') }} </span>
               </div>
             </template>

src/components/BaseButton.vue

@@ -5,9 +5,9 @@ defineProps<{
 </script>
 <template>
   <button
-    class="border-2 border-stone-200 dark:border-stone-700 text-stone-500 dark:text-white/70 hover:bg-stone-100 dark:hover:bg-stone-700 rounded-md py-1 px-2 flex-row items-center w-fit inline-flex justify-center"
+    class="inline-flex w-fit flex-row items-center justify-center rounded-md border-2 border-stone-200 py-1 px-2 text-stone-500 hover:bg-stone-100 dark:border-stone-700 dark:text-white/70 dark:hover:bg-stone-700"
   >
-    <component v-if="icon" :is="icon" class="w-4 h-4 mr-1" />
+    <component v-if="icon" :is="icon" class="mr-1 h-4 w-4" />
     <span>
       <slot />
     </span>

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-    class="flex flex-row justify-end items-center opacity-60 mb-2 space-x-2"
+    class="mb-2 flex flex-row items-center justify-end space-x-2 opacity-60"
   >
     <div @click="toggleMode">
       <IconLightDark class="h-6 w-6 cursor-pointer" />

src/components/Modal.vue

@@ -9,25 +9,25 @@ const modal = useModal()
   <div
     v-if="modal.isShown"
     data-test="modal"
-    class="fixed z-10 inset-0 overflow-y-auto"
+    class="fixed inset-0 z-10 overflow-y-auto"
     role="dialog"
   >
     <div
-      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
     >
       <div class="fixed inset-0 bg-gray-500/75 transition-opacity"></div>
 
-      <span class="hidden sm:inline-block sm:align-middle sm:h-screen"
+      <span class="hidden sm:inline-block sm:h-screen sm:align-middle"
         >&#8203;</span
       >
       <div
-        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        class="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle"
       >
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3
-                class="text-lg leading-6 font-medium text-gray-900"
+                class="text-lg font-medium leading-6 text-gray-900"
                 data-test="modal-title"
               >
                 {{ modal.title }}
@@ -40,7 +40,7 @@ const modal = useModal()
             </div>
           </div>
         </div>
-        <div class="bg-gray-50 px-4 py-3 sm:px-6 flex flex-row">
+        <div class="flex flex-row bg-gray-50 px-4 py-3 sm:px-6">
           <BaseButton
             class="w-full"
             @click="modal.confirm"
@@ -48,7 +48,7 @@ const modal = useModal()
             >{{ modal.confirmText }}</BaseButton
           >
           <BaseButton
-            class="w-full ml-2"
+            class="ml-2 w-full"
             @click="modal.cancel"
             data-test="modal-cancel-button"
             >{{ modal.cancelText }}</BaseButton

src/components/Tile.vue

@@ -6,11 +6,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="relative w-40 h-40 rounded-full overflow-hidden">
+  <div class="relative h-40 w-40 overflow-hidden rounded-full">
-    <img :src="imageSrc" class="object-cover w-full h-full" :alt="title" />
+    <img :src="imageSrc" class="h-full w-full object-cover" :alt="title" />
     <div
       v-if="title"
-      class="text-background absolute top-0 inset-x-0 h-40 flex justify-center items-center text-md text-white dark:text-white/75 text-center font-bold"
+      class="text-background text-md absolute inset-x-0 top-0 flex h-40 items-center justify-center text-center font-bold text-white dark:text-white/75"
     >
       {{ title }}
     </div>

src/components/WishlistItem.vue

@@ -15,31 +15,31 @@ const { t } = useI18n()
 
 <template>
   <div
-    class="h-fit sm:h-40 flex flex-col sm:flex-row space-x-0 sm:space-x-2 rounded-md border-stone-200 dark:border-stone-700 border-2 overflow-hidden"
+    class="flex h-fit flex-col space-x-0 overflow-hidden rounded-md border-2 border-stone-200 dark:border-stone-700 sm:h-40 sm:flex-row sm:space-x-2"
   >
     <img
       v-if="image"
       :src="image"
       :alt="title"
-      class="object-cover sm:aspect-[3/2] max-h-44 flex-shrink-0 flex-grow-0"
+      class="max-h-44 flex-shrink-0 flex-grow-0 object-cover sm:aspect-[3/2]"
     />
     <div
       v-else
-      class="sm:aspect-[3/2] max-h-44 flex-shrink-0 flex-grow-0 bg-stone-100 flex justify-center items-center"
+      class="flex max-h-44 flex-shrink-0 flex-grow-0 items-center justify-center bg-stone-100 sm:aspect-[3/2]"
     >
       <IconImagePlaceholder class="h-36 w-36 opacity-20" />
     </div>
 
-    <div class="flex flex-col p-2 justify-between">
+    <div class="flex flex-col justify-between p-2">
       <div>
-        <h1 class="text-lg mb-1 font-bold">{{ title }}</h1>
+        <h1 class="mb-1 text-lg font-bold">{{ title }}</h1>
         <p class="text-sm sm:line-clamp-3">
           {{ description }}
         </p>
       </div>
       <div class="flex flex-row items-baseline space-x-2">
         <BaseButton
-          class="mt-4 sm:mt-2 text-xs"
+          class="mt-4 text-xs sm:mt-2"
           :icon="IconCart"
           @click="$emit('bought')"
           >{{ t('components.wishlist-item.bought-button.text') }}</BaseButton
@@ -49,9 +49,9 @@ const { t } = useI18n()
           :href="url"
           target="_blank"
           rel="noopener"
-          class="text-sm mt-1 text-stone-500 dark:text-white/60 flex flex-row items-center w-fit"
+          class="mt-1 flex w-fit flex-row items-center text-sm text-stone-500 dark:text-white/60"
         >
-          <IconLink class="mr-1 w-4 h-4" />
+          <IconLink class="mr-1 h-4 w-4" />
           <span>{{
             t('components.wishlist-item.external-product-page-link.text')
           }}</span>

src/views/DetailView.vue

@@ -39,11 +39,11 @@ const bought = async (item: WishlistItemType): Promise<void> => {
 <template>
   <div v-if="list !== null" class="h-full">
     <div
-      class="flex flex-col md:flex-row space-x-0 md:space-x-6 space-y-2 md:space-y-0 items-center"
+      class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
     >
       <Tile :image-src="list.imageSrc" class="shrink-0"></Tile>
       <div>
-        <h1 class="text-2xl font-bold text-center md:text-left mb-2">
+        <h1 class="mb-2 text-center text-2xl font-bold md:text-left">
           {{ list.title }}
         </h1>
         <p v-if="list.description" class="text-lg">
@@ -53,7 +53,7 @@ const bought = async (item: WishlistItemType): Promise<void> => {
     </div>
     <div
       v-if="notBoughtItems && notBoughtItems.length > 0"
-      class="flex flex-col space-y-14 md:space-y-8 py-10"
+      class="flex flex-col space-y-14 py-10 md:space-y-8"
     >
       <WishlistItem
         v-for="(item, index) in notBoughtItems"
@@ -65,9 +65,9 @@ const bought = async (item: WishlistItemType): Promise<void> => {
         @bought="bought(item)"
       />
     </div>
-    <div v-else class="h-1/2 w-full flex justify-center">
+    <div v-else class="flex h-1/2 w-full justify-center">
       <div
-        class="flex flex-wrap flex-col sm:flex-row items-center sm:space-x-2 justify-center text-center sm:text-left text-xl text-gray-600/75 dark:text-white/70"
+        class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
       >
         <IconNoGift class="h-10 w-10" />
         <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>

src/views/HomeView.vue

@@ -9,7 +9,7 @@ await fetch()
 </script>
 
 <template>
-  <h1 class="text-3xl text-semibold text-center">
+  <h1 class="text-semibold text-center text-3xl">
     {{ t('common.app-title.text') }}
   </h1>
   <div v-if="lists" class="flex flex-row flex-wrap justify-around p-10">

src/views/NotFound.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mt-20 flex flex-wrap flex-col sm:flex-row items-center sm:space-x-2 justify-center text-center sm:text-left text-xl"
+    class="mt-20 flex flex-col flex-wrap items-center justify-center text-center text-xl sm:flex-row sm:space-x-2 sm:text-left"
   >
     <IconCloudQuestion class="h-12 w-12" />
     <h1>{{ t('errors.not-found.text') }}</h1>