يعد Tailwind CSS إطار عمل معروف جيدًا يتم استخدامه لإنشاء صفحات أو تصميمات ويب قابلة للتخصيص وسريعة الاستجابة. كما يسمح للمستخدمين بالتحكم في التخطيط والتباعد بين العناصر دون كتابة أي CSS مخصص. المساحة المتروكة هي المسافة بين محتوى عنصر معين وحدوده. في بعض الأحيان ، يرغب المستخدمون في تطبيق نفس القدر من المساحة المتروكة على كل جانب من جوانب العنصر. توفر Tailwind فئات أدوات مساعدة لتطبيق الحشو على كل جوانب العنصر ، أو على جوانب معينة ، مثل أعلى أو يمين أو أسفل أو يسار.
ستوضح هذه المقالة طريقة إضافة المساحة المتروكة لجميع جوانب العنصر في Tailwind.
كيف تضيف حشوة إلى كل الجوانب في Tailwind؟
لإضافة مساحة متروكة لجميع جوانب عنصر معين في Tailwind ، أنشئ بنية HTML. ثم استخدم فئة الأداة المساعدة 'p-
بناء الجملة
< عنصر فصل = 'p- <قيمة>' ... عنصر >
استبدل '<القيمة>' بأي رقم تريده ، مثل 2 ، 4 ، 12 ، 20 ، إلخ.
مثال
في هذا المثال ، لدينا ' في الثاني انتاج | لإضافة حشوة إلى جميع جوانب عنصر ما في Tailwind ، يتم استخدام فئة الأداة المساعدة 'p-
< جسم >
< شعبة فصل = 'bg-pink-600 p-8 w-max' >
حشوة في Tailwind CSS
شعبة >
< ر >
< شعبة فصل = 'bg-teal-600 p-14 w-max' >
حشوة في Tailwind CSS
شعبة >
جسم >
هنا ، في الأول
وفقًا للإخراج أعلاه ، تم تطبيق الحشوة المحددة على جميع جوانب كلتا الحاوية. خاتمة