Vite

Install and configure Vite.

Create a new project

npm create vite@latest

Install dependencies

cd my-app && npm i

Install Tailwind v4

npm i tailwindcss @tailwindcss/vite

Put the following code in styles/globals.css

styles/globals.css

@import "tailwindcss";

Edit tsconfig.json file

tsconfig.json

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

Edit tsconfig.app.json file

tsconfig.app.json

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

Update vite.config.ts

Terminal

# 'path' doesn't work without this package
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"),
    },
  },
})