React Setup Tailwind

React.md

Here’s a clean, professional README.md you can drop straight into your repo. It’s well-structured, beginner-friendly, and follows best GitHub practices — all in Markdown as requested.

---

## 🚀 Step 1: Create GitHub Repository

1. Go to GitHub and create a new repository.
2. Name it in **camelCase** (example: `viteSetupProject`).
3. Choose **Public** or **Private**.
4. ✅ Check **Add a README file**.
5. After creation, copy the **SSH URL**  
   Example:
   ```bash
   git@github.com:username/viteSetupProject.git

---

📥 Step 2: Clone Repository & Create Client Folder

git clone git@github.com:suhailroushan/viteSetupProject.git
cd viteSetupProject
mkdir client && cd client

---

⚡ Step 3: Create Vite App (pnpm)

pnpm create vite@latest .

Select the following options:

• Framework → React
• Variant → JavaScript
• rolldown-vite → Yes
• Install & Start now → No

---

📦 Step 4: Install Dependencies

pnpm install
pnpm up --latest

---

🎨 Step 5: Install Tailwind CSS (Vite Plugin)

pnpm add tailwindcss @tailwindcss/vite

---

🧠 Step 6: Open in VS Code

code .

---

🧹 Step 7: Clean Up Unnecessary Files

Delete the following files/folders:

public/vite.svg
src/assets/
eslint.config.js

---

⚙️ Step 8: Configure Vite for Tailwind

Update vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

---

🎨 Step 9: Configure CSS

Empty App.css

Update index.css

@import "tailwindcss";

---

🔌 Step 10: Update React Entry Point

main.jsx

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <App />
)

---

🧩 Step 11: Create App Component

App.jsx

import React from 'react'

const App = () => {
  return (
    <>
      <h1 className="text-3xl font-bold underline">
        Hello World
      </h1>
    </>
  )
}

export default App

---

▶️ Step 12: Run Development Server

pnpm dev
# or
pnpm run dev

Open your browser at:

http://localhost:5173

---

✅ Result

You now have:

• ⚡ Fast Vite setup
• ⚛️ React with clean structure
• 🎨 Tailwind CSS ready
• 📦 pnpm-based dependency management

---

📄 License

MIT – feel free to use and modify.

---

Happy coding 🚀

---