الألوان والخلفيات

فهم نظام الألوان في Tailwind

يوفر Tailwind CSS واحدًا من أكثر أنظمة الألوان شمولاً ومصممًا بعناية في أي إطار عمل CSS. تتكون لوحة الألوان من ظلال مصممة بعناية ومنظمة في مقياس متسق، مما يجعل من السهل إنشاء واجهات جميلة ومتاحة.

لوحة الألوان

يتضمن Tailwind 22 عائلة ألوان جاهزة، كل منها بـ 10-11 ظلالًا:

الألوان الأساسية

• Slate: رمادي بارد - احترافي وحديث
• Gray: رمادي حقيقي - محايد ومتعدد الاستخدامات
• Zinc: رمادي دافئ - خفي ومتطور
• Neutral: رمادي متوازن - نظيف وبسيط
• Stone: رمادي ترابي - عضوي ومتأصل

ألوان العلامة التجارية

• Red: خطر، أخطاء، تنبيهات
• Orange: تحذير، انتباه
• Amber: لهجة دافئة، حذر
• Yellow: تمييز، أشعة الشمس
• Lime: منعش، نشيط
• Green: نجاح، إجراءات إيجابية
• Emerald: أخضر غني، متميز
• Teal: احترافي، مهدئ
• Cyan: ساطع، يركز على التكنولوجيا
• Sky: أزرق فاتح، جوي
• Blue: ثقة، إجراءات أساسية
• Indigo: أزرق عميق، متطور
• Violet: إبداعي، فني
• Purple: فاخر، متميز
• Fuchsia: جريء، نابض بالحياة
• Pink: مرح، ودود
• Rose: رومانسي، أنيق

ألوان النص

طبق ألوان النص باستخدام نمط text-{color}-{shade}:

<!-- ألوان النص الأساسية -->
<p class="text-gray-900">نص أساسي (رمادي أغمق)</p>
<p class="text-gray-700">نص ثانوي (رمادي متوسط)</p>
<p class="text-gray-500">نص ثالثي (رمادي فاتح)</p>

<!-- ألوان العلامة التجارية -->
<p class="text-blue-600">نص أزرق أساسي</p>
<p class="text-red-600">نص خطأ أو خطر</p>
<p class="text-green-600">نص رسالة نجاح</p>
<p class="text-yellow-600">نص تحذير</p>

<!-- عرض الظلال -->
<p class="text-blue-50">أزرق فاتح جدًا (50)</p>
<p class="text-blue-100">أزرق فاتح (100)</p>
<p class="text-blue-200">أزرق أفتح (200)</p>
<p class="text-blue-300">أزرق فاتح (300)</p>
<p class="text-blue-400">أزرق ناعم (400)</p>
<p class="text-blue-500">أزرق أساسي (500) - افتراضي</p>
<p class="text-blue-600">أزرق عميق (600)</p>
<p class="text-blue-700">أزرق أغمق (700)</p>
<p class="text-blue-800">أزرق داكن جدًا (800)</p>
<p class="text-blue-900">أزرق أغمق (900)</p>
<p class="text-blue-950">أزرق داكن للغاية (950)</p>

الاستخدام العملي لألوان النص

<article class="max-w-2xl mx-auto p-8">
    <!-- العنوان الرئيسي - الأغمق لأقصى تباين -->
    <h1 class="text-4xl font-bold text-gray-900 mb-4">
        عنوان المقال
    </h1>

    <!-- معلومات التعريف - رمادي متوسط -->
    <div class="text-sm text-gray-600 mb-8">
        نُشر في <time class="text-gray-700">15 يناير 2026</time>
        بواسطة <span class="text-blue-600 hover:text-blue-700">أحمد محمد</span>
    </div>

    <!-- نص الجسم - أفتح قليلاً من العنوان -->
    <p class="text-lg text-gray-800 leading-relaxed mb-6">
        فقرة الجسم مع سهولة قراءة جيدة. يجب أن يكون النص داكنًا بدرجة كافية
        للقراءة المريحة ولكن ليس داكنًا مثل العناوين.
    </p>

    <!-- نص داعم - أفتح بعد -->
    <p class="text-gray-600 mb-4">
        معلومات داعمة أو تفاصيل أقل أهمية.
    </p>

    <!-- دعوة للعمل - لون العلامة التجارية -->
    <a href="#" class="inline-block text-blue-600 hover:text-blue-700 font-semibold">
        اقرأ المزيد ←
    </a>
