تخطَّ إلى المحتوى

🌬️ شرح Tailwind CSS

الطباعة (Typography)

الدرس 9 من 25· ⏱ 1 دقائق قراءة

حجم الخطّ

<p class="text-xs">صغير جدًّا</p>
<p class="text-base">عادي</p>
<p class="text-2xl">كبير</p>
<h1 class="text-5xl">عنوان ضخم</h1>

الوزن

<p class="font-light">خفيف</p>
<p class="font-normal">عادي</p>
<p class="font-bold">عريض</p>
<p class="font-extrabold">عريض جدًّا</p>

المحاذاة

<p class="text-right">يمين</p>
<p class="text-center">وسط</p>
<p class="text-justify">ضبط</p>

ارتفاع السطر والتباعد

<p class="leading-relaxed">سطور مريحة</p>
<p class="tracking-wide">تباعد أحرف</p>

اللون والتزيين

<a class="text-blue-600 underline hover:no-underline">رابط</a>
<p class="italic">مائل</p>
<p class="truncate">نصّ طويل يُقتطع بنقاط...</p>

💡 للنصوص العربية الطويلة، leading-relaxed وtext-lg يحسّنان القراءة كثيرًا.

🎯 التالي: الخلفيات والتدرّجات.

هل كان هذا الدرس مفيدًا؟