docs: update vite installation (#250)
This commit is contained in:
parent
5336fce443
commit
50586487d5
|
|
@ -19,13 +19,63 @@ npm create vite@latest my-vue-app -- --template vue-ts
|
||||||
|
|
||||||
### Add Tailwind and its configuration
|
### 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
|
### Edit tsconfig.json
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user