Skip to content

Commit

Permalink
docs: update vite installation (#250)
Browse files Browse the repository at this point in the history
  • Loading branch information
sadeghbarati authored Jan 18, 2024
1 parent 5336fce commit 5058648
Showing 1 changed file with 55 additions and 5 deletions.
60 changes: 55 additions & 5 deletions apps/www/src/content/docs/installation/vite.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 5058648

Please sign in to comment.