chore: add prettier plugin for tailwind to sort tailwind classes

This sorts the classes consistently making it easy to figure what classes that have been applied

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

.prettierrc

@@ -2,5 +2,6 @@
   "semi": true,
   "singleQuote": false,
   "trailingComma": "none",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.storybook/preview-head.html

@@ -1,6 +1,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-    href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap"
-    rel="stylesheet"
-/>
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap"
+  rel="stylesheet"
+/>

development.md

@@ -11,6 +11,7 @@ typescript: {
   check: false,
 }
 ```
+
 With CRA it's more complicated.
 
 ### css prop type
@@ -21,11 +22,10 @@ For type information related to css prop types (see: [issue-comment](https://git
   "jsxImportSource": "@emotion/react",
 ```
 
-
 ## Packages
 
 ### @headlressui/react
 
-We are using incsider (master) version of headlessui/react, for the `by` property on `Combobox`.  Without `by`, selected item logic was difficult to achieve.
+We are using incsider (master) version of headlessui/react, for the `by` property on `Combobox`. Without `by`, selected item logic was difficult to achieve.
 
 Be careful about updating this package.

e2e/.eslintrc.js

@@ -1,33 +1,25 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended"
-    ],
-    "overrides": [
-        {
-            "env": {
-                "node": true
-            },
-            "files": [
-                ".eslintrc.{js,cjs}"
-            ],
-            "parserOptions": {
-                "sourceType": "script"
-            }
-        }
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "@typescript-eslint"
-    ],
-    "rules": {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  overrides: [
+    {
+      env: {
+        node: true
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script"
+      }
     }
-}
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module"
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {}
+};

package.json

@@ -194,7 +194,8 @@
     "postcss": "^8",
     "postcss-loader": "^7.0.1",
     "postcss-nesting": "^12.1.2",
-    "prettier": "^2.3.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "semantic-release": "^22.0.12",
     "source-map-explorer": "^2.5.2",
     "storybook": "^7.6.17",

pages/_app.tsx

@@ -16,7 +16,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     <QueryClientProvider client={queryClient}>
       <div
         id="root"
-        className="flex flex-col w-screen h-screen overflow-auto"
+        className="flex h-screen w-screen flex-col overflow-auto"
         suppressHydrationWarning
       >
         {authProvider === "clerk" ? (