EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

أساسيات الطباعة في Tailwind CSS: الخطوط وارتفاع السطر وأنماط النص

عائلة الخطوط

يوفر Tailwind ثلاث عائلات خطوط افتراضية: font-sans (بدأطراف)، font-serif (بأطراف)، وfont-mono (أحادي المسافة). يمكنك أيضًا إضافة خطوط مخصصة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض عائلة الخطوط</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            'custom': ['"Inter"', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-8">
    <div class="bg-white p-6 rounded-lg shadow">
      <p class="font-sans text-lg mb-4">font-sans - بدون أطراف</p>
      <p class="font-serif text-lg mb-4">font-serif - بأطراف</p>
      <p class="font-mono text-lg mb-4">font-mono - أحادي المسافة</p>
      <p class="font-custom text-lg">font-custom - خط مخصص</p>
    </div>

    <!-- مثال عملي -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-sans text-2xl font-bold mb-4">العناوين تستخدم خط sans</h2>
      <p class="font-serif text-base leading-relaxed mb-4">
        يستخدم النص الأساسي خط serif، وهو مثالي للقراءة الطويلة. تُستخدم خطوط serif
        على نطاق واسع في وسائط الطباعة، حيث توجه عين القارئ وتحسن القراءة.
      </p>
      <code class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">
        console.log('الكود يستخدم خط mono');
      </code>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع عائلات الخطوط:

الفئة نوع الخط حالة الاستخدام
font-sans بدون أطراف العناوين، عناصر واجهة المستخدم
font-serif بأطراف النص الأساسي، القراءة الطويلة
font-mono أحادي المسافة الكود، عرض البيانات

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعريف خصائص font-family والتعامل مع بدائل الخطوط يدويًا. يوفر Tailwind مجموعات خطوط جاهزة للاستخدام مع بدائل مناسبة عبر المنصات بشكل افتراضي.

حجم الخط

يوفر Tailwind نظام حجم خط كامل يتراوح من text-xs (12 بكسل) إلى text-9xl (128 بكسل).

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض حجم الخط</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-4">
    <p class="text-xs text-gray-600">text-xs (12px) - أصغر حجم</p>
    <p class="text-sm text-gray-600">text-sm (14px) - حجم صغير</p>
    <p class="text-base text-gray-700">text-base (16px) - الحجم الافتراضي</p>
    <p class="text-lg text-gray-700">text-lg (18px) - حجم كبير</p>
    <p class="text-xl text-gray-800">text-xl (20px) - حجم كبير جدًا</p>
    <p class="text-2xl font-semibold">text-2xl (24px)</p>
    <p class="text-3xl font-semibold">text-3xl (30px)</p>
    <p class="text-4xl font-bold">text-4xl (36px)</p>
    <p class="text-5xl font-bold">text-5xl (48px)</p>
    <hr class="my-8">
    
    <!-- مثال عملي -->
    <h1 class="text-4xl font-bold text-gray-900 mb-4">العنوان الرئيسي للصفحة</h1>
    <h2 class="text-2xl font-semibold text-gray-800 mb-3">عنوان القسم</h2>
    <h3 class="text-xl font-medium text-gray-700 mb-2">عنوان فرعي</h3>
    <p class="text-base text-gray-600 leading-relaxed">
      يستخدم النص الأساسي حجم الخط الافتراضي لضمان تجربة قراءة مريحة.
    </p>
    <p class="text-sm text-gray-500 mt-4">الملاحظات والنص المساعد يستخدم حجمًا أصغر</p>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع أحجام الخطوط:

الفئة الحجم ارتفاع السطر
text-xs 12px 16px
text-sm 14px 20px
text-base 16px 24px
text-lg 18px 28px
text-xl 20px 28px
text-2xl 24px 32px
text-3xl 30px 36px
text-4xl 36px 40px
text-5xl 48px 1
text-6xl 60px 1
text-7xl 72px 1
text-8xl 96px 1
text-9xl 128px 1

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي حفظ قيم البكسل الدقيقة، بينما يستخدم Tailwind أسماء أحجام دلالية أسهل في التذكر والاستخدام.

نصيحة: استخدم بنية القيم التعسفية لتعيين أي حجم خط، مثل text-[22px] أو text-[1.375rem].

وزن الخط

يوفر Tailwind مجموعة كاملة من خيارات وزن الخط من font-thin (100) إلى font-black (900).

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض وزن الخط</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-4">
    <p class="font-thin text-xl">font-thin (100) - رفيع</p>
    <p class="font-extralight text-xl">font-extralight (200) - رفيع جدًا</p>
    <p class="font-light text-xl">font-light (300) - خفيف</p>
    <p class="font-normal text-xl">font-normal (400) - عادي</p>
    <p class="font-medium text-xl">font-medium (500) - متوسط</p>
    <p class="font-semibold text-xl">font-semibold (600) - شبه عريض</p>
    <p class="font-bold text-xl">font-bold (700) - عريض</p>
    <p class="font-extrabold text-xl">font-extrabold (800) - عريض جدًا</p>
    <p class="font-black text-xl">font-black (900) - أسود</p>
    
    <hr class="my-8">
    
    <!-- مثال عملي -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-bold text-2xl mb-4">العريض للعناوين المميزة</h2>
      <p class="font-normal text-base mb-2">الوزن العادي للنص الأساسي</p>
      <p class="font-light text-sm text-gray-500">الوزن الخفيف للنص المساعد</p>
      <span class="font-semibold text-blue-600">شبه عريض للتسميات المهمة</span>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تذكر القيم الرقمية مثل font-weight: 700، بينما يستخدم Tailwind أسماء دلالية بديهية مثل font-bold.

ارتفاع السطر

يتحكم ارتفاع السطر في المسافة بين أسطر النص. يوفر Tailwind خيارات مسبقة من leading-none إلى leading-loose.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض ارتفاع السطر</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- مقارنة ارتفاع السطر -->
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-none (line-height 1)</h3>
        <p class="leading-none text-gray-700">
          يستخدم هذا النص الحد الأدنى لارتفاع السطر مع عدم وجود تقريبًا أي مسافة بين الأسطر. الأفضل للعناوين أو التخطيطات المدمجة.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-tight (line-height 1.25)</h3>
        <p class="leading-tight text-gray-700">
          يستخدم هذا النص ارتفاع سطر أكثر إحكامًا، مناسب للعناوين الفرعية أو النص الذي يحتاج إلى عرض أكثر إحكامًا.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-normal (line-height 1.5)</h3>
        <p class="leading-normal text-gray-700">
          يستخدم هذا النص ارتفاع السطر الافتراضي، مثالي لمعظم النصوص الأساسية. يحقق توازنًا بين راحة القراءة وكفاءة المساحة.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-relaxed (line-height 1.625)</h3>
        <p class="leading-relaxed text-gray-700">
          يستخدم هذا النص ارتفاع سطر أكثر سخاءً، مثالي للقراءة الطويلة. تساعد المسافة الإضافية في تقليل إجهاد العينين.
        </p>
      </div>
    </div>

    <!-- ارتفاعات سطر رقمية -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">ارتفاعات سطر رقمية دقيقة</h3>
      <div class="space-y-4">
        <p class="leading-[1] text-gray-700">leading-[1] - مضبوط بالضبط على 1</p>
        <p class="leading-[2rem] text-gray-700">leading-[2rem] - مضبوط بالضبط على 2rem</p>
        <p class="leading-[32px] text-gray-700">leading-[32px] - مضبوط بالضبط على 32px</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع ارتفاع السطر:

الفئة ارتفاع السطر حالة الاستخدام
leading-none 1 العناوين، الأزرار
leading-tight 1.25 العناوين الفرعية
leading-snug 1.375 نص مدمج
leading-normal 1.5 النص الأساسي الافتراضي
leading-relaxed 1.625 القراءة الطويلة
leading-loose 2 مسافة فضفاضة جدًا

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين قيم line-height بشكل منفصل لسياقات النص المختلفة، بينما يوفر Tailwind خيارات ارتفاع سطر دلالية للتحديد السريع.

لون النص

يوفر Tailwind نظام ألوان شامل يغطي جميع احتياجات ألوان النص الشائعة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض لون النص</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- الألوان الأساسية -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">ألوان النص الأساسية</h3>
      <div class="space-y-2">
        <p class="text-gray-900">text-gray-900 - رمادي داكن جدًا</p>
        <p class="text-gray-600">text-gray-600 - رمادي متوسط</p>
        <p class="text-gray-400">text-gray-400 - رمادي فاتح</p>
      </div>
    </div>

    <!-- الألوان الدلالية -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">ألوان النص الدلالية</h3>
      <div class="space-y-2">
        <p class="text-blue-600">text-blue-600 - روابط/معلومات</p>
        <p class="text-green-600">text-green-600 - نجاح</p>
        <p class="text-yellow-600">text-yellow-600 - تحذير</p>
        <p class="text-red-600">text-red-600 - خطأ</p>
        <p class="text-purple-600">text-purple-600 - تأكيد خاص</p>
      </div>
    </div>

    <!-- الشفافية -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">شفافية لون النص</h3>
      <div class="space-y-2">
        <p class="text-blue-600 opacity-100">opacity-100 - معتم بالكامل</p>
        <p class="text-blue-600 opacity-75">opacity-75 - 75% معتم</p>
        <p class="text-blue-600 opacity-50">opacity-50 - 50% معتم</p>
        <p class="text-blue-600 opacity-25">opacity-25 - 25% معتم</p>
      </div>
    </div>

    <!-- نص متدرج -->
    <div class="bg-gray-900 p-6 rounded-lg">
      <h3 class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 text-3xl font-bold">
        تأثير النص المتدرج
      </h3>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعريف متغيرات الألوان أو قيم السداسي عشرية في CSS، بينما يوفر Tailwind نظام ألوان دلالي (مثل text-red-600) يعبر مباشرة عن النية البصرية.

محاذاة النص والزخرفة

يوفر Tailwind خيارات محاذاة نص وزخرفة كاملة لاحتياجات الطباعة المختلفة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض محاذاة النص والزخرفة</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- محاذاة النص -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">محاذاة النص</h3>
      <div class="space-y-4">
        <p class="text-left bg-gray-100 p-3 rounded">text-left - نص محاذى لليسار</p>
        <p class="text-center bg-gray-100 p-3 rounded">text-center - نص محاذى للوسط</p>
        <p class="text-right bg-gray-100 p-3 rounded">text-right - نص محاذى لليمين</p>
        <p class="text-justify bg-gray-100 p-3 rounded">
          text-justify - نص مبرر. يوضح هذا الفقرة المحاذاة المبررة، حيث يتم توزيع النص بالتساوي عبر الحاوية عندما يمتد لأكثر من سطر.
        </p>
      </div>
    </div>

    <!-- زخرفة النص -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">زخرفة النص</h3>
      <div class="space-y-4">
        <p class="underline">underline - نص تحته خط</p>
        <p class="overline">overline - نص فوقه خط</p>
        <p class="line-through">line-through - نص يتوسطه خط</p>
        <p class="no-underline">no-underline - بدون زخرفة</p>
      </div>
    </div>

    <!-- تحويل النص -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">تحويل النص</h3>
      <div class="space-y-4">
        <p class="uppercase">uppercase - تحويل إلى أحرف كبيرة</p>
        <p class="lowercase">LOWERCASE - تحويل إلى أحرف صغيرة</p>
        <p class="capitalize">capitalize - تكبير الحرف الأول</p>
        <p class="normal-case">normal-case - حالة عادية</p>
      </div>
    </div>

    <!-- لون الزخرفة وسمكها -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">أنماط خطوط الزخرفة</h3>
      <div class="space-y-4">
        <p class="underline decoration-blue-500">خط أزرق سفلي</p>
        <p class="underline decoration-2">خط سفلي سميك (2px)</p>
        <p class="underline decoration-4 decoration-wavy">زخرفة متموجة</p>
        <p class="underline decoration-dashed">زخرفة متقطعة</p>
        <p class="underline decoration-dotted">زخرفة منقطة</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خصائص text-align وtext-decoration وtext-transform وغيرها بشكل فردي، بينما يستخدم Tailwind أسماء فئات مختصرة مثل text-center وunderline وuppercase.

أنماط القوائم

يوفر Tailwind تحكمات في أنماط القوائم، بما في ذلك نوع وموضع علامة القائمة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض أنماط القوائم</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- القوائم غير المرتبة -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">أنماط القوائم غير المرتبة</h3>
      <ul class="list-disc space-y-2 pl-5">
        <li>list-disc - نقطة ممتلئة</li>
        <li>عنصر القائمة الثاني</li>
        <li>عنصر القائمة الثالث</li>
      </ul>
      
      <ul class="list-[square] space-y-2 pl-5 mt-4">
        <li>list-[square] - مربع ممتلئ</li>
        <li>استخدام بنية القيم التعسفية</li>
      </ul>
      
      <ul class="list-none space-y-2 mt-4">
        <li>list-none - بدون علامة</li>
        <li>مفيد لأنماط القوائم المخصصة</li>
      </ul>
    </div>

    <!-- القوائم المرتبة -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">أنماط القوائم المرتبة</h3>
      <ol class="list-decimal space-y-2 pl-5">
        <li>list-decimal - مرقمة</li>
        <li>عنصر القائمة الثاني</li>
        <li>عنصر القائمة الثالث</li>
      </ol>
      
      <ol class="list-[upper-alpha] space-y-2 pl-5 mt-4">
        <li>ترقيم بأحرف كبيرة</li>
        <li>list-[upper-alpha]</li>
      </ol>
      
      <ol class="list-[lower-roman] space-y-2 pl-5 mt-4">
        <li>أرقام رومانية صغيرة</li>
        <li>list-[lower-roman]</li>
      </ol>
    </div>

    <!-- موضع العلامة -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">موضع علامة القائمة</h3>
      <ul class="list-disc list-inside space-y-2 bg-gray-100 p-4 rounded">
        <li>list-inside - العلامة داخل منطقة المحتوى</li>
        <li>نص عنصر القائمة الطويل يلتف أسفل العلامة بدون مسافة بادئة</li>
      </ul>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">موضع علامة القائمة</h3>
      <ul class="list-disc list-outside space-y-2 pl-5 bg-gray-100 p-4 rounded">
        <li>list-outside - العلامة خارج منطقة المحتوى</li>
        <li>نص عنصر القائمة الطويل يحافظ على مسافته البادئة</li>
      </ul>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خصائص list-style-type وlist-style-position، بينما يستخدم Tailwind أسماء فئات مختصرة مثل list-disc وlist-inside.

نصيحة: استخدم بنية القيم التعسفية لتعيين أي نمط قائمة، مثل list-[upper-alpha] أو list-[lower-roman].

❓ أسئلة شائعة

س كيف أستخدم خطوطًا مخصصة في Tailwind؟
ج قم بتوسيع إعداد fontFamily في tailwind.config، أو استخدم بنية القيم التعسفية مثل font-["MyFont",sans-serif]. تذكر تضمين ملف الخط أو رابط CDN في HTML الخاص بك.
س ما هو الحجم الافتراضي لـ text-base؟ هل يمكنني تغييره؟
ج text-base افتراضيًا 16 بكسل. يمكنك تعديله من خلال إعداد fontSize في tailwind.config، أو استخدام directive @theme في CSS لتخصيصه.
س كيف أنشئ تأثير نص متدرج؟
ج اجمع بين فئات text-transparent وbg-clip-text وbg-gradient-to-r لقص التدرج الخلفي على شكل النص.
س ما الفرق بين leading-tight وleading-[1.25]؟
ج ينتجان نفس النتيجة. leading-tight هو اسم دلالي مسبق. فضّل الأسماء المسبقة للاتساق، واستخدم القيم التعسفية فقط للمتطلبات الخاصة.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ صفحة مقال تحتوي على عنوان (باستخدام text-4xl font-bold)، وعنوان فرعي، ونص أساسي، وملاحظات، تعرض تركيبات مختلفة من أحجام وأوزان الخطوط

  2. ⭐⭐ أنشئ بطاقة أسعار تستخدم نصًا متدرجًا للسعر، وتشمل سعرًا أصليًا (line-through) وسعرًا مخفضًا، توضح الاستخدام العملي لزخرفة النص

  3. ⭐⭐⭐ أنشئ صفحة محتوى كاملة تشمل قوائم مرتبة وغير مرتبة، واقتباسات، وأكواد، وتنفذ تكييف ألوان النص للتبديل بين الوضع المظلم/الفاتح

100%