From 9b8f3ee90423676fcbf48cbb3e2e280de083e5bb Mon Sep 17 00:00:00 2001
From: Tim Wundenberg <tim@wundenbergs.de>
Date: Tue, 11 Nov 2025 21:44:31 +0100
Subject: [PATCH] feat: add tailwindcss sorter for prettier

---
 .prettierrc                             |  4 +-
 package-lock.json                       | 84 ++++++++++++++++++++++++-
 package.json                            |  5 +-
 src/main/resources/templates/index.html | 22 +++----
 4 files changed, 99 insertions(+), 16 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 0967ef4..b4bfed3 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1 +1,3 @@
-{}
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/package-lock.json b/package-lock.json
index 1c7750e..d06437b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,10 @@
       "version": "1.0.0",
       "license": "ISC",
       "devDependencies": {
-        "@tailwindcss/cli": "^4.1.17",
+        "@tailwindcss/cli": "4.1.17",
         "prettier": "3.6.2",
-        "tailwindcss": "^4.1.17"
+        "prettier-plugin-tailwindcss": "0.7.1",
+        "tailwindcss": "4.1.17"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
@@ -1100,6 +1101,85 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz",
+      "integrity": "sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/package.json b/package.json
index 4a8c035..85938f4 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   },
   "devDependencies": {
     "@tailwindcss/cli": "4.1.17",
-    "tailwindcss": "4.1.17",
-    "prettier": "3.6.2"
+    "prettier": "3.6.2",
+    "prettier-plugin-tailwindcss": "0.7.1",
+    "tailwindcss": "4.1.17"
   }
 }
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index d067ba8..672cbb0 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -5,12 +5,12 @@
     <title>Projektverwaltung</title>
     <link href="styles.css" rel="stylesheet" />
   </head>
-  <body class="text-gray-700 p-20">
+  <body class="p-20 text-gray-700">
     <h1 class="text-2xl">Projektverwaltung</h1>
     <h2 class="text-4xl">Laufende Projekte</h2>
     <div class="flex flex-wrap gap-10">
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -19,7 +19,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -28,7 +28,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -37,7 +37,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -46,7 +46,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -55,7 +55,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -64,7 +64,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -73,7 +73,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -82,7 +82,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">
@@ -91,7 +91,7 @@
         </p>
       </section>
       <section
-        class="select-none bg-blue-100 p-5 rounded-2xl max-w-64 flex flex-col gap-2 cursor-pointer transition-all hover:bg-blue-200 active:bg-blue-300"
+        class="flex max-w-64 cursor-pointer flex-col gap-2 rounded-2xl bg-blue-100 p-5 transition-all select-none hover:bg-blue-200 active:bg-blue-300"
       >
         <h3 class="text-lg">GoLive ERP</h3>
         <p class="text-gray-500">