Tailwind CSS • المستوى الأول • الدرس 2

التحكم بالنصوص والمسافات (Typography & Spacing)

أهداف الدرس

استخدام أبعاد المسافات مثل p-* للهامش الداخلي و m-* للهامش الخارجي.
تعديل حجوم وعرض الخطوط بـ text-xl, font-bold, و text-center.
ضبط المسافة بين الأسطر بـ leading-relaxed و leading-loose.
استخدام التصميم المتجاوب (Responsive) بـ md:text-5xl.

1. نظام الأبعاد والخطوط

تعتمد Tailwind مقياساً موحداً للمسافات (كل وحدة 1 تساوي 0.25rem أو 4px)، مما يضمن اتساق التباعد في كامل واجهات تطبيقك.

html

<!-- نظام المسافات في Tailwind -->
<div class="p-4">    <!-- padding: 16px -->
<div class="p-6">    <!-- padding: 24px -->
<div class="p-8">    <!-- padding: 32px -->
<div class="p-12">   <!-- padding: 48px -->

<!-- mx-auto للتوسيط الأفقي -->
<div class="max-w-md mx-auto">...</div>

<!-- نظام الخطوط -->
<p class="text-xs">   <!-- 12px -->
<p class="text-sm">   <!-- 14px -->
<p class="text-base"> <!-- 16px -->
<p class="text-lg">   <!-- 18px -->
<p class="text-xl">   <!-- 20px -->

2. كلاسات المسافات الأساسية

الحشوة (Padding)

p-4 — كل الجوانب
px-4 — يمين + يسار
py-4 — أعلى + أسفل
pt-4 — أعلى فقط

الهامش (Margin)

m-4 — كل الجوانب
mx-auto — توسيط أفقي
mt-4 — أعلى فقط
mb-3 — أسفل فقط

الخطوط

text-xl — حجم
font-extrabold — سُمك
tracking-wide — تباعد الأحرف
leading-loose — تباعد الأسطر

الاستجابة

sm: — شاشات ≥ 640px
md: — شاشات ≥ 768px
lg: — شاشات ≥ 1024px

3. مسافات الخطوط (Line Height)

leading-tight

أسطر مضغوطة (1.25)

leading-relaxed

مريحة للقراءة (1.625)

leading-loose

واسعة جداً (2)

التطبيق العملي المباشر

تحدي الدرس الثاني: تصميم بطاقة نصية احترافية

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

غيّر الحشوة الداخلية للبطاقة من p-8 إلى p-12.
أضف حجم خط متجاوب للعنوان الرئيسي: md:text-5xl بجانب text-3xl.
أضف فاصلاً أفقياً <hr class="my-6 border-slate-700" /> بعد العنوان.
غيّر حجم خط الفقرة إلى text-base md:text-lg والمسافة بين الأسطر إلى leading-loose.
أضف شارة علوية <span> بحجم text-xs و tracking-widest و text-sky-400.
أضف 3 شارات صغيرة أسفل البطاقة بـ flex justify-center gap-4.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الثالث