diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md index b1a512ef..cbb706a2 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 -``` + + + + + 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: {...} + }) + ``` + + + + + + + ```bash + npm install -D tailwindcss autoprefixer postcss + ``` + + #### `postcss.config.js` + + ```js + module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, + } + ``` + + + + ### Edit tsconfig.json @@ -42,6 +92,11 @@ Add the code below to the compilerOptions of your tsconfig.json so your app can Add the code below to the vite.config.ts so your app can resolve paths without error +```bash +# (so you can import "path" without error) +npm i -D @types/node +``` + ```typescript import path from "path" import vue from "@vitejs/plugin-vue"