chore: docs guides remix - upgrade from classic to vite (#1351)

SutuSebastian · web-flow · commit 749734e6fb81 · 2024-04-05T13:58:12.000+02:00
diff --git a/apps/web/content/docs/guides/remix.mdx b/apps/web/content/docs/guides/remix.mdx
@@ -36,13 +36,13 @@ npx create-remix@latest
 1. Install `tailwindcss` and its peer dependencies:
 
 ```bash
-npm i -D tailwindcss
+npm install -D tailwindcss postcss autoprefixer
 ```
 
-2. Generate `tailwind.config.ts` file:
+2. Generate `tailwind.config.ts` and `postcss.config.js` files:
 
 ```bash
-npx tailwindcss init --ts
+npx tailwindcss init --ts -p
 ```
 
 3. Add the paths to all of your template files in your `tailwind.config.ts` file:
@@ -69,8 +69,9 @@ export default {
 
 5. Import the newly-created `./app/tailwind.css` file in your `./app/root.tsx` file:
 
-```tsx {1,5}
-import stylesheet from "~/tailwind.css";
+```tsx {1,2,4-7}
+import { LinksFunction } from "@remix-run/node";
+import stylesheet from "~/tailwind.css?url";
 
 export const links: LinksFunction = () => [
   // ...
@@ -120,7 +121,7 @@ In server side rendered applications, such as Remix, to avoid page flicker (if `
 
 import { ThemeModeScript } from "flowbite-react";
 
-export default function App() {
+export default function Layout() {
   return (
     <html lang="en">
       <head>
@@ -137,6 +138,8 @@ export default function App() {
 Now that you have successfully installed Flowbite React you can start using the components from the library.
 
 ```tsx
+// app/routes/_index.tsx
+
 import { Button } from "flowbite-react";
 
 export default function Index() {
