Tailwindcss & React Install Bangla

Tailwindcss & React installঃ 

আমরা অনেকেই জানিনা কিভাবে Tailwindcss & react একসাথে install করতে হয়। আজকের পোস্টে আপনাদেরকে  Tailwindcss & React একসাথে Install শেখানো হবে।

Tailwindcss হলো css এর একটি framework, React এর সাথে Tailwindcss এর install দেখব এই সিরিজে।

Tailwindcss & React Installঃ

সূচিপত্রঃ Tailwindcss & React Install

আমরা Tailwindcss কে react এর সাথে install করার জন্য vite কে ব্যবহার করব। vite হলো frontend Tooling.

Tailwind & React install করার ধাপসমূহঃ

1. Create your project: এখানে আমরা vite tool দিয়ে react এর একটি project শুরু করব। সেজন্য এই কমান্ডটি লিখবঃ 

npm create vite@latest my-project-- --template react 

(নোটঃ এই কোড Terminal এ লিখলে react project তৈরী হয়ে যাবে ) my-project হলো ফোল্ডারের নাম আর template react হলো react এর template এর জন্য। 

এরপর cd my-project এই কোড লিখে my-project ফোল্ডারে যাব।

2. Install Tailwind CSS: এখন আমরা tailwind css এবং এর dependencies ও tailwind.config.js এবং postcss.config.js file তৈরী করব। এজন্য এই কমান্ডটি লিখব। 

-> npm install -D tailwindcss postcss autoprefixer

-> npx tailwindcss init -p

3. Configure your template paths: এবার tailwind.config.js ফাইলে template এর সকল ফাইলের path add করতে হবে। ,tailwind.config.js এ content এর মধ্যে এই code টি add করতে হবে। যেমনঃ 

content:[

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}"

]

এখানে react template এর root এর index file এবং src এর ভিতরে সকল file *sign দিয়ে select করা হয়েছে। এই file গুলো ts, js, tsx, jsx ফরম্যাট সাপোর্ট করবে।

4. Add the tailwind directives to your css: src folder এর মধ্যে index.css file এ এই code গুলো যুক্ত করতে হবে। যেমনঃ 

@tailwind base;

@tailwind components;

@tailwind utilities;

5. Start your build process: npm run dev terminal এ লিখে project development mode এ run করব। 

6. Start using Tailwind in your project: এবার আমাদের project এ tailwind css এর utility class গুলো ব্যবহার করব। যেমনঃ App.jsx file এ return এর () ব্র্যাকেটের ভিতরে লিখব। যেমনঃ  

<h1 className="text-3xl font-bold">Hello</h1>

Vite দিয়ে react install করার নিয়মঃ

Vite দিয়ে react install করতে হলে terminal এ npm create vite@latest এই code টি লিখতে হবে। code টি লিখার পর আপনাকে জিজ্ঞেস করবে  Project Name: এখানে project এর নাম দিবেন অথবা ডট দিয়ে এন্টার দিলে আপনি যেখান থেকে terminal open করেছেন সেখানে project তৈরী হবে। এরপর আপনাকে বলবে select a framework সেখান থেকে আপনি  react select করে enter দিবেন। এবার select a variant থেকে javascript select করে enter দিবেন। এবার cd দিয়ে আপনার project folder এ ডুকবেন। যেমনঃ cd(folder name)। এরপর npm install লিখে enter দিলে node module install হবে। তারপর npm run dev দিলে project browser এ open হবে।

Tailwind & react দিয়ে করা project এর folder structureঃ

এই project এর folder এর root এ tailwind.config.js file থাকবে আর শুধু react install করলে tailwind.config.js file থাকবেনা। আবার tailwind & react এ package.json file open করলে দেখবেন devDependencies এর মধ্যে tailwind css থাকবে, কিন্তু শুধু react project এ tailwind থাকবে না। 

আমরা src folder এর মধ্যে যাব,সেখানে index.js file হলো মুল ফাইল, এখানে আমরা হাত দিবনা। আমরা App.js file এ কাজ করব। এখানে আমরা component তৈরী করব। 

প্রিয় বন্ধুরা এতক্ষণ পর্যন্ত আমরা শিখেছি  Tailwindcss & React Install করার নিয়ম। আশা করি আপনারা বুজতে পেরেছেন কিভাবে  Tailwindcss & React Install করতে হয়।

আগামী পর্বে আমরা শিখব react এর component কি? কিভাবে component তৈরী করে, jsx কি, কিভাবে jsx লিখতে হয় ইত্যাদি।