Next.js + Tailwind — Setup Procedure

Next.js + Tailwind — Setup Procedure

End-to-end setup: scaffold a Next.js app → install Tailwind → add components → add animations → add icons.

1. Create a new Next.js project

Gives you: React by default, file-based routing, easy Vercel hosting later.

npx create-next-app@latest my-app
cd my-app
npm run dev

Visit http://localhost:3000 to see your app!

2. Install and set up Tailwind CSS

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

In tailwind.config.js:

content: [
  "./app/**/*.{js,ts,jsx,tsx}",
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}"
]

In ./styles/globals.css, clear it and add:

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

Tailwind is now ready. Try replacing the default content with:

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 text-xl">
      Hello from Tailwind!
    </div>
  );
}

3. Use React components

Create a file in components/Header.js:

export default function Header() {
  return <h1 className="text-3xl font-bold">Welcome to My Site</h1>;
}

Use it in pages/index.js:

import Header from "../components/Header";
 
export default function Home() {
  return (
    <div>
      <Header />
    </div>
  );
}

4. Add Framer Motion for animations

npm install framer-motion

Usage:

import { motion } from "framer-motion";
 
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }}
>
  I'm fading in!
</motion.div>

5. Add an icon library

Option 1: Lucide

npm install lucide-react

import { Rocket } from 'lucide-react';
 
<Rocket className="w-6 h-6 text-purple-600" />

Option 2: Heroicons

npm install @heroicons/react

import { AcademicCapIcon } from '@heroicons/react/24/solid';
 
<AcademicCapIcon className="h-6 w-6 text-blue-500" />

File structure you end up with

my-app/
├── pages/
│   ├── index.js
├── components/
│   ├── Header.js
├── public/
├── styles/
│   ├── globals.css
├── tailwind.config.js
├── package.json

What you’ve now got

• Tailwind for fast styling
• React for dynamic components
• Next.js for routing and deploy-ready structure
• Framer for animations
• Lucide / Heroicons for icons