واحدة من أكثر المخاوف التي تتعلق بالتصميم شيوعًا في أي مشروع تتمثل في إدارة التباعد ، وهنا تلعب دور الحشوة في Tailwind. يوفر Tailwind مجموعة من فئات الأداة المساعدة خصيصًا للحشو ، مما يمنح المطورين المرونة للتحكم في التباعد دون متاعب في كتابة CSS المخصصة. في هذا الدليل ، سوف نتعمق في كيفية عمل حشوة Windwind ، واستكشاف الخيارات المتاحة ، وإظهار كيفية تطبيقها على مشاريع العالم الحقيقي.

الاستخدام الأساسي

عند العمل مع حشوة Tailwind ، من المهم معرفة كيفية تطبيق الحشو على أجزاء مختلفة من عنصر. يقوم Tailwind بتبسيط هذا من خلال تقديم فئات فصول مباشرة لجوانب مختلفة أو محاور أو جميع جوانب عنصر ما. فيما يلي انهيار سريع لحالات استخدام الحشو الأساسية:

إضافة حشوة إلى جانب واحد

يمكنك استخدام أدوات Tailwind مثل Pt-*، Pr-*، pb-*، و pl-*لتطبيق الحشو بسهولة على جوانب معينة من عنصر.

شفرة:

pt-6
pr-4
pb-8
pl-2

على سبيل المثال:

• يضيف PT-6 1.5 من الحشو إلى الأعلى.
• يضيف PR-4 1rem من الحشو إلى اليمين.
• PB-8 يضيف 2Rem من الحشو إلى أسفل.
• يضيف PL-2 0.5 من الحشو إلى اليسار.

تمنحك هذه الفئات البسيطة تحكمًا كاملاً في التباعد على الجوانب الفردية لعناصرك ، مما يتيح إجراء تعديلات أكثر دقة للتصميم.

إضافة الحشو الأفقي

لإضافة حشوة أفقية إلى عنصر ما ، يوفر Wairwind فئة الأداة المساعدة PX-* ، والتي تطبق حشوة متساوية على كل من الجانبين الأيسر والأيمن للعنصر.

شفرة:

px-8

على سبيل المثال:

• يضيف PX-4 1 من الحشو إلى كل من الجانبين الأيسر واليمين.
• PX-6 يضيف 1.5REM إلى كلا الجانبين.

هذا يساعدك على الحفاظ على تباعد أفقي ثابت عبر تصميمك ، مما يجعله مثاليًا للعناصر التي تتطلب حشوة متوازنة على كل من
اليسار واليمين ، مثل الأزرار أو أشرطة التنقل.

مضيفا الحشوة الرأسية

للتحكم في الحشو الرأسي في Wairwind ، يمكنك استخدام فئة الأداة المساعدة PY-* ، والتي تضيف حشوة متساوية إلى كل من العنصر العلوي.

شفرة:

py-8
 

على سبيل المثال:

• يضيف PY-4 1 من الحشو إلى الأعلى والسفلي.
• يضيف PY-8 2REM من الحشو العمودي.

باستخدام PY-* مثالي لإدارة التباعد الرأسي ، خاصة في عناصر مثل الحاويات أو الأقسام التي تعزز فيها الحشو المتوازن العلوي والسفلي قابلية القراءة وهيكل التخطيط.

إضافة حشوة إلى جميع الجوانب

لإضافة حشوة متساوية على جميع جوانب عنصر ما ، يوفر Tailwind فئة الأداة المساعدة P-* ، والتي تطبق نفس كمية الحشو على الأعلى واليمين والأسفل واليسرى.

شفرة:

p-8

على سبيل المثال:

• P-4 يضيف 1REM من الحشو إلى جميع الجوانب الأربعة.
• P-8 ينطبق 2REM من الحشو بشكل موحد عبر العنصر.

هذه الأداة المساعدة رائعة لإنشاء عناصر متباعدة بالتساوي ، مما يضمن حشوة ثابتة حول المحتوى دون تحديد كل جانب يدويًا.

باستخدام الخصائص المنطقية

يوفر Tailwind أيضًا مرافق PS-* و PE-* للتحكم في الحشو المنطقي ، والتي تتكيف بناءً على اتجاه النص. تعدل هذه الخصائص المنطقية حشوة البدء والنهاية بناءً على ما إذا كان المحتوى يتدفق من اليسار إلى اليمين (LTR) أو اليمين إلى اليسار (RTL).

شفرة:

  
ps-8
 
  
pe-8



  
ps-8
 
  
pe-8

على سبيل المثال:

• يضيف PS-4 1 من الحشو إلى بداية العنصر ، والذي سيكون الجانب الأيسر في LTR والجانب الأيمن في RTL.
• يضيف PE-6 1.5 من الحشو إلى نهاية العنصر ، ورسم الخرائط إلى اليمين في LTR واليسرى في RTL.

استخدام الخصائص المنطقية مفيد بشكل خاص للمشاريع التي تدعم لغات متعددة أو تتطلب تعديلات تخطيط ديناميكية.

