تخطَّ إلى المحتوى

🌬️ شرح Tailwind CSS

القيم الاعتباطية

الدرس 23 من 25· ⏱ 1 دقائق قراءة

ما هي؟

عندما لا تكفي القيم الجاهزة، استخدم قيمة دقيقة بين [ ]:

<div class="w-[347px]">عرض دقيق</div>
<div class="top-[117px]">موضع محدّد</div>
<p class="text-[15px]">حجم خطّ مخصّص</p>
<div class="bg-[#1da1f2]">لون مخصّص (تويتر)</div>

أمثلة متنوّعة

<div class="grid grid-cols-[200px_1fr_100px]">شبكة بأعمدة مخصّصة</div>
<div class="rotate-[17deg]">دوران دقيق</div>
<div class="bg-[url('/hero.jpg')]">صورة خلفية</div>

خصائص اعتباطية كاملة

<div class="[mask-type:luminance]">خاصّية غير مدعومة مباشرة</div>

متى تستخدمها؟

  • عند قيمة محدّدة لا تتكرّر (هامش دقيق، لون علامة تجارية).
  • للحالات النادرة فقط — فضّل قيم الثيم للاتّساق.

💡 محرّك JIT في Tailwind يولّد هذه الأصناف عند الطلب، فلا تكلفة على الحجم.

🎯 التالي: أفضل الممارسات.

هل كان هذا الدرس مفيدًا؟