🚨 Add prettier config with tailwind sorting

apps/web/.eslintrc.cjs

@@ -8,8 +8,8 @@
 module.exports = {
   root: true,
   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
+    ecmaVersion: "latest",
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
     },
@@ -19,63 +19,66 @@ module.exports = {
     commonjs: true,
     es6: true,
   },
-  ignorePatterns: ['!**/.server', '!**/.client'],
+  ignorePatterns: ["!**/.server", "!**/.client"],
 
   // Base config
-  extends: ['eslint:recommended'],
+  extends: ["eslint:recommended"],
 
   overrides: [
     // React
     {
-      files: ['**/*.{js,jsx,ts,tsx}'],
-      plugins: ['react', 'jsx-a11y'],
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
       extends: [
-        'plugin:react/recommended',
-        'plugin:react/jsx-runtime',
-        'plugin:react-hooks/recommended',
-        'plugin:jsx-a11y/recommended',
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
       ],
       settings: {
         react: {
-          version: 'detect',
+          version: "detect",
         },
-        formComponents: ['Form'],
+        formComponents: ["Form"],
         linkComponents: [
-          { name: 'Link', linkAttribute: 'to' },
-          { name: 'NavLink', linkAttribute: 'to' },
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
         ],
-        'import/resolver': {
-          typescript: {},
+        "import/resolver": {
+          typescript: {
+            project: "apps/web/tsconfig.json",
+          },
         },
       },
     },
 
     // Typescript
     {
-      files: ['**/*.{ts,tsx}'],
-      plugins: ['@typescript-eslint', 'import'],
-      parser: '@typescript-eslint/parser',
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
       settings: {
-        'import/internal-regex': '^~/',
-        'import/resolver': {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
           node: {
-            extensions: ['.ts', '.tsx'],
+            extensions: [".ts", ".tsx"],
           },
           typescript: {
+            project: "apps/web/tsconfig.json",
             alwaysTryTypes: true,
           },
         },
       },
       extends: [
-        'plugin:@typescript-eslint/recommended',
-        'plugin:import/recommended',
-        'plugin:import/typescript',
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
       ],
     },
 
     // Node
     {
-      files: ['.eslintrc.cjs'],
+      files: [".eslintrc.cjs"],
       env: {
         node: true,
       },

apps/web/package.json

@@ -47,6 +47,8 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.38",
+    "prettier": "^2.0.4",
+    "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",

apps/web/prettier.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [require('prettier-plugin-tailwindcss')],
+  singleQuote: true,
+  semi: true,
+  trailingComma: 'all',
+};