docs(www): update Remix install to use Vite, tip for className lint

apps/www/content/docs/installation/remix.mdx

@@ -10,7 +10,16 @@ description: Install and configure Remix.
 Start by creating a new Remix project using `create-remix`:
 
 ```bash
-npx create-remix@latest my-app
+npx create-remix@latest
+```
+### Add Tailwind and its configuration
+
+Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+
+npx tailwindcss init -p
 ```
 
 ### Run the CLI
@@ -44,47 +53,13 @@ Do you want to use CSS variables for colors? › no / yes
 - The `app/lib` folder contains all the utility functions. We have a `utils.ts` where we define the `cn` helper.
 - The `app/tailwind.css` file contains the global CSS.
 
-### Install Tailwind CSS
-
-```bash
-npm add -D tailwindcss@latest autoprefixer@latest
-```
-
-Then we create a `postcss.config.js` file:
-
-```js
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
-```
-
-And finally we add the following to our `remix.config.js` file:
-
-```js {4-5}
-/** @type {import('@remix-run/dev').AppConfig} */
-export default {
-  ...
-  tailwind: true,
-  postcss: true,
-  ...
-};
-```
 
 ### Add `tailwind.css` to your app
 
 In your `app/root.tsx` file, import the `tailwind.css` file:
 
-```js {1, 4}
-import styles from "./tailwind.css"
-
-export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: styles },
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-]
-```
+```js {1,2,5}
+import '~/tailwind.css'
 
 ### That's it
 
@@ -107,5 +82,79 @@ export default function Home() {
   )
 }
 ```
+### Fix Lint error
+
+#### 'className' is missing in props validationeslintreact/prop-types
+
+To resolve the lint error 'className' is missing in props validation eslintreact/prop-types, add the following rule to the eslintrc.cjs file within the React overrides section.
+```json
+  rules: {
+        "react/prop-types": "off",
+  }
+```
+```cjs {27,28,29} showLineNumbers
+// .eslintrc.cjs
+
+overrides: [
+    // React
+    {
+      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",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+      rules: {
+        "react/prop-types": "off",
+      }
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+```
 
 </Steps>