توفر هذه المقالة الإجراء الخاص بالتحكم في مجموعة خطوط أحد العناصر باستخدام أدوات Tailwind المساعدة.
كيفية التحكم في عائلة الخطوط الخاصة بالعنصر باستخدام أدوات Tailwind؟
للتحكم في عائلة خطوط أحد العناصر في Tailwind، يجب توفير الأداة المساعدة التالية للعنصر:
الخط- { خط العائلة }
هناك ثلاث عائلات خطوط افتراضية يمكن تعيينها باستخدام الأداة المساعدة المتوفرة أعلاه. وتشمل هذه ' رقيق '،' بدون '، و ' كثرة الوحيدات '.
دعونا نستخدم عائلات الخطوط هذه في عرض توضيحي باستخدام ' الخط-{عائلة الخط} 'فئة لمعرفة كيف يعمل:
< شعبة فصل = 'الخط-serif مدور-xl الظل-إل جي مركز النص py-2 my-2 bg-green-100' >
هذه عائلة FONT-SERIF
< / شعبة >
< شعبة فصل = 'الخط بلا تقريب-xl الظل-إل جي مركز النص py-2 my-2 bg-blue-100' >
هذه عائلة FONT-SANS
< / شعبة >
< شعبة فصل = 'الخط-أحادي مدور-xl مركز النص-lg py-2 my-2 bg-red-100' >
هذه عائلة FONT-MONO
< / شعبة >
شرح الكود أعلاه هو كما يلي:
- هناك ثلاثة عناصر div تم إنشاؤها باستخدام ' <ديف> ' ويتم تزويدها بعائلات خطوط مختلفة.
- ال ' خط العائلة} 'ستوفر فئة الخط المحددة للنص الموجود في العنصر.
- ال ' مدور-XL 'الطبقة ستجعل زوايا عنصر div مستديرة.
- ال ' الظل إل جي 'ستوفر الفئة ظلًا كبيرًا لعنصر div.
- ال ' مركز النص 'سوف يقوم بمحاذاة النص في منتصف العنصر.
- ال ' الحمر -2 ' و ' بلدي-2 'ستوفر الفصول' 8 بكسل 'الحشوة والهامش في الاتجاه العلوي والسفلي للعنصر.
- ال ' ب ج-{اللون}-{رقم} 'الطبقة مسؤولة عن ضبط خلفية العنصر على اللون المحدد.
من الواضح من المخرجات أن كل عنصر له عائلة خطوط مختلفة:
يمكننا أيضًا تغيير عائلة الخطوط الخاصة بالعنصر ديناميكيًا باستخدام وظيفة التمرير. للتوضيح، انتقل إلى الكود أدناه:
< شعبة فصل = 'my-2 rounded-xl bg-slate-100 py-2 خط مركز النص-أحادي الظل-lg hover:font-serif' >هذه عائلة FONT-MONO بشكل افتراضي< / شعبة >في الكود المذكور أعلاه، ' تحوم: الخط-{عائلة} 'الأداة المساعدة مسؤولة عن تغيير عائلة خطوط العنصر بمجرد مرور مؤشر الماوس فوقها. يمكن أن نرى في الإخراج أن عائلة خطوط النص تتغير عندما يقوم المستخدم بتمرير مؤشر الماوس فوقها:
يتعلق الأمر كله بالتحكم في عائلة خطوط أحد العناصر في Tailwind.
خاتمة
في Tailwind، يمكن تعيين مجموعة خطوط لأحد العناصر باستخدام الزر ' خط العائلة} ' فصل. هناك ثلاث عائلات خطوط افتراضية توفرها Tailwind، أي ' بدون '،' رقيق '، و ' كثرة الوحيدات '. يمكن للمستخدم أيضًا تغيير عائلة الخطوط الخاصة بالعنصر عند تغيير حالة العنصر. قدمت هذه المقالة الإجراء الخاص بالتحكم في عائلة الخطوط لأحد العناصر في Tailwind.