Install and configure Vite

Create a new Vite Project

Terminal

pnpm create vite@latest my-vite-app -- --template react
# Or
npm create vite@latest my-vite-app
# Or
bun create-vite@latest my-vite-app
# Or
yarn create vite@latest my-vite-app

Install dependencies

Terminal

cd my-vite-app
 
pnpm install
# Or
npm install
# Or
bun install
# Or
yarn install

Start the development server

Terminal

pnpm dev
# Or
npm run dev
# Or
bun dev
# Or
yarn dev

If your project doesn’t have Tailwind CSS, install it, otherwise skip this step.

Install and Configure Tailwind CSS

Install Tailwind CSS

Terminal

pnpm install -D tailwindcss postcss autoprefixer
# Or
npm install -D tailwindcss postcss autoprefixer
# Or
bun add -D tailwindcss postcss autoprefixer
# Or
yarn add -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS

Terminal

pnpm dlx tailwindcss init --ts -p
# Or
npx tailwindcss init --ts -p
# Or
yarn tailwindcss init --ts -p
# Or
bunx --bun tailwindcss init --ts -p

Configure Tailwind CSS

tailwind.config.ts

import type { Config } from "tailwindcss";
 
export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Add the Tailwind directives to your CSS `src/index.css`

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Start the development server

Terminal

pnpm dev
# Or
npm run dev
# Or
bun dev
# Or
yarn dev

Start using Tailwind CSS

_index.tsx

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

If your project doesn’t have Framer motion, install it, otherwise skip this step.

Install Framer motion

Terminal

pnpm add motion
# Or
npm install motion
# Or
bun add motion
# Or
yarn add motion

Features can now be used in your project via the `motion/react`.

page.tsx

import { motion } from "motion/react";
 
export default function Home() {
  return <motion.div>Hello world!</motion.div>;
}

Vite

On this page