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

تشرح هذه المقالة طريقة استخدام قيم عشوائية في Tailwind CSS.

كيفية الاستفادة من القيم التعسفية في Tailwind؟

القيم التعسفية هي القيم المخصصة التي يمكن كتابتها مباشرةً في سمة فئة HTML دون تحديدها في ملف تكوين Tailwind. وتكون مسبوقة بتدوين قوس مربع ، مثل [24 بكسل] ، [2.5 ريم] ، وما إلى ذلك لاستخدام القيم التعسفية في Tailwind ، استخدم تدوين قوس مربع وحدد أي قيمة مخصصة لإنشاء فئات الأدوات بشكل ديناميكي.

تحقق من الخطوات المذكورة أدناه لفهم أفضل:

الخطوة 1: استخدم القيم التعسفية في برنامج HTML

قم بإنشاء برنامج HTML واستخدم تدوين الأقواس المربعة مع أي قيمة مخصصة لإنشاء الفئات المطلوبة. على سبيل المثال ، استخدمنا ملف 'bg - [# e9e516]' ، 'w- [600px]' ، 'h- [400px]' ، 'p- [13px]' ، وفئات أخرى:

هنا:

• “bg-[#e9e516]” فئة تعيّن لون خلفية
  إلى “#e9e516” (أصفر).
• 'w- [600 بكسل]' فئة تعين عرض
  إلى 600 بكسل.
• 'h- [400 بكسل]' تطبق class ارتفاع 400 بكسل على عنصر
  .
• 'p- [13 بكسل]' تعيّن فئة المساحة المتروكة لـ
  إلى 13 بكسل.
• 'م- [19 بكسل]' تحدد الفئة هامش
  إلى 19 بكسل.

• 'text- [30px]' تحدد الفئة حجم خط عنصر

  إلى 30 بكسل.

• 'text - [# 7405ab]' تعيين فئة لون نص العنصر

  إلى اللون الأرجواني (# 7405ab).

• 'تتبع- [0.5 ريم]' يطبق class تباعد الأحرف على 0.5 rem على عنصر

  .

الخطوة 2: تحقق من الإخراج

للتأكد من أن القيم العشوائية تعمل بشكل صحيح ، قم بعرض صفحة ويب HTML:

يشير الإخراج أعلاه إلى أن القيم العشوائية تعمل بشكل صحيح كما تم تعريفها.

خاتمة

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