এই নিবন্ধটি Tailwind ইউটিলিটি ব্যবহার করে একটি উপাদানের ফন্ট পরিবার নিয়ন্ত্রণ করার পদ্ধতি প্রদান করে।
টেইলউইন্ড ইউটিলিটিগুলি ব্যবহার করে একটি উপাদানের ফন্ট পরিবারকে কীভাবে নিয়ন্ত্রণ করবেন?
টেইলউইন্ডে একটি উপাদানের একটি ফন্ট পরিবার নিয়ন্ত্রণ করতে, উপাদানটিতে নিম্নলিখিত ইউটিলিটি প্রদান করতে হবে:
হরফ- { ফন্ট পরিবার }
তিনটি ডিফল্ট ফন্ট পরিবার আছে যেগুলি উপরে-প্রদত্ত ইউটিলিটি ব্যবহার করে সেট করা যেতে পারে। এর মধ্যে রয়েছে ' সেরিফ ', ' ছাড়া ', এবং ' মনো ”
আসুন একটি প্রদর্শনীতে এই ফন্ট পরিবারগুলি ব্যবহার করি ' হরফ-{ফন্ট পরিবার} এটি কিভাবে কাজ করে তা দেখতে ক্লাস:
< div ক্লাস = 'ফন্ট-সেরিফ রাউন্ডেড-এক্সএল ছায়া-এলজি টেক্সট-সেন্টার py-2 my-2 bg-green-100' >
এটি একটি FONT-SERIF পরিবার
< / div >
< div ক্লাস = 'ফন্ট-স্যান গোলাকার-এক্সএল ছায়া-এলজি টেক্সট-সেন্টার py-2 my-2 bg-blue-100' >
এটি একটি FONT-SANS পরিবার
< / div >
< div ক্লাস = 'ফন্ট-মনো রাউন্ডেড-এক্সএল শ্যাডো-এলজি টেক্সট-সেন্টার py-2 my-2 bg-red-100' >
এটি একটি FONT-MONO পরিবার
< / div >
উপরের কোডের ব্যাখ্যাটি নিম্নরূপ:
- এখানে তিনটি ডিভ উপাদান তৈরি করা হয়েছে ' ” এবং বিভিন্ন ফন্ট পরিবার প্রদান করা হয়.
- দ্য ' হরফ-{পরিবার} ” ক্লাস এলিমেন্টের টেক্সটে নির্দিষ্ট ফন্ট ফ্যামিলি প্রদান করবে।
- দ্য ' বৃত্তাকার-এক্সএল ” ক্লাস ডিভ এলিমেন্টের কোণগুলিকে বৃত্তাকার করে তুলবে।
- দ্য ' ছায়া-এলজি ” ক্লাস ডিভ এলিমেন্টে একটি বড় ছায়া প্রদান করবে।
- দ্য ' পাঠ্য কেন্দ্র ” উপাদানটির কেন্দ্রে পাঠ্যটিকে সারিবদ্ধ করবে।
- দ্য ' py-2 ' এবং ' আমার-2 'ক্লাস প্রদান করবে' 8px উপাদানটির উপরে এবং নীচের দিকে প্যাডিং এবং মার্জিন।
- দ্য ' bg-{color}-{number} ” ক্লাস নির্দিষ্ট রঙে উপাদানটির পটভূমি সেট করার জন্য দায়ী।
আউটপুট থেকে, এটা স্পষ্ট যে প্রতিটি উপাদানের একটি আলাদা ফন্ট পরিবার রয়েছে:
আমরা হভার ফাংশন ব্যবহার করে একটি উপাদানের ফন্ট পরিবারকে গতিশীলভাবে পরিবর্তন করতে পারি। উদাহরণের জন্য, নীচের কোডের মাধ্যমে যান:
< div ক্লাস = 'my-2 rounded-xl bg-slate-100 py-2 টেক্সট-সেন্টার font-mono shadow-lg hover:font-serif' >এটি ডিফল্টরূপে একটি FONT-MONO পরিবার< / div >উপরে প্রদত্ত কোডে, ' হোভার: ফন্ট-{পরিবার} ” ইউটিলিটি উপাদানটির ফন্ট ফ্যামিলি পরিবর্তন করার জন্য দায়ী যত তাড়াতাড়ি মাউস কার্সার এটির উপর ঘোরে। এটি আউটপুটে দেখা যায় যে ব্যবহারকারী যখন এটির উপর মাউস কার্সার ঘোরায় তখন পাঠ্যের ফন্ট পরিবার পরিবর্তিত হয়:
এটি হল টেলউইন্ডের একটি উপাদানের ফন্ট পরিবারকে নিয়ন্ত্রণ করা।
উপসংহার
টেলউইন্ডে, একটি উপাদান ব্যবহার করে একটি ফন্ট পরিবার বরাদ্দ করা যেতে পারে “ হরফ-{পরিবার} 'শ্রেণী। টেইলউইন্ড দ্বারা প্রদত্ত তিনটি ডিফল্ট ফন্ট পরিবার রয়েছে অর্থাৎ “ ছাড়া ', ' সেরিফ ', এবং ' মনো ” ব্যবহারকারী একটি উপাদানের অবস্থার পরিবর্তনের সাথে সাথে একটি উপাদানের ফন্ট পরিবারও পরিবর্তন করতে পারে। এই নিবন্ধটি Tailwind-এ একটি উপাদানের ফন্ট পরিবার নিয়ন্ত্রণ করার পদ্ধতি প্রদান করেছে।