تطبيق مشروط

يتيح لك حشوة Tailwind تطبيق فئات الأداة المساعدة بشكل مشروط باستخدام المعدلات المتغيرة. هذا مفيد للغاية عندما تحتاج إلى تعديل الأنماط بناءً على تفاعل المستخدم (مثل التحوم أو التركيز) أو تطبيق الأنماط اعتمادًا على أحجام الشاشة واستعلامات الوسائط.

تحوم وتركيز ودول أخرى

يمكنك استخدام المعدلات المتغيرة لتطبيق الحشو (أو غيرها من المرافق) فقط عندما تكون بعض حالات مثل التحوم أو التركيز نشطة. على سبيل المثال ، يحوم: PY-8 سوف يطبق حشوة رأسية 2REM عندما يتم تحوم العنصر.

شفرة:

  Hover over me to see the vertical padding increase!

في هذا المثال ، سيكون للعنصر حشوة قاعدة من 1REM ، ولكن عندما تحوم فوقه ، يزداد الحشو العمودي إلى 2Rem.

نقاط التوقف والاستعلامات الإعلامية

يدعم Tailwind أيضًا المعدلات المتغيرة لأحجام الشاشة المختلفة باستخدام نقاط التوقف المستجيبة مثل MD ، LG ، XL ، إلخ. على سبيل المثال ، سوف يطبق MD: PY-8 حشوة رأسية من 2 على شاشات متوسطة الحجم وما فوق.

شفرة:

  Resize your browser to see the padding change at medium screen sizes.

في هذا المثال ، سيكون للعنصر حشوة افتراضية ، ولكن عندما يصل حجم الشاشة إلى نقطة التوقف المتوسطة (768px وما فوق) ، سيتغير الحشو العمودي إلى 2Rem.

باستخدام القيم المخصصة في Tailwind

يوفر حشوة Tailwind طريقة مرنة لتخصيص الحشو من خلال السماح لك بتعديل مقياس التباعد الافتراضي أو تطبيق قيم لمرة واحدة ، تعسفية. هذه الميزة مفيدة بشكل لا يصدق عندما تحتاج إلى حشوة محددة تتجاوز المقياس الافتراضي.

تخصيص موضوعك

افتراضيًا ، يتبع مقياس حشوة Tailwind نظام التباعد الافتراضي ، ولكن يمكنك بسهولة تعديله عن طريق تحرير ملف tailwind.config.js. لديك طريقتان للقيام بذلك: إما عن طريق ضبط مقياس التباعد العام أو التركيز فقط على الحشو على وجه التحديد.

مثال: تخصيص مقياس التباعد: في ملف tailwind.config.js ، يمكنك تمديد مقياس التباعد لتضمين القيم المخصصة ، مثل حشوة 5px.

module.exports = { سمة: { يمتد: { التباعد: { '5px': '5px' ، } } } }

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

بهذا ، يمكنك استخدام قيمة التباعد المخصصة عبر الحشو والهامش وغيرها من مرافق التباعد:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

بدلاً من ذلك ، يمكنك تمديد مقياس الحشوة فقط:

module.exports = { سمة: { يمتد: { الحشو: { '5px': '5px' ، } } } }

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

هذه الطريقة تبقي التخصيصات معزولة عن الحشو دون تغيير مقياس التباعد الأوسع.

القيم التعسفية

إذا كنت بحاجة إلى قيمة حشوة فريدة لا تتناسب مع المقياس المحدد أو الممتد ، يتيح لك Tailwind تطبيق القيم التعسفية باستخدام قوسين مربعة. يتيح لك هذا إضافة قيم حشوة مخصصة لمرة واحدة دون تعديل ملف tailwind.config.js.

مثال: قيمة الحشوة التعسفية

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

باستخدام هذا النهج ، يمكنك إنشاء أي خاصية CSS أثناء الطيران من خلال تحديد القيمة داخل قوسين مربعة. هذا مفيد بشكل خاص عندما تحتاج إلى تباعد مخصص لا يضمن تغييرًا دائم في تكوين السمة الخاص بك.

خاتمة

يبسط حشوة Tailwind التباعد مع أدوات مثل Pt-* ، Pr-* ، Pb-* ، و Pl-* لجوانب محددة ، و Px-* و Py-* للواحد الأفقي والعمودي. تطبق الأداة المساعدة p-* حشوة متساوية على جميع الجوانب. الخصائص المنطقية (ps-*، pe-*) اضبط الحشوة بناءً على اتجاه النص ، وهي مثالية للتخطيطات متعددة اللغات.

يمكنك تطبيق الحشو بشكل مشروط باستخدام حالات Hover (Hover: PY-8) أو نقاط التوقف المستجيبة (MD: PY-8). يتيح Tailwind أيضًا قيم حشوة مخصصة في tailwind.config.js أو قيم تعسفية مثل p- [5px].

توفر هذه الأدوات المساعدة طريقة مرنة وفعالة لإدارة الحشو في أي مشروع. لمزيد من التفاصيل ، تفضل بزيارة وثائق CSS الرسمية.