المسافات (Spacing)
<div class="p-4">حشو من كل الجهات</div>
<div class="px-6 py-2">حشو أفقي وعمودي</div>
<div class="m-4">هامش</div>
<div class="mt-8">هامش علوي</div>
المقياس: 1 = 4px، فـ p-4 = 16px.
الألوان
<div class="bg-blue-500 text-white">خلفية زرقاء ونص أبيض</div>
<p class="text-red-600">نص أحمر</p>
الصيغة: {property}-{color}-{shade} والدرجات من 50 إلى 950.
النصوص
<p class="text-lg font-bold text-center">نص كبير وعريض ومتوسّط</p>
<p class="text-sm text-gray-500">نص صغير رمادي</p>
| الفئة | الوظيفة |
|---|---|
text-sm/lg/xl | حجم الخط |
font-bold | سماكة |
text-center | محاذاة |
الحدود والزوايا
<div class="border border-gray-300 rounded-lg">حدّ وزوايا دائرية</div>
<div class="rounded-full">دائري بالكامل</div>
<div class="shadow-lg">ظلّ</div>
الأبعاد
<div class="w-64 h-32">عرض وارتفاع محدّدان</div>
<div class="w-full">عرض كامل</div>
🎯 التالي: التخطيط والتصميم المتجاوب.