واحدة من الحاجات اللي Tailwind بتسهلها جدا هي التحكم في الخلفيات. بدل ما تكتب CSS طويل عشان تعمل Background بسيط، هنا هتلاقي Utilities جاهزة لأي حاجة محتاجها:
Background Colors
أبسط حاجة:
- أي لون من الـ palette بتاع Tailwind تقدر تستخدمه مباشرة.
- تقدر تخصص الألوان في
tailwind.config.jsلو عندك براند خاص.
Gradients (تدرجات الألوان)
Tailwind عندها Utilities قوية للـ gradients:
bg-gradient-to-r= Gradient من اليسار لليمين.from-purple-500→ اللون الأول.to-pink-500→ اللون التاني.
اتجاهات تانية متاحة:
bg-gradient-to-t(من تحت لفوق)bg-gradient-to-br(من فوق شمال ليمين تحت)- وهكذا…
كمان تقدر تضيف via-... عشان gradient بـ 3 ألوان.
Background Images
ممكن تعمل Background Image مباشرة:
bg-cover→ الصورة تغطي المساحة كلها.bg-contain→ الصورة كاملة من غير ما تتقص.bg-center/bg-top/bg-bottom→ التحكم في مكان الصورة.
الخلاصة
- Colors: أسرع طريقة تحط ألوان جاهزة أو تخصصها.
- Gradients: Utilities مرنة لتدرجات أنيقة.
- Images: تحكم كامل في الصور من غير CSS زيادة.
Tailwind بيديك Toolkit جاهز يخليك تبني خلفيات متناسقة وأنيقة بسرعة 💡
المشاركة مع أصدقائك
قسم التعليقات