use prettier-plugin-tailwindcss to keep class names organized

web/.eslintrc.cjs

@@ -44,6 +44,12 @@ module.exports = {
       { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
     ],
     "no-console": "error",
+    "prettier/prettier": [
+      "warn",
+      {
+        plugins: ["prettier-plugin-tailwindcss"],
+      },
+    ],
   },
   overrides: [
     {

web/package-lock.json

@@ -96,9 +96,10 @@
         "fake-indexeddb": "^5.0.2",
         "jest-websocket-mock": "^2.5.0",
         "jsdom": "^24.0.0",
-        "msw": "^2.2.14",
+        "msw": "^2.3.0",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
+        "prettier-plugin-tailwindcss": "^0.5.14",
         "tailwindcss": "^3.4.3",
         "typescript": "^5.4.5",
         "vite": "^5.2.11",
@@ -848,9 +849,9 @@
       }
     },
     "node_modules/@mswjs/interceptors": {
-      "version": "0.26.15",
+      "version": "0.29.1",
-      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.26.15.tgz",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.29.1.tgz",
-      "integrity": "sha512-HM47Lu1YFmnYHKMBynFfjCp0U/yRskHj/8QEJW0CBEPOlw8Gkmjfll+S9b8M7V5CNDw2/ciRxjjnWeaCiblSIQ==",
+      "integrity": "sha512-3rDakgJZ77+RiQUuSK69t1F0m8BQKA8Vh5DCS5V0DWvNY67zob2JhhQrhCO0AKLGINTRSFd1tBaHcJTkhefoSw==",
       "dev": true,
       "dependencies": {
         "@open-draft/deferred-promise": "^2.2.0",
@@ -5595,9 +5596,9 @@
       "dev": true
     },
     "node_modules/msw": {
-      "version": "2.2.14",
+      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/msw/-/msw-2.2.14.tgz",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.3.0.tgz",
-      "integrity": "sha512-64i8rNCa1xzDK8ZYsTrVMli05D687jty8+Th+PU5VTbJ2/4P7fkQFVyDQ6ZFT5FrNR8z2BHhbY47fKNvfHrumA==",
+      "integrity": "sha512-cDr1q/QTMzaWhY8n9lpGhceY209k29UZtdTgJ3P8Bzne3TSMchX2EM/ldvn4ATLOktpCefCU2gcEgzHc31GTPw==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -5605,7 +5606,7 @@
         "@bundled-es-modules/statuses": "^1.0.1",
         "@inquirer/confirm": "^3.0.0",
         "@mswjs/cookies": "^1.1.0",
-        "@mswjs/interceptors": "^0.26.14",
+        "@mswjs/interceptors": "^0.29.0",
         "@open-draft/until": "^2.1.0",
         "@types/cookie": "^0.6.0",
         "@types/statuses": "^2.0.4",
@@ -6181,6 +6182,80 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz",
+      "integrity": "sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",

web/package.json

@@ -104,6 +104,7 @@
     "msw": "^2.3.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",