English 中文 العربية 日本語 Português

Tailwind CSS: أساسيات الطباعة في Tailwind CSS

1. عائلة الخطوط

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Family Demo</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 - Sans-serif</p>
      <p class="font-serif text-lg mb-4">font-serif - Serif</p>
      <p class="font-mono text-lg mb-4">font-mono - Monospace</p>
      <p class="font-custom text-lg">font-custom - Custom Font</p>
    </div>

    <!-- Practical example -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-sans text-2xl font-bold mb-4">Headings use the sans font</h2>
      <p class="font-serif text-base leading-relaxed mb-4">
        Body text uses the serif font, ideal for long-form reading. Serif fonts are
        widely used in print media, guiding the reader's eye and improving readability.
      </p>
      <code class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">
        console.log('Code uses the mono font');
      </code>
    </div>
  </div>
</body>
</html>
41 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

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

2. حجم الخط

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

▶ مثال

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Demo</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) - Smallest size</p>
    <p class="text-sm text-gray-600">text-sm (14px) - Small size</p>
    <p class="text-base text-gray-700">text-base (16px) - Default size</p>
    <p class="text-lg text-gray-700">text-lg (18px) - Large size</p>
    <p class="text-xl text-gray-800">text-xl (20px) - Extra large size</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">
    
    <!-- Practical example -->
    <h1 class="text-4xl font-bold text-gray-900 mb-4">Page Main Heading</h1>
    <h2 class="text-2xl font-semibold text-gray-800 mb-3">Section Heading</h2>
    <h3 class="text-xl font-medium text-gray-700 mb-2">Subsection Heading</h3>
    <p class="text-base text-gray-600 leading-relaxed">
      Body text uses the default font size to ensure a comfortable reading experience.
    </p>
    <p class="text-sm text-gray-500 mt-4">Notes and auxiliary text use a smaller size</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].

3. سماكة الخط

يوفر Tailwind مجموعة كاملة من خيارات سماكة الخطوط بدءًا من font-thin (100) وصولاً إلى font-black (900).

▶ مثال

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Weight Demo</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) - Thin</p>
    <p class="font-extralight text-xl">font-extralight (200) - Extra light</p>
    <p class="font-light text-xl">font-light (300) - Light</p>
    <p class="font-normal text-xl">font-normal (400) - Normal</p>
    <p class="font-medium text-xl">font-medium (500) - Medium</p>
    <p class="font-semibold text-xl">font-semibold (600) - Semibold</p>
    <p class="font-bold text-xl">font-bold (700) - Bold</p>
    <p class="font-extrabold text-xl">font-extrabold (800) - Extra bold</p>
    <p class="font-black text-xl">font-black (900) - Black</p>
    
    <hr class="my-8">
    
    <!-- Practical example -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-bold text-2xl mb-4">Bold for heading emphasis</h2>
      <p class="font-normal text-base mb-2">Normal weight for body text</p>
      <p class="font-light text-sm text-gray-500">Light weight for auxiliary text</p>
      <span class="font-semibold text-blue-600">Semibold for important labels</span>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

4. ارتفاع السطر

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Height Demo</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">
      <!-- Line height comparison -->
      <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">
          This text uses the minimum line height with almost no spacing between lines. Best for headings or compact layouts.
        </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">
          This text uses a tighter line height, suitable for subtitles or text that needs a more compact display.
        </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">
          This text uses the default line height, ideal for most body text. It strikes a balance between reading comfort and space efficiency.
        </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">
          This text uses a more generous line height, perfect for long-form reading. The extra spacing helps reduce visual fatigue.
        </p>
      </div>
    </div>

    <!-- Numeric line heights -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Exact Numeric Line Heights</h3>
      <div class="space-y-4">
        <p class="leading-[1] text-gray-700">leading-[1] - Exactly set to 1</p>
        <p class="leading-[2rem] text-gray-700">leading-[2rem] - Exactly set to 2rem</p>
        <p class="leading-[32px] text-gray-700">leading-[32px] - Exactly set to 32px</p>
      </div>
    </div>
  </div>
</body>
</html>
47 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة ارتفاع السطر حالة الاستخدام
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 خيارات ارتفاع السطر الدلالي للاختيار السريع.