</article>

ألوان الخلفية

طبق ألوان الخلفية باستخدام نمط bg-{color}-{shade}:

<!-- خلفيات محايدة -->
<div class="bg-white">خلفية بيضاء</div>
<div class="bg-gray-50">رمادي فاتح جدًا - تباين خفيف</div>
<div class="bg-gray-100">رمادي فاتح - خلفيات الأقسام</div>
<div class="bg-gray-900">خلفية داكنة - للسمات الداكنة</div>
<div class="bg-black">خلفية سوداء نقية</div>

<!-- خلفيات العلامة التجارية -->
<div class="bg-blue-500 text-white">خلفية زر أساسي</div>
<div class="bg-blue-600 text-white">حالة تحويم زر أساسي</div>
<div class="bg-blue-100 text-blue-800">تمييز أزرق خفيف</div>

<!-- خلفيات الحالة -->
<div class="bg-green-100 text-green-800">رسالة نجاح</div>
<div class="bg-yellow-100 text-yellow-800">رسالة تحذير</div>
<div class="bg-red-100 text-red-800">رسالة خطأ</div>
<div class="bg-blue-100 text-blue-800">رسالة معلومات</div>

إنشاء مكونات تنبيه دلالية

<!-- تنبيه نجاح -->
<div class="bg-green-50 border-l-4 border-green-500 p-4 mb-4">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-green-800">نجاح!</h3>
            <p class="text-sm text-green-700 mt-1">تم حفظ تغييراتك بنجاح.</p>
        </div>
    </div>
</div>

<!-- تنبيه خطأ -->
<div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-red-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"></path>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800">خطأ</h3>
            <p class="text-sm text-red-700 mt-1">كانت هناك مشكلة في حفظ تغييراتك.</p>
        </div>
    </div>
</div>

<!-- تنبيه تحذير -->
<div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-4">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-yellow-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"></path>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-yellow-800">تحذير</h3>
            <p class="text-sm text-yellow-700 mt-1">ستنتهي صلاحية جلستك خلال 5 دقائق.</p>
        </div>
    </div>
</div>

<!-- تنبيه معلومات -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
    <div class="flex items-start">
        <svg class="w-5 h-5 text-blue-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"></path>
        </svg>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-blue-800">معلومات</h3>
            <p class="text-sm text-blue-700 mt-1">يتوفر تحديث برنامج جديد.</p>
        </div>
    </div>
</div>

ألوان مخصصة

يمكنك توسيع لوحة ألوان Tailwind بألوان مخصصة في ملف التكوين الخاص بك:

module.exports = {
    theme: {
        extend: {
            colors: {
                // لون مخصص واحد
                'brand': '#1da1f2',

                // لون مخصص بظلال
                'primary': {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    200: '#bfdbfe',
                    300: '#93c5fd',
                    400: '#60a5fa',
                    500: '#3b82f6',  // الظل الأساسي
                    600: '#2563eb',
                    700: '#1d4ed8',
                    800: '#1e40af',
                    900: '#1e3a8a',
                    950: '#172554',
                },

                // ألوان العلامة التجارية
                'brand-blue': '#1da1f2',
                'brand-dark': '#14171a',
                'brand-gray': '#657786',
            },
        },
    },
}

// الاستخدام في HTML
<div class="bg-brand text-white">لون العلامة التجارية المخصص</div>
<div class="bg-primary-500 text-white">لون أساسي مخصص</div>
<div class="bg-brand-blue text-white">أزرق العلامة التجارية</div>

معدلات التعتيم

يتيح لك Tailwind ضبط تعتيم اللون باستخدام بناء الجملة /{opacity}:

<!-- تعتيم الخلفية -->
<div class="bg-blue-500/100">تعتيم 100٪ (غير شفاف تمامًا)</div>
<div class="bg-blue-500/75">تعتيم 75٪</div>
<div class="bg-blue-500/50">تعتيم 50٪</div>
<div class="bg-blue-500/25">تعتيم 25٪</div>
<div class="bg-blue-500/10">تعتيم 10٪</div>
<div class="bg-blue-500/0">تعتيم 0٪ (شفاف تمامًا)</div>

