ستوضح هذه الكتابة طريقة تصميم العناوين عن طريق إضافة النمط الأساسي في Tailwind.
كيف تصمم العناوين باستخدام النمط الأساسي Tailwind؟
لتصميم العناوين في Tailwind ، تحقق من الخطوات المقدمة:
- افتح ملف CSS الخاص بالمشروع.
- في ملف CSS ، أضف النمط الأساسي إلى العناوين باستخدام ' @طبقة 'التوجيه تحت' tilwind قاعدة ؛ 'التوجيه.
- قم بإنشاء برنامج HTML واستخدم عناصر العنوان فيه.
- قم بتشغيل برنامج HTML وتحقق من الإخراج.
الخطوة 1: إضافة نمط أساسي إلى العناوين في ملف CSS
أولاً ، افتح ' style.css 'وإضافة النمط الأساسي للعناوين الموجودة فيه باستخدام' @طبقة 'التوجيه. على سبيل المثال ، أضفنا النمط الأساسي إلى العناوين التالية:
تضمين التغريدة قاعدة ؛
@طبقة قاعدة {
h1 {
@يتقدم نص 6xl ؛
}
h2 {
@يتقدم نص 5xl ؛
}
h3 {
@يتقدم نص 4xl ؛
}
h4 {
@يتقدم نص 3xl ؛
}
h5 {
@يتقدم نص 2xl ؛
}
}
تضمين التغريدة عناصر ؛
تضمين التغريدة خدمات ؛
هنا:
- ' layer base {…} يعرّف 'طبقة أساسية جديدة ويحتوي على أنماط لمكونات العنوان.
- ' h1 {apply text-6xl؛ } 'يطبق' نص 6xl 'فئة المرافق إلى' h1 ' عناصر.
- بصورة مماثلة، ' h2 '،' h3 '،' h4 '، و ' h5 'يتم تعيين أحجام خطوطها باستخدام' @يتقدم ”وفئات المرافق ذات الصلة (text-5xl و text-4xl و text-3xl و text-2xl).
الخطوة 2: إنشاء صفحة ويب بتنسيق HTML باستخدام العناوين
ثم قم بعمل برنامج HTML واستخدم عناصر العنوان فيه. هنا ، استخدمنا عناصر العنوان التالية:
< جسم >
< شعبة فصل = 'h-screen justify-center text-center bg-violet-400' >
< h1 > عنوان 1 < / h1 >
< h2 > العنوان 2 < / h2 >
< h3 > العنوان 3 < / h3 >
< h4 > العنوان 4 < / h4 >
< h5 > العنوان 5 < / h5 >
< / شعبة >
< / جسم >
الخطوة 3: قم بتشغيل برنامج HTML
أخيرًا ، قم بتشغيل برنامج HTML واعرض صفحة الويب للتحقق:
عرض الإخراج أعلاه العناوين كما لو كانت أنماطًا في ملف CSS.
خاتمة
لتصميم العناوين في Tailwind ، افتح ملف CSS ، وأضف النمط الأساسي إلى العناوين باستخدام ' @طبقة 'التوجيه تحت' tilwind قاعدة ؛ 'التوجيه. بعد ذلك ، قم بإنشاء برنامج HTML واستخدم عناصر العنوان فيه. أخيرًا ، اعرض صفحة الويب بتنسيق HTML للتحقق من المخرجات. لقد أوضحت هذه الكتابة طريقة تصميم العناوين عن طريق إضافة النمط الأساسي في Tailwind.