5. لون النص

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Color Demo</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">
    <!-- Basic colors -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Basic Text Colors</h3>
      <div class="space-y-2">
        <p class="text-gray-900">text-gray-900 - Darkest gray</p>
        <p class="text-gray-600">text-gray-600 - Medium gray</p>
        <p class="text-gray-400">text-gray-400 - Light gray</p>
      </div>
    </div>

    <!-- Semantic colors -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Semantic Text Colors</h3>
      <div class="space-y-2">
        <p class="text-blue-600">text-blue-600 - Links/info</p>
        <p class="text-green-600">text-green-600 - Success</p>
        <p class="text-yellow-600">text-yellow-600 - Warning</p>
        <p class="text-red-600">text-red-600 - Error</p>
        <p class="text-purple-600">text-purple-600 - Special emphasis</p>
      </div>
    </div>

    <!-- Opacity -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Text Color Opacity</h3>
      <div class="space-y-2">
        <p class="text-blue-600 opacity-100">opacity-100 - Fully opaque</p>
        <p class="text-blue-600 opacity-75">opacity-75 - 75% opaque</p>
        <p class="text-blue-600 opacity-50">opacity-50 - 50% opaque</p>
        <p class="text-blue-600 opacity-25">opacity-25 - 25% opaque</p>
      </div>
    </div>

    <!-- Gradient text -->
    <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">
        Gradient Text Effect
      </h3>
    </div>
  </div>
</body>
</html>
45 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

6. محاذاة النص وتزيينه

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Alignment & Decoration Demo</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">
    <!-- Text alignment -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Text Alignment</h3>
      <div class="space-y-4">
        <p class="text-left bg-gray-100 p-3 rounded">text-left - Left-aligned text</p>
        <p class="text-center bg-gray-100 p-3 rounded">text-center - Center-aligned text</p>
        <p class="text-right bg-gray-100 p-3 rounded">text-right - Right-aligned text</p>
        <p class="text-justify bg-gray-100 p-3 rounded">
          text-justify - Justified text. This paragraph demonstrates justified alignment, where text is distributed evenly across the container when it spans multiple lines.
        </p>
      </div>
    </div>

    <!-- Text decoration -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Text Decoration</h3>
      <div class="space-y-4">
        <p class="underline">underline - Underlined text</p>
        <p class="overline">overline - Overlined text</p>
        <p class="line-through">line-through - Strikethrough text</p>
        <p class="no-underline">no-underline - No decoration</p>
      </div>
    </div>

    <!-- Text transform -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Text Transform</h3>
      <div class="space-y-4">
        <p class="uppercase">uppercase - Uppercase transformation</p>
        <p class="lowercase">LOWERCASE - Lowercase transformation</p>
        <p class="capitalize">capitalize - Capitalize first letter</p>
        <p class="normal-case">normal-case - Normal casing</p>
      </div>
    </div>

    <!-- Decoration color and thickness -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Decoration Line Styles</h3>
      <div class="space-y-4">
        <p class="underline decoration-blue-500">Blue underline</p>
        <p class="underline decoration-2">Thick underline (2px)</p>
        <p class="underline decoration-4 decoration-wavy">Wavy decoration</p>
        <p class="underline decoration-dashed">Dashed decoration</p>
        <p class="underline decoration-dotted">Dotted decoration</p>
      </div>
    </div>
  </div>
</body>
</html>
52 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Style Demo</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">
    <!-- Unordered lists -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Unordered List Styles</h3>
      <ul class="list-disc space-y-2 pl-5">
        <li>list-disc - Solid bullet</li>
        <li>Second list item</li>
        <li>Third list item</li>
      </ul>
      
      <ul class="list-[square] space-y-2 pl-5 mt-4">
        <li>list-[square] - Solid square</li>
        <li>Using arbitrary value syntax</li>
      </ul>
      
      <ul class="list-none space-y-2 mt-4">
        <li>list-none - No marker</li>
        <li>Good for custom list styles</li>
      </ul>
    </div>

    <!-- Ordered lists -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Ordered List Styles</h3>
      <ol class="list-decimal space-y-2 pl-5">
        <li>list-decimal - Numbered</li>
        <li>Second list item</li>
        <li>Third list item</li>
      </ol>
      
      <ol class="list-[upper-alpha] space-y-2 pl-5 mt-4">
        <li>Uppercase letter numbering</li>
        <li>list-[upper-alpha]</li>
      </ol>
      
      <ol class="list-[lower-roman] space-y-2 pl-5 mt-4">
        <li>Lowercase Roman numerals</li>
        <li>list-[lower-roman]</li>
      </ol>
    </div>

    <!-- List position -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">List Marker Position</h3>
      <ul class="list-disc list-inside space-y-2 bg-gray-100 p-4 rounded">
        <li>list-inside - Marker inside the content area</li>
        <li>Long list item text wraps below the marker without indentation</li>
      </ul>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">List Marker Position</h3>
      <ul class="list-disc list-outside space-y-2 pl-5 bg-gray-100 p-4 rounded">
        <li>list-outside - Marker outside the content area</li>
        <li>Long list item text maintains its indentation</li>
      </ul>
    </div>
  </div>
</body>
</html>
59 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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 هو 16px. يمكنك تعديله من خلال إعدادات fontSize في tailwind.config، أو استخدام التوجيه @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. ⭐⭐⭐ إنشاء صفحة محتوى كاملة تتضمن قوائم مرتبة وغير مرتبة، واقتباسات، وكتل كود، وتطبق تكييف لون النص عند التبديل بين الوضع الداكن والوضع الفاتح

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%