Tailwind CSS فراہم کرتا ہے ' مارجن یوٹیلیٹی کلاسز جو صارفین کو عناصر کے ارد گرد وقفہ کاری کو کنٹرول کرنے کے قابل بناتی ہیں۔ دی افقی مارجن ایک عنصر کے بائیں اور دائیں جانب جگہ کا اضافہ کرتا ہے، جبکہ a عمودی مارجن ایک عنصر کے اوپر اور نیچے جگہ شامل کرتا ہے۔ Tailwind مطلوبہ عناصر میں افقی یا عمودی مارجن شامل کرنے کے لیے مختلف یوٹیلیٹی کلاسز پیش کرتا ہے۔
یہ مضمون مثال دے گا:
Tailwind میں افقی مارجن کیسے شامل کریں؟
Tailwind میں ایک عنصر میں افقی مارجن شامل کرنے کے لیے، ' mx-
نحو
< عنصر کلاس = 'mx-
یہاں، 'mx' 'x-axis' یا 'افقی مارجن' کی نمائندگی کرتا ہے۔ اس بات کو یقینی بنائیں کہ '
مثال: ایچ ٹی ایم ایل عنصر پر افقی مارجن لگانا
اس مثال میں، ہم استعمال کریں گے ' mx-10 'یوٹیلٹی کلاس' کے ساتھ Tailwind میں کسی عنصر میں عمودی مارجن شامل کرنے کے لیے، ' my- نحو مثال: HTML عنصر پر عمودی مارجن کا اطلاق کرنا اس مثال میں، ہم استعمال کریں گے ' my-10 'یوٹیلٹی کلاس' کے ساتھ Tailwind میں افقی اور عمودی مارجن کو شامل کرنے کے لیے، ' mx-
< جسم >
< div کلاس = 'h-screen mx-10 bg-purple-500' >
< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >
div >
جسم >
آؤٹ پٹ 
مندرجہ بالا آؤٹ پٹ کنٹینر کے بائیں اور دائیں جانب مارجن کو دکھاتا ہے۔ اس سے ظاہر ہوتا ہے کہ افقی مارجن کنٹینر عنصر پر کامیابی سے لاگو ہو گیا ہے۔ Tailwind میں عمودی مارجن کیسے شامل کریں؟
یہاں، 'میرا' 'y-axis' یا 'عمودی مارجن' کی نمائندگی کرتا ہے۔ اس بات کو یقینی بنائیں کہ '
< div کلاس = 'h-96 my-10 bg-purple-500' >
< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >
div >
جسم >
آؤٹ پٹ 
مندرجہ بالا آؤٹ پٹ کنٹینر کے اوپر اور نیچے کی طرف مارجن کو دکھاتا ہے۔ اس سے ظاہر ہوتا ہے کہ کنٹینر عنصر پر عمودی مارجن کو مؤثر طریقے سے لاگو کیا گیا ہے۔ نتیجہ