لون النصّ والخلفية
<p class="text-red-500">نصّ أحمر</p>
<div class="bg-blue-600">خلفية زرقاء</div>
<div class="border border-gray-300">حدود رمادية</div>
الدرجات (50 → 950)
كل لون له درجات من الأفتح (50) إلى الأغمق (950):
<div class="bg-purple-100">فاتح جدًّا</div>
<div class="bg-purple-500">متوسّط</div>
<div class="bg-purple-900">غامق</div>
الشفافية
<div class="bg-black/50">شفافية 50%</div>
<p class="text-white/70">نصّ بشفافية 70%</p>
ألوان جاهزة
slate، gray، red، orange، yellow، green، blue، purple، pink والمزيد.
مثال
<button class="bg-green-500 text-white hover:bg-green-600">
زر أخضر
</button>
💡 أضاف Tailwind أربع عائلات محايدة جديدة (
mauve،olive،mist،taupe) في إصدار v4.2 — تعمل بنفس نظام الدرجات 50-950.
🎯 التالي: المسافات (Spacing).