InstallationVite

Vite

Install and configure Vite.

1

Create a new project:

npm create vite@latest my-app
2

After the above command, install and enter the application:

cd my-app && npm install
3

Add Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
4

Edit tsconfig.json file:

tsconfig.json
{
  // ...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
	// ...
}
5

Edit tsconfig.app.json file:

tsconfig.app.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
6

Update vite.config.ts:

# So you can import 'path' without error
npm i -D @types/node
vite.config.ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import path from "path"
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
Back
Next.js