Tailwind-এ বেস স্টাইল যোগ করা হচ্ছে

এই পোস্টটি Tailwind CSS-এ 'বেস স্টাইল' যোগ করার সম্ভাব্য সমস্ত দিক তুলে ধরেছে।

কিভাবে Tailwind এ 'বেস' শৈলী যোগ করবেন?

'টেইলউইন্ড CSS' সম্পূর্ণ HTML সামগ্রীতে বা একটি নির্দিষ্ট উপাদানে 'বেস' শৈলী যোগ করার জন্য নিম্নলিখিত তিনটি পদ্ধতির সাথে আসে:

• Tailwind-এ বেস স্টাইল যোগ করতে 'CSS' ব্যবহার করুন।
• Tailwind-এ বেস স্টাইল যোগ করতে 'প্লাগইন' ব্যবহার করুন।

আসুন এক এক করে সেগুলি অন্বেষণ করি।

পূর্বশর্ত
ব্যবহারিক বাস্তবায়নে এগিয়ে যাওয়ার আগে, প্রথমে 'লিনাক্সহিন্ট' নামে নতুন তৈরি প্রকল্পটি দেখুন যা 'বেস শৈলী' যোগ করার জন্য ব্যবহৃত হয়:

প্রজেক্ট ফাইল স্ট্রাকচার

এখন, 'index.html' ফাইলটিতে নেভিগেট করুন এবং এর HTML কোডটি দেখুন:

উপরের কোড লাইনে:

আউটপুট
উপরের কোডের আউটপুট এখানে দেখানো হয়েছে:

এখন, বেস স্টাইল যোগ করে উপরের HTML কোড কাস্টমাইজ করতে আলোচিত পদ্ধতিটি ব্যবহার করুন। টেলউইন্ড 'সিএসএস' পদ্ধতি দিয়ে শুরু করা যাক।

পদ্ধতি 1: Tailwind-এ 'বেস স্টাইল' যোগ করতে CSS ব্যবহার করুন

নির্দিষ্ট এইচটিএমএল এলিমেন্টে বেস স্টাইল যোগ করার সবচেয়ে সহজ এবং সহজ পদ্ধতি হল সেগুলিকে প্রকল্পের প্রধান CSS ফাইলে যুক্ত করা। আসুন প্রদত্ত পদক্ষেপগুলি অনুসরণ করে কার্যত এই কাজটি সম্পাদন করি।

ধাপ 1: CSS ফাইল খুলুন
প্রথমে প্রধান CSS ফাইলটি খুলুন যেমন, “ style.css ' যেটিতে অন্তর্নির্মিত টেইলউইন্ড 'বেস', 'কম্পোনেন্টস', এবং 'ইউটিলিটিস' স্তর রয়েছে:

ধাপ 2: CSS যোগ করুন
এর পরে, নির্দিষ্ট '

' এবং '

' এইচটিএমএল উপাদানগুলির জন্য 'বেস' শৈলী যোগ করুন ' ব্যবহার করে ক্লাসগুলি প্রয়োগ করে @ আবেদন করুন 'এর সাহায্যে 'বেস' স্তরে নির্দেশিকা @স্তর ' কীওয়ার্ড। '@লেয়ার' কীওয়ার্ডগুলি নির্দিষ্ট 'বেস' স্তরে সংজ্ঞায়িত ক্লাস যুক্ত করে:

@লেয়ার বেস {
h2 {
@অ্যাপ্লাই টেক্সট-3xl;
}
h3 {
@অ্যাপ্লাই টেক্সট-এক্সএল;
}
}

উপরের কোড লাইনগুলিতে, ' অক্ষরের আকার ' ক্লাসটি যথাক্রমে '

' এবং '

' উপাদানগুলিতে নির্দিষ্ট আকার পর্যন্ত বড় করার জন্য প্রয়োগ করা হয়:

ফাইলটি সেভ করুন (Ctrl + S)।

ধাপ 3: আউটপুট
এখন, লাইভ সার্ভারে কোডটি চালান এবং নিম্নরূপ আউটপুট দেখুন:

এখানে, আউটপুট দেখায় যে Tailwind “Font Size” ক্লাস সফলভাবে বেস লেয়ারের নির্দিষ্ট এলিমেন্টে প্রয়োগ করা হয়েছে।

বিঃদ্রঃ : অন্যান্য সকল Tailwind CSS ক্লাসের জন্য একই পদ্ধতি ব্যবহার করা হয়।

পদ্ধতি 2: Tailwind-এ 'বেস স্টাইল' যোগ করতে প্লাগইন ব্যবহার করুন

'বেস' শৈলী যোগ করার আরেকটি দরকারী পদ্ধতি হল একটি ' প্লাগ লাগানো ' এবং ' ব্যবহার করুন addBase() ' ফাংশন। এই ফাংশনটি 'এ নতুন ক্লাস নিবন্ধন করতে সহায়তা করে' ভিত্তি 'স্তর নির্দেশিকা। এই ফাংশনটি Tailwind “tailwind.config.js” ফাইলে ব্যবহৃত হয়। আসুন এটি ব্যবহারিকভাবে করি।

ধাপ 1: 'addBase()' ফাংশন সংজ্ঞায়িত করুন
প্রথমে, নেভিগেট করুন ' tailwind.config.js ” কনফিগারেশন ফাইল এবং প্লাগইন থেকে বেস স্টাইল যোগ করুন এবং “addBase()” ফাংশনটি কল করুন:

ফাইলটি সংরক্ষণ করুন।

ধাপ 2: আউটপুট
অবশেষে, প্রদত্ত HTML কোডটি চালান এবং আউটপুট দেখুন:

যেমন দেখা গেছে, Tailwind “Font Size” ক্লাস “addBase()” ফাংশনে জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে সংজ্ঞায়িত করা হয়েছে নির্দিষ্ট HTML উপাদানগুলিতে প্রয়োগ করা হয়েছে।

উপসংহার

টেইলউইন্ড বেস স্টাইলগুলি ব্যবহার করে সহজেই যুক্ত করা যেতে পারে সিএসএস ' প্রধান CSS ফাইলে ক্লাস এবং ' প্লাগ লাগানো 'এর সাথে' addBase() ” কনফিগারেশন ফাইলে ফাংশন। 'সিএসএস' পদ্ধতিটিকে সবচেয়ে সহজ পদ্ধতি হিসাবে বিবেচনা করা হয় কারণ এটি শুধুমাত্র 'বেস' স্তরে বেস স্টাইলগুলিকে সংজ্ঞায়িত করে এবং স্বয়ংক্রিয়ভাবে নির্দিষ্ট উপাদানগুলিতে প্রয়োগ করে৷ অন্যদিকে, 'প্লাগইন' বিভাগটি ' tailwind.config.js বেস স্টাইলগুলিকে জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে সংজ্ঞায়িত করার জন্য ফাইলটির জন্য 'addBase()' ফাংশন প্রয়োজন। এই পোস্টটি Tailwind CSS-এ বেস স্টাইল যোগ করার সম্ভাব্য সমস্ত দিক তুলে ধরেছে।