جاري التحميل...
جاري التحميل...
الألوان، الخطوط، الخلفيات، الظلال، التدرجات، الحركات
يوفر Tailwind CSS مجموعة شاملة من الأدوات للتحكم الكامل في مظهر النص. من أحجام الخطوط إلى ارتفاعات الأسطر والتباعد — كل شيء متاح كفئات مساعدة جاهزة للاستخدام.
يحتوي Tailwind على إحدى أقوى مجموعات الألوان من بين أي إطار عمل CSS. أكثر من 50 لوناً مع 11 درجة لكل منها، بالإضافة إلى أدوات شفافية متقدمة.
يوفر Tailwind تحديداً دقيقاً على الخلفيات والحدود، بما في ذلك التدرجات والأحجام والأشكال.
تضيف الظلال والتدرجات عمقاً وحيوية للعناصر. يوفر Tailwind مجموعة منظمة من الظلال الجاهزة وأدوات التدرج القوية.
تحكم في الشفافية ودمج الألوان للتأثيرات البصرية المتقدمة.
تجعل الرسوم المتحركة واجهتك أكثر حيوية وتفاعلية.
كيف تعيّن لون خلفية بشفافية 50%؟
أي فئة تنشئ تدرجاً من اليسار إلى اليمين؟
ماذا يفعل transition-all؟
ابنِ بطاقة منتج تستخدم التسلسل الطباعي وخلفيات التدرج والظلال وانتقالات التمرير وتناقض الألوان المناسب.
الحل:
<div className="max-w-sm rounded-2xl overflow-hidden shadow-xl bg-white">
<div className="bg-gradient-to-r from-indigo-500 to-purple-600 h-24" />
<div className="px-6 pb-6 -mt-12">
<img
className="w-24 h-24 rounded-full border-4 border-white shadow-md"
src="/avatar.jpg"
alt="Profile"
/>
<h3 className="text-xl font-extrabold mt-3 text-gray-900">Ahmed</h3>
<p className="text-gray-500 text-sm">Frontend Developer</p>
<div className="flex gap-2 mt-4">
<button className="flex-1 bg-indigo-500 hover:bg-indigo-700 text-white py-2 rounded-lg transition-colors duration-200 font-medium">Follow</button>
<button className="flex-1 border border-gray-300 hover:bg-gray-100 text-gray-700 py-2 rounded-lg transition-colors duration-200 font-medium">Message</button>
</div>
</div>
</div>أنشئ بطاقة منتج مع طباعة وألوان وتدرجات وظلال.
💡 استخدم bg-gradient-to-r from-indigo-500 to-purple-600 للرأس، و rounded-full للأفاتار، و shadow-xl للبطاقة.
الطباعة:
الألوان:
الخلفيات والحدود:
الظلال:
الشفافية والدمج:
الانتقالات:
كيف تنشئ مكونات قابلة لإعادة الاستخدام بـ Tailwind؟
الإجابة:
استخدم clsx أو cva لإدارة الفئات الشرطية.
استخدم cva
class-variance-authority لإنشاء مكونات بـ variants مختلفة