الألوان من أهم العناصر اللي بتدي طابع وهوية للمشروع، وTailwind موفّرلك نظام قوي جدًا لإدارة الألوان سواء من الجاهز أو التخصيص.
الـ Default Palette:
Tailwind بييجي مع Palette جاهزة فيها كل درجات الألوان اللي ممكن تحتاجها تقريبا
كل لون ليه درجات متعددة من 50 → 900.
-
bg-blue-50= أفتح درجة. -
bg-blue-900= أغمق درجة.
وده بيديك مرونة رهيبة إنك تختار الدرجات حسب الـ Theme بتاعك.
تخصيص الألوان (Custom Colors):
لو عندك Brand Colors خاصة بيك أو محتاج ألوان مختلفة، بتقدر تضيفها بسهولة في ملف tailwind.config.js:
وبعد كده تستخدمها عادي جدًا:
🌗 دعم الـ Dark Mode
Tailwind بيسهّل جدًا تعمل ألوان مختلفة في الوضع الليلي:
بمجرد ما تفعّل darkMode: 'class' في tailwind.config.js، بتتحكم إنت إزاي الوضع الليلي يشتغل.
🔑 الخلاصة
-
عندك لوحة ألوان جاهزة ضخمة من Tailwind.
-
تقدر تضيف وتخصص ألوان البراند الخاصة بيك.
-
كل ده بيشتغل مع الـ Dark Mode بدون صداع.
المشاركة مع أصدقائك
قسم التعليقات