এই রাইটিং-আপটি Tailwind-এ বেস স্টাইল যোগ করে স্টাইল শিরোনামের পদ্ধতিটি ব্যাখ্যা করবে।
বেস স্টাইল টেইলউইন্ড ব্যবহার করে শিরোনামগুলি কীভাবে স্টাইল করবেন?
Tailwind-এ শিরোনাম শৈলী করতে, প্রদত্ত-প্রদত্ত ধাপগুলি দেখুন:
- প্রকল্পের CSS ফাইল খুলুন।
- CSS ফাইলে, শিরোনাম ব্যবহার করে বেস স্টাইল যোগ করুন “ @স্তর 'এর অধীনে নির্দেশিকা' @tailwind বেস; 'নির্দেশ।
- একটি HTML প্রোগ্রাম তৈরি করুন এবং এতে শিরোনাম উপাদান ব্যবহার করুন।
- HTML প্রোগ্রাম চালান এবং আউটপুট যাচাই করুন।
ধাপ 1: CSS ফাইলের শিরোনামে বেস স্টাইল যোগ করুন
প্রথমে খুলুন ' style.css ' ফাইল এবং ' ব্যবহার করে এর শিরোনামগুলিতে বেস স্টাইল যোগ করুন @স্তর 'নির্দেশ। উদাহরণস্বরূপ, আমরা নিম্নলিখিত শিরোনামগুলিতে বেস স্টাইল যুক্ত করেছি:
@tailwind ভিত্তি ;
@স্তর ভিত্তি {
h1 {
@ আবেদন করুন text-6xl ;
}
h2 {
@ আবেদন করুন পাঠ্য-5xl ;
}
h3 {
@ আবেদন করুন text-4xl ;
}
h4 {
@ আবেদন করুন text-3xl ;
}
h5 {
@ আবেদন করুন text-2xl ;
}
}
@tailwind উপাদান ;
@tailwind ইউটিলিটি ;
এখানে:
- ' @লেয়ার বেস { … } ” একটি নতুন বেস লেয়ার সংজ্ঞায়িত করে এবং শিরোনামের উপাদানগুলির শৈলী ধারণ করে।
- ' h1 { @apply text-6xl; } 'প্রযোজ্য' text-6xl ' ইউটিলিটি ক্লাস থেকে ' h1 ' উপাদান।
- একইভাবে, ' h2 ', ' h3 ', ' h4 ', এবং ' h5 ' উপাদানগুলির ফন্টের আকারগুলি ' ব্যবহার করে সেট করা আছে @ আবেদন করুন ” এবং সংশ্লিষ্ট ইউটিলিটি ক্লাস (টেক্সট-5xl, টেক্সট-4xl, টেক্সট-3xl, এবং টেক্সট-2xl)।
ধাপ 2: শিরোনাম ব্যবহার করে HTML ওয়েব পেজ তৈরি করুন
তারপর, HTML প্রোগ্রাম তৈরি করুন এবং এতে শিরোনাম উপাদানগুলি ব্যবহার করুন। এখানে, আমরা নিম্নলিখিত শিরোনাম উপাদান ব্যবহার করেছি:
< শরীর >
< div ক্লাস = 'এইচ-স্ক্রিন জাস্টিফাই-সেন্টার টেক্সট-সেন্টার বিজি-ভায়োলেট-400' >
< h1 > শিরোনাম 1 < / h1 >
< h2 > শিরোনাম 2 < / h2 >
< h3 > শিরোনাম 3 < / h3 >
< h4 > শিরোনাম 4 < / h4 >
< h5 > শিরোনাম 5 < / h5 >
< / div >
< / শরীর >
ধাপ 3: HTML প্রোগ্রাম চালান
অবশেষে, HTML প্রোগ্রাম চালান এবং যাচাইয়ের জন্য ওয়েব পৃষ্ঠাটি দেখুন:
উপরের আউটপুট শিরোনামগুলিকে প্রদর্শন করেছে কারণ সেগুলি CSS ফাইলের স্টাইল ছিল।
উপসংহার
Tailwind-এ শিরোনাম স্টাইল করতে, CSS ফাইলটি খুলুন এবং ' ব্যবহার করে শিরোনামগুলিতে বেস স্টাইল যোগ করুন @স্তর 'এর অধীনে নির্দেশিকা' @tailwind বেস; 'নির্দেশ। তারপরে, একটি HTML প্রোগ্রাম তৈরি করুন এবং এতে শিরোনাম উপাদান ব্যবহার করুন। সবশেষে, আউটপুট যাচাই করতে HTML ওয়েব পৃষ্ঠাটি দেখুন। এই লেখাটি টেইলউইন্ডে বেস স্টাইল যোগ করে স্টাইল শিরোনামের পদ্ধতি ব্যাখ্যা করেছে।