الـ Spacing (Margin – Padding) في Tailwind CSS

لما تيجي تبني UI نضيف ومرتب، أهم حاجة المسافات (Spacing)… سواء مسافات داخلية (Padding) أو خارجية (Margin).
Tailwind بيخلي الموضوع ده سهل جدًا وسريع من غير ما تكتب ولا Rule واحدة في CSS.

🟢 أولاً: الـ Padding (المسافة الداخلية)

في Tailwind بنستخدم الكلاس p-{size}.

ده معناه Padding = 1rem من كل الاتجاهات.

ممكن تخصص اتجاهات:

• pt-4 = padding-top

• pb-4 = padding-bottom

• pl-4 = padding-left

• pr-4 = padding-right

• px-4 = padding-left + padding-right

• py-4 = padding-top + padding-bottom

🔵 ثانياً: الـ Margin (المسافة الخارجية)

الكلاس m-{size}.

ده معناه Margin = 1rem حوالين الـ div.

نفس الحكاية مع الاتجاهات:

• mt-4 = margin-top
• mb-4 = margin-bottom
• ml-4 = margin-left
• mr-4 = margin-right
• mx-4 = margin-left + margin-right
• my-4 = margin-top + margin-bottom

🔴 القيم (Sizes)

• 0 = 0px
• 1 = 0.25rem (4px)
• 2 = 0.5rem (8px)
• 3 = 0.75rem (12px)
• 4 = 1rem (16px)
• 5 = 1.25rem (20px)
• … إلخ

يعني بدل ما تكتب margin: 16px;، تكتب m-4.
وده بيخلي الكود ثابت ومنظم وسهل جدًا.