Tailwind CSSBeginner

Tailwind CSS with React

React (Vite) প্রজেক্টে Tailwind CSS setup — step by step।

8টি অংশবাংলা ভাষায়

React-এ Tailwind CSS ব্যবহার করতে Vite ব্যবহার করা সবচেয়ে সহজ।

Setup Steps

Terminalbash

bash

# React project তৈরি
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install

# Tailwind install
npm install tailwindcss @tailwindcss/vite

vite.config.tstypescript

typescript

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

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

src/index.csscss

css

@import "tailwindcss";

React Component-এ ব্যবহার

App.tsxtsx

tsx

function App() {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <h1 className="text-3xl font-bold text-indigo-600">
        React + Tailwind
      </h1>
      <button className="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
        Get Started
      </button>
    </div>
  );
}

export default App;

className মনে রাখুন

React-এ class নয়, className ব্যবহার করুন। তবে Tailwind utility classes একই থাকে — শুধু class এর বদলে className লিখুন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।