From 50586487d5567950ae337c8394c65ef06ef821ce Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 18 Jan 2024 16:45:38 +0330
Subject: [PATCH] docs: update vite installation (#250)

---
 .../www/src/content/docs/installation/vite.md | 60 +++++++++++++++++--
 1 file changed, 55 insertions(+), 5 deletions(-)

diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md
index 1763b867c..cbb706a24 100644
--- a/apps/www/src/content/docs/installation/vite.md
+++ b/apps/www/src/content/docs/installation/vite.md
@@ -19,13 +19,63 @@ npm create vite@latest my-vue-app -- --template vue-ts
 
 ### Add Tailwind and its configuration
 
-Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files:
+Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and configure `postcss` plugins
 
-```bash
-npm install -D tailwindcss postcss autoprefixer
 
-npx tailwindcss init -p
-```
+
+<TabsMarkdown>
+  <TabMarkdown title="vite.config.ts">
+
+  Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json
+
+  ```bash
+  npm install -D tailwindcss autoprefixer
+  ```
+
+  #### `vite.config`
+
+  ```typescript {5,6,10-14}
+  import path from "path"
+  import { defineConfig } from "vite"
+  import vue from "@vitejs/plugin-vue"
+
+  import tailwind from "tailwindcss"
+  import autoprefixer from "autoprefixer"
+
+  export default defineConfig({
+    plugins: [vue()],
+    css: {
+      postcss: {
+        plugins: [tailwind(), autoprefixer()],
+      },
+    },
+    resolve: {...}
+  })
+  ```
+
+  </TabMarkdown>
+
+
+  <TabMarkdown title="postcss.config.js">
+
+  ```bash
+  npm install -D tailwindcss autoprefixer postcss
+  ```
+
+  #### `postcss.config.js`
+
+  ```js
+  module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }
+  ```
+
+  </TabMarkdown>
+</TabsMarkdown>
+
 
 ### Edit tsconfig.json