feat: add tailwindcss sorter for prettier

2025-11-11 21:44:31 +01:00
parent 69928655e0
commit 9b8f3ee904
4 changed files with 99 additions and 16 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -1 +1,3 @@
-{}
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
--- 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",
--- 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"
  }
 }
--- 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">