docs: update vite installation (#250)

This commit is contained in:
Sadegh Barati 2024-01-18 16:45:38 +03:30 committed by GitHub
parent 5336fce443
commit 50586487d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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