من تباعد CSS إلى Tailwind

padding: 1.5rem يصبح p-6. الاختصارات تتوسع لأدوات الجوانب. خارج المقياس: p-[13px].

غالبًا ما يكون التباعد أول ما يُنقل من ملف الأنماط إلى Tailwind. سترى هنا كيف يقابل padding: 1.5rem الأداة p-6، وكيف تتوزع الاختصارات على أدوات منفصلة لكل جهة. أما القيم الخارجة عن المقياس فتظهر بصيغة p-[13px]، وهي مواضع تستحق مراجعة بصرية قبل الاعتماد عليها.

المقياس مقابل rem الحر

1.5rem غالبًا p-6. 13px خارج المقياس يطلب p-[13px] أو إعادة تصميم إلى رمز. لا تقرّب عمياء.

اختصار يتوسع

margin: 1rem 2rem قد يصبح my-4 mx-8. راجع كل جانب قبل PR.

تباعد التخطيط

gap-* في flex/grid يتجنب هوامش يتيمة بين الأبناء.

جرّب

فتح المحوّل

.example { display: flex; gap: 1rem; padding: 1rem; }

ملاحظة ثقة: تحقق بصريًا من النتيجة. المحوّل مسودة مساعدة للمطوّرين.