Tailwind CSS হল একটি ইউটিলিটি প্রথম CSS ফ্রেমওয়ার্ক যা ডেভেলপারদেরকে CSS ফাইলে স্যুইচ না করেই কাস্টম ওয়েব কম্পোনেন্ট ডিজাইন করতে দেয়। এই টিউটোরিয়ালে, আপনি শিখবেন কিভাবে React এ Tailwind CSS ইন্সটল করতে হয় এবং কিভাবে আপনি এটি ব্যবহার করে একটি সহজ প্রতিক্রিয়া পৃষ্ঠা তৈরি করতে পারেন।

কেন Tailwind CSS ব্যবহার করবেন?

ইতিমধ্যেই প্রচুর CSS ফ্রেমওয়ার্ক রয়েছে যা বিকাশকারীরা ওয়েব পেজ ডিজাইন করার পদ্ধতিকে সহজ করে তোলে। তাহলে কেন আপনি Tailwind CSS ব্যবহার করবেন?

বুটস্ট্র্যাপ এবং ফাউন্ডেশনের মতো CSS ফ্রেমওয়ার্ক হল ওপেন-সোর্স ফ্রেমওয়ার্ক, যার মানে তারা ডেভেলপারদেরকে পূর্ব-নির্ধারিত উপাদান প্রদান করে যার ডিফল্ট শৈলী রয়েছে। এটি কাস্টমাইজেশন এবং সৃজনশীলতা উভয়কেই সীমিত করে এবং আপনি স্বাভাবিক দেখায় এমন ওয়েবসাইটগুলির সাথে শেষ করেন৷

যাইহোক, Tailwind CSS হল একটি ইউটিলিটি-প্রথম ফ্রেমওয়ার্ক যা আপনাকে গতিশীল উপাদান তৈরি করতে সৃজনশীল নিয়ন্ত্রণ দেয়। এবং বুটস্ট্র্যাপের বিপরীতে, আপনি চাইলে সহজেই ডিজাইন কাস্টমাইজ করতে পারেন।

Tailwind CSS ব্যবহার করার আরেকটি সুবিধা হল যে আপনি একটি ছোট CSS বান্ডেল সাইজ দিয়ে শেষ করবেন কারণ এটি বিল্ড প্রক্রিয়া চলাকালীন সমস্ত অব্যবহৃত CSS সরিয়ে দেয় (যা বুটস্ট্র্যাপ থেকে আলাদা, কারণ এতে বিল্ডে থাকা সমস্ত CSS ফাইল রয়েছে)। অন্তর্ভুক্ত).

এই বিষয়ে আমাদের নিবন্ধ থেকে Tailwind CSS এবং বুটস্ট্র্যাপের মধ্যে পার্থক্য সম্পর্কে আরও জানুন।

Tailwind CSS ব্যবহার করার অসুবিধা

Tailwind CSS একটি খাড়া শেখার বক্ররেখা আছে, এমনকি অভিজ্ঞ ডেভেলপারদের জন্যও। ইউটিলিটি ক্লাসগুলি কীভাবে সম্পূর্ণরূপে ব্যবহার করতে হয় তা শিখতে কিছুটা সময় লাগে এবং আপনাকে প্রায়শই ডকুমেন্টেশনগুলি উল্লেখ করতে হতে পারে। যাইহোক, একবার আপনি ক্লাসের সাথে পরিচিত হয়ে গেলে, আপনি এটিকে সাধারণ CSS এর চেয়ে সহজ এবং দ্রুত দেখতে পাবেন।

বেশিরভাগ বিকাশকারীরা উদ্বেগের বিচ্ছেদ নীতি অনুসরণ করতে পছন্দ করেন যেমন CSS এবং HTML ফাইলগুলি আলাদা ফাইলে লেখা হয়। টেইলউইন্ড সিএসএস-এর মাধ্যমে, আপনি সরাসরি এইচটিএমএল মার্কআপে সিএসএস লেখেন—কারো জন্য একটি ত্রুটি।

এই অসুবিধা সত্ত্বেও, টেইলউইন্ড সিএসএস হল একটি ফ্রেমওয়ার্ক যা আপনাকে গুরুত্ব সহকারে বিবেচনা করা উচিত যদি আপনি ইতিমধ্যেই CSS এর সাথে স্বাচ্ছন্দ্য বোধ করেন এবং দ্রুত ডিজাইন তৈরি করতে চান।

শুরু করা: একটি প্রতিক্রিয়া প্রকল্প তৈরি করুন

Create-react-app ব্যবহার করে স্ক্যাফোল্ড রিঅ্যাক্ট অ্যাপ্লিকেশনের জন্য টার্মিনালে নিম্নলিখিত কমান্ডটি চালান।

create-react-app Webpack, Babel বা Linters এর মত বিল্ড টুল কনফিগার না করেই একটি React অ্যাপ তৈরি করার একটি সহজ উপায় প্রদান করে। এর মানে হল আপনি কয়েক মিনিটের মধ্যে একটি কার্যকরী প্রতিক্রিয়া পরিবেশের সাথে শেষ হয়ে যাবেন।

