Step 2: Tailwind CSS Setup - পাইথন বাংলা টিউটোরিয়াল

কেন Tailwind?

shadcn/ui Tailwind এর উপর built
Utility-first CSS = দ্রুত styling
No separate CSS files লাগে না

Step 1: Tailwind install করো

তোমার student-management folder এ থেকে রান করো:

npm install -D tailwindcss @tailwindcss/vite

Step 2: Vite config update করো

vite.config.ts ফাইল খোলো এবং এভাবে update করো:

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

Step 3: CSS file update করো

src/index.css ফাইল খোলো এবং সব মুছে দিয়ে শুধু এটা লেখো:

@import "tailwindcss";

Step 4: main.tsx এ CSS import আছে কিনা check করো

src/main.tsx এ এই line থাকতে হবে:

import './index.css'

Step 5: Test করো Tailwind কাজ করছে কিনা

src/App.tsx খোলো এবং সব মুছে দিয়ে এটা লেখো:

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Student Management System
      </h1>
    </div>
  )
}

export default App

Step 6: Server restart করো

Terminal এ Ctrl+C দিয়ে server বন্ধ করো, তারপর আবার:

npm run dev

✅ যা দেখা উচিত:

Gray background
বড় নীল রঙের “Student Management System” text
Screen এর মাঝখানে centered

ShadCn