من CSS Flexbox إلى Tailwind
display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
تنتقل حاويات Flexbox إلى Tailwind بشكل شبه مباشر: display:flex يصبح flex، وflex-direction:column يصبح flex-col، وjustify-content:space-between يصبح justify-between. الفارق العملي في المسافات، إذ يغني gap-4 على الحاوية عن توزيع الهوامش على كل عنصر. أما المحاذاة غير المعتادة فتحتاج نظرة إضافية عند المراجعة.
العرض والاتجاه
display:flex → flex؛ flex-direction:column → flex-col. ابدأ بالحاوية ثم الأبناء.
المحاذاة
justify-content:center → justify-center؛ align-items:center → items-center. أسماء قصيرة ونفس الفكرة.
gap مقابل الهوامش
فضّل gap-4 على الحاوية بدل margin على كل ابن عندما يكون التباعد منتظمًا.
جرّب
.example { display: flex; gap: 1rem; padding: 1rem; }ملاحظة ثقة: تحقق بصريًا من النتيجة. المحوّل مسودة مساعدة للمطوّرين.