উপরের কমান্ডটি react-tailwind নামে একটি নতুন ফোল্ডার তৈরি করে। ফোল্ডারে নেভিগেট করুন এবং আপনার প্রিয় পাঠ্য সম্পাদক ব্যবহার করে এটি খুলুন।

পোস্টসিএসএস বেশিরভাগ ব্রাউজারগুলির সাথে সিএসএসকে সামঞ্জস্যপূর্ণ করতে জাভাস্ক্রিপ্ট প্লাগইন ব্যবহার করে। এটি অ্যাপ্লিকেশনটি যে ব্রাউজারে চলছে তা পরীক্ষা করে এবং আপনার সিএসএস নির্বিঘ্নে কাজ করার জন্য আপনার প্রয়োজনীয় পলিফিলগুলি নির্ধারণ করে৷ Autoprefixer হল একটি PostCSS প্লাগইন যা CSS নিয়মে স্বয়ংক্রিয়ভাবে ভেন্ডর প্রিফিক্স যোগ করতে caniuse.com থেকে মান ব্যবহার করে।

tailwind css শুরু করুন

Tailwind CSS ডিফল্ট কনফিগারেশন ফাইল তৈরি করতে tailwind init কমান্ডটি চালান।

টেমপ্লেট পাথ কনফিগার করুন

আপনাকে Tailwind CSS কে বলতে হবে যে কোন CSS ক্লাস ব্যবহার করা হচ্ছে তা দেখতে ফাইলগুলি পরীক্ষা করা উচিত। এটি টেইলউইন্ডকে অব্যবহৃত ক্লাসগুলি সনাক্ত করতে এবং অপসারণ করতে দেয় এবং তাই জেনারেট করা CSS এর আকার হ্রাস করে।

tailwind.config.js-এ, সামগ্রী কী-এর অধীনে টেমপ্লেট পাথ যোগ করুন।

React এ Tailwind CSS ইনজেক্ট করুন

পরবর্তী ধাপ হল @tailwind নির্দেশিকা ব্যবহার করে অ্যাপ্লিকেশনটিতে tailwind CSS অন্তর্ভুক্ত করা।

index.css-এ সবকিছু মুছুন এবং মৌলিক শৈলী, উপাদান এবং ইউটিলিটি আমদানি করতে নিম্নলিখিত যোগ করুন।

এই পৃষ্ঠায় দুটি প্রধান বিভাগ রয়েছে: একটি নেভিগেশন বার এবং একটি হিরো বিভাগ (যার একটি শিরোনাম এবং একটি বোতাম রয়েছে)৷

টেইলউইন্ড সিএসএস কীভাবে সিএসএস লেখা সহজ করে তোলে তা ব্যাখ্যা করতে, প্লেইন সিএসএস এবং টেইলউইন্ড সিএসএস ব্যবহার করে একটি ওয়েব পৃষ্ঠা স্টাইল করার চেষ্টা করুন।

অপ্রয়োজনীয় কোড সরাতে src ফোল্ডারে App.js পরিবর্তন করে শুরু করুন।

Tailwind CSS এর সাথে, আপনাকে প্রতিটি ক্লাসের জন্য CSS নিয়ম লিখতে হবে না। পরিবর্তে, আপনি ইউটিলিটি ক্লাস ব্যবহার করেন। এগুলি একটি CSS সম্পত্তির সুযোগের মধ্যে থাকা ক্লাস। উদাহরণস্বরূপ, আপনি যদি একটি কালো ব্যাকগ্রাউন্ড এবং সাদা পাঠ্য রঙের সাথে একটি বোতাম তৈরি করতে চান তবে আপনাকে bg-black এবং text-white ইউটিলিটি ক্লাস ব্যবহার করতে হবে।

আপনাকে App.css ইম্পোর্ট করতে হবে না কারণ Tailwind CSS দ্বারা তৈরি স্টাইলগুলি index.css-এ সংরক্ষিত থাকে যা আপনি আগে index.js-এ আমদানি করেছিলেন।

সাধারণ CSS-এর তুলনায়, এই পদ্ধতির ফলে কম কোড পাওয়া যায় যা বোঝা সহজ।

Tailwind CSS সহ স্টাইল করা কোড

এই নিবন্ধে, আপনি Tailwind CSS, এর শক্তি, অসুবিধা এবং আপনি কীভাবে প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিতে এর ইউটিলিটি ক্লাসগুলি ব্যবহার করতে পারেন সে সম্পর্কে শিখেছেন। ক্লাস ছাড়াও, Tailwind CSS প্রতিক্রিয়াশীল লেআউট এবং পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করার ক্ষমতা সহ অন্যান্য অতিরিক্ত বৈশিষ্ট্যও প্রদান করে।