ستوفر هذه المقالة دليلاً لتصميم النص في Tailwind باستخدام المخطط التفصيلي التالي:
- استخدم فئة محاذاة النص
- توفير الألوان لمحتوى النص
- استخدم عائلات الخطوط المختلفة
- توفير تسطير الزخارف على النص
- توفير المسافات البادئة للنص
كيفية استخدام فئة محاذاة النص في Tailwind؟
أثناء تصميم محتوى النص، فإن موضع النص لا يقل أهمية عن الزخرفة. إذا لم تتم محاذاة النص بشكل صحيح، فإن التصميم الكامل لصفحة الويب سيبدو غريبًا. لمحاذاة النص في Tailwind، يتم استخدام الفئة التالية:
نص- { تنسيق }
تتضمن خيارات المحاذاة ' مركز '،' غادر '،' يمين '، و ' يبرر '. دعونا نفهم كل من هذه التحالفات باستخدام العرض التوضيحي أدناه:
< ص فصل = 'مركز النص bg-slate-200' > هذا نص نموذجي ويتم توفيره بمحاذاة مركز النص. < / ص >
< ر >
< ص فصل = 'النص-اليمين bg-slate-200' > هذا نموذج للنص ويتم توفيره بمحاذاة TEXT RIGHT. < / ص >
< ر >
< ص فصل = 'نص-يسار bg-slate-200' > هذا نموذج للنص ويتم توفيره بمحاذاة TEXT LEFT. < / ص >
< ر >
< ص فصل = 'ضبط النص bg-slate-200' > هذا نموذج للنص ويتم توفيره مع محاذاة TEXT JUSTIFY. < / ص >
شرح الكود أعلاه هو كما يلي:
- أربعة ' ص يتم إنشاء العناصر وفصلها بفاصل أسطر.
- تتم محاذاة نص العناصر الأربعة p إلى موضع محدد باستخدام ' محاذاة النص} ' فصل.
- ال ' ب ج-{اللون}-{رقم} توفر فئة 'لون الخلفية لكل' ص ' عنصر.
انتاج |
يمكن أن نرى في الإخراج أدناه كيف تؤثر كل فئة من فئات المحاذاة على موضع النص. يمكنك أن ترى أن نص العنصر الأول محاذٍ للوسط، والثاني لليمين، والثالث لليسار، والعنصر الرابع يظهر نصًا مضبوطًا:
كيفية توفير اللون لمحتوى النص في Tailwind؟
يلعب اللون دورًا مهمًا في تصميم محتوى النص لعنصر ما. إذا لم يتم تحديد اللون المناسب، فقد يصبح من الصعب قراءة النص. وهذا سوف يؤثر سلبا على تصميم التخطيط. لتعيين لون النص في Tailwind، استخدم الفئة الموضحة أدناه:
نص- { لون } - { رقم }في بناء الجملة المحدد أعلاه، يتعين على المستخدم تقديم اسم اللون متبوعًا برقم سيكون مسؤولاً عن ظل اللون المحدد.
يحتوي العرض التوضيحي الموضح أدناه على ثلاثة ' ص ' العناصر التي تم تصميمها باستخدام فئات ألوان النص المختلفة:
< ص فصل = 'نص-بنفسجي-500-مركز النص' > هذا نص باللون البنفسجي < / ص >< ص فصل = 'نص-أحمر-500-مركز النص' > هذا نص باللون الأحمر < / ص >
< ص فصل = 'نص-أخضر-500-مركز النص' > هذا نص باللون الأخضر < / ص >
الفئات المستخدمة في الكود أعلاه هي كما يلي:
- الأول ' ص 'يتم تزويد العنصر باللون البنفسجي باستخدام' نص-{لون}-{رقم} ' فصل.
- الثانية والثالثة ' ص يتم تزويد العناصر باللونين الأحمر والأخضر بنفس الطريقة.
- ال ' مركز النص تضع فئة 'محتوى النص في وسط العنصر.
انتاج |
من الناتج أدناه يتضح أن اللون الأسود الافتراضي للنص قد تغير إلى الألوان المحددة باستخدام فئة text-{color}-{number}:
كيفية استخدام عائلات الخطوط المختلفة في Tailwind؟
يمكن استخدام خط عنصر النص للتأكيد على نص معين. كل خط له خصائصه الخاصة. لتغيير خط أحد العناصر في Tailwind، استخدم الفئة التالية:
الخط- { عائلة }يوفر Tailwind ثلاث عائلات خطوط افتراضية، أي ' بدون '،' رقيق '، و ' كثرة الوحيدات '. كل عائلة من عائلات الخطوط هذه لها نمط خط مختلف.
وبالمثل، ' الخط-{الوزن} 'يمكن استخدام فئة لجعل النص غامقًا أو خفيفًا أو عاديًا. فلنستخدم العرض التوضيحي لتوفير وزن الخط لعائلات الخطوط المختلفة في Tailwind:
< ص فصل = 'مركز النص الخط الأحادي الخط الإضافي' > هذا نص غامق إضافي في الخط MONO < / ص >< ص فصل = 'الخط-serif الخط-نص غامق-مركز' > هذا نص شبه غامق بخط SERIF < / ص >
< ص فصل = 'مركز النص الخفيف للغاية بدون خط' > هذا نص خفيف جدًا في Font SANS < / ص >
شرح للكود:
- الثلاثة ' ص يتم توفير العناصر من خلال عائلات الخطوط 'mono' و'serf' و'sans' باستخدام ' خط العائلة} ' فصل.
- وكذلك الثلاثة ' ص 'يتم توفير العناصر كـ' غامق للغاية '،' نصف غامق '، و ال ' المزيد من الإضاءة 'أوزان الخط باستخدام' الخط-{الوزن} ' فصل.
- كل هذه العناصر تستخدم ' مركز النص 'فئة تضع النص في وسط العنصر.
انتاج |
يوضح الإخراج المحدد أن كل ' ص يحتوي العنصر على عائلة خطوط وأوزان خطوط مختلفة:
كيفية توفير زخارف تسطير على النص في Tailwind؟
يمكن أيضًا تصميم عناصر النص عن طريق إضافة أنواع مختلفة من التسطير. يمكن استخدام هذا للتأكيد على جزء من النص. لتوفير تسطير لعنصر النص، يتم استخدام الفئة التالية:
تسطير زخرفة- { أسلوب }الكلمة ' تسطير 'يوفر تسطيرًا أساسيًا للعنصر و' زخرفة-{نمط} يتم استخدام فئة 'لتوفير أنماط مختلفة للتسطير. دعونا نفهم هذا باستخدام العرض التوضيحي المقدم أدناه:
< ص فصل = 'تسطير زخرفة-مركز النص الصلب' > يحتوي هذا النص على تسطير ثابت < / ص >< ص فصل = 'زخرفة تحت الخط-مركز النص المزدوج' > يحتوي هذا النص على تسطير مزدوج < / ص >
< ص فصل = 'زخرفة تحت الخط - مركز النص المموج ' > يحتوي هذا النص على تسطير متموج < / ص >
< ص فصل = 'تسطير زخرفة-مركز النص المنقط' > يحتوي هذا النص على تسطير منقط < / ص >
في الكود أعلاه، هناك أربعة ' ص 'العناصر التي يوفرها' صلب '،' مزدوج '،' تموجي '، و ' منقط 'يؤكد على غرار.
انتاج:
يتضح من الناتج التالي أن العناصر قد تم تصميمها باستخدام فئات الزخرفة المختلفة التي تحتها خط:
كيفية توفير المسافات البادئة للنص في Tailwind؟
في أي مستند نصي، يتم استخدام المسافات البادئة لتنسيق محتوى النص. يوفر Tailwind أيضًا فئة افتراضية لتوفير مسافة بادئة لمحتوى النص باستخدام الفئة التالية:
مسافة بادئة- { عرض }يعد العرض في بناء الجملة المحدد أعلاه مسؤولاً عن حجم هامش المسافة البادئة المقدم لمحتوى النص.
لنقم بتصميم عنصرين من عناصر النص عن طريق تعيين قيم مسافات بادئة مختلفة لهم ونرى النتيجة:
< ص فصل = 'مسافة بادئة-4 ص-12' > هذا نص نموذجي ويتم توفيره مع المسافة البادئة باستخدام فئة 'indent-4'. < / ص >< ص فصل = ' المسافة البادئة -28 ' > هذا نص نموذجي ويتم توفيره مع المسافة البادئة باستخدام فئة 'indent-28'. < / ص >
في الكود أعلاه اثنان ' ص 'يتم تزويدها بمسافة بادئة للعرض' 4 ' & ' 28 ' على التوالى. يتم توفير العنصر الأول أيضًا مع الحشوة العلوية والسفلية باستخدام ' ص-١٢ ' فصل.
انتاج:
يمكن أن نرى في الإخراج أدناه أن عنصر النص الثاني له هامش أكبر في بداية النص بسبب عرض المسافة البادئة الأكبر:
هذا كل ما يتعلق بتصميم النص باستخدام Tailwind.
خاتمة
يوفر Tailwind فئات مختلفة لتصميم عناصر النص. لتحديد نمط النص في Tailwind، يمكن للمستخدم الاستفادة من ' نص-{لون}-{رقم} '،' محاذاة النص} '،' تسطير الزخرفة-{style} '، و ' المسافة البادئة-{العرض} ' فصل. قدمت هذه المقالة دليلاً لتصميم النص باستخدام فئات مختلفة في Tailwind.