<!-- تعتيم النص -->
<p class="text-gray-900/100">نص غير شفاف تمامًا</p>
<p class="text-gray-900/75">نص تعتيم 75٪</p>
<p class="text-gray-900/50">نص تعتيم 50٪</p>

<!-- تعتيم الحدود -->
<div class="border-2 border-gray-300/50">حدود تعتيم 50٪</div>

<!-- مثال عملي: تراكب -->
<div class="relative">
    <img src="hero.jpg" class="w-full h-96 object-cover">
    <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
        <h2 class="text-4xl font-bold text-white">عنوان البطل</h2>
    </div>
</div>

قيم تعتيم تعسفية

<!-- استخدم قيم تعتيم تعسفية بأقواس مربعة -->
<div class="bg-blue-500/[.35]">تعتيم 35٪</div>
<div class="bg-blue-500/[.62]">تعتيم 62٪</div>
<div class="bg-blue-500/[.88]">تعتيم 88٪</div>

<!-- حالة التحويم مع التعتيم -->
<button class="bg-blue-500 hover:bg-blue-500/90 text-white">
    قم بالتحويم لرؤية تغيير التعتيم
</button>

خلفيات متدرجة

يوفر Tailwind أدوات لإنشاء خلفيات متدرجة جميلة:

التدرجات الخطية

<!-- اتجاهات التدرج -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">من اليسار إلى اليمين</div>
<div class="bg-gradient-to-l from-blue-500 to-purple-500">من اليمين إلى اليسار</div>
<div class="bg-gradient-to-t from-blue-500 to-purple-500">من الأسفل إلى الأعلى</div>
<div class="bg-gradient-to-b from-blue-500 to-purple-500">من الأعلى إلى الأسفل</div>

<!-- تدرجات قطرية -->
<div class="bg-gradient-to-br from-blue-500 to-purple-500">من أعلى اليسار إلى أسفل اليمين</div>
<div class="bg-gradient-to-bl from-blue-500 to-purple-500">من أعلى اليمين إلى أسفل اليسار</div>
<div class="bg-gradient-to-tr from-blue-500 to-purple-500">من أسفل اليسار إلى أعلى اليمين</div>
<div class="bg-gradient-to-tl from-blue-500 to-purple-500">من أسفل اليمين إلى أعلى اليسار</div>

تدرجات متعددة الألوان مع Via

<!-- تدرج ثلاثي الألوان مع via -->
<div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500">
    وردي → بنفسجي → نيلي
</div>

<div class="bg-gradient-to-br from-green-400 via-blue-500 to-purple-600">
    أخضر → أزرق → بنفسجي
</div>

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500">
    تدرج الغروب
</div>

<!-- ألوان via متعددة (Tailwind v3.1+) -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 via-pink-500 to-red-500">
    تدرج رباعي الألوان
</div>

تدرج مع التعتيم

<!-- تلاشي إلى شفاف -->
<div class="bg-gradient-to-r from-blue-500 to-transparent">
    يتلاشى إلى شفاف
</div>

<!-- معدلات التعتيم على التدرجات -->
<div class="bg-gradient-to-r from-blue-500/50 to-purple-500/50">
    تدرج تعتيم 50٪
</div>

<!-- مثال عملي: تدرج تراكب الصورة -->
<div class="relative h-96">
    <img src="background.jpg" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
        <div class="absolute bottom-8 left-8 text-white">
            <h2 class="text-4xl font-bold">تراكب متدرج</h2>
            <p class="text-lg">النص يبقى قابلاً للقراءة</p>
        </div>
    </div>
</div>

أمثلة تدرج واقعية

<div class="max-w-sm mx-auto">
    <!-- بطاقة التدرج -->
    <div class="rounded-2xl overflow-hidden shadow-2xl">

        <!-- رأس التدرج -->
        <div class="h-32 bg-gradient-to-br from-purple-600 via-pink-500 to-red-500"></div>

        <!-- المحتوى -->
        <div class="bg-white p-6 -mt-8">
            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600
                        flex items-center justify-center text-white text-2xl font-bold mb-4">
                JS
            </div>

            <h3 class="text-xl font-bold text-gray-900 mb-2">
                دورة JavaScript
            </h3>

            <p class="text-gray-600 mb-4">
                أتقن JavaScript الحديث من خلال مشاريع عملية وأمثلة واقعية.
            </p>

            <button class="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600
                           hover:from-purple-700 hover:to-pink-700
                           text-white font-semibold rounded-lg
                           transform transition hover:scale-105">
                سجل الآن
            </button>
        </div>

    </div>
</div>

حجم الخلفية والموضع والتكرار

حجم الخلفية

<!-- حجم الخلفية -->
<div class="bg-[url('/img/pattern.png')] bg-auto">حجم تلقائي (أصلي)</div>
<div class="bg-[url('/img/pattern.png')] bg-cover">تغطية (يملأ الحاوية)</div>
<div class="bg-[url('/img/pattern.png')] bg-contain">احتواء (يناسب الداخل)</div>

<!-- حالة استخدام شائعة: قسم البطل -->
<div class="h-96 bg-[url('/img/hero.jpg')] bg-cover bg-center bg-no-repeat">
    <div class="h-full flex items-center justify-center bg-black/50">
        <h1 class="text-5xl font-bold text-white">عنوان البطل</h1>
    </div>
</div>

موضع الخلفية

<!-- مواضع الزاوية -->
<div class="bg-[url('/img/bg.jpg')] bg-top">أعلى</div>
<div class="bg-[url('/img/bg.jpg')] bg-bottom">أسفل</div>
<div class="bg-[url('/img/bg.jpg')] bg-left">يسار</div>
<div class="bg-[url('/img/bg.jpg')] bg-right">يمين</div>
<div class="bg-[url('/img/bg.jpg')] bg-center">وسط (افتراضي)</div>

<!-- مواضع مدمجة -->
<div class="bg-[url('/img/bg.jpg')] bg-top-left">أعلى اليسار</div>
<div class="bg-[url('/img/bg.jpg')] bg-top-right">أعلى اليمين</div>
<div class="bg-[url('/img/bg.jpg')] bg-bottom-left">أسفل اليسار</div>
<div class="bg-[url('/img/bg.jpg')] bg-bottom-right">أسفل اليمين</div>

تكرار الخلفية

<!-- أنماط التكرار -->
<div class="bg-[url('/img/pattern.png')] bg-repeat">تكرار (افتراضي)</div>
<div class="bg-[url('/img/pattern.png')] bg-no-repeat">بدون تكرار</div>
<div class="bg-[url('/img/pattern.png')] bg-repeat-x">تكرار أفقيًا</div>
<div class="bg-[url('/img/pattern.png')] bg-repeat-y">تكرار عموديًا</div>
<div class="bg-[url('/img/pattern.png')] bg-repeat-round">تكرار وتحجيم</div>
<div class="bg-[url('/img/pattern.png')] bg-repeat-space">تكرار مع تباعد</div>

الملخص

في هذا الدرس، استكشفنا نظام الألوان الشامل لـ Tailwind وأدوات الخلفية:

• مقياس اللون: ظلال 50-950 لكل عائلة ألوان، توفر تحكمًا دقيقًا
• ألوان النص: text-{color}-{shade} لتسلسل الطباعة
• ألوان الخلفية: bg-{color}-{shade} للأسطح والحاويات
• ألوان مخصصة: توسيع اللوحة بألوان العلامة التجارية في ملف التكوين
• معدلات التعتيم: بناء الجملة /{opacity} للألوان الشفافة
• التدرجات: تدرجات خطية مع from، via، to
• خصائص الخلفية: التحكم في الحجم والموضع والتكرار لصور الخلفية

أفضل الممارسات الرئيسية:

• استخدم ظلالًا أغمق (700-900) للنص على خلفيات فاتحة
• اقرن خلفيات فاتحة (50-100) بنص أغمق (700-900)
• حافظ على نسبة تباين 4.5:1 لإمكانية الوصول
• استخدم ألوانًا دلالية (أخضر للنجاح، أحمر للأخطاء)
• أنشئ تسلسلًا بصريًا بكثافة اللون
• اختبر التدرجات على أحجام شاشة مختلفة

في الدرس التالي، سنغوص في أدوات الطباعة وتصميم النص، نتعلم كيفية إنشاء نص جميل وقابل للقراءة مع نظام نوع Tailwind.