يوفر Tailwind CSS ' واضح 'الأدوات المساعدة التي تتحكم في سلوك عنصر معين عندما يكون بجوار أي عنصر عائم. على سبيل المثال ، تمكّن فئات الأدوات المساعدة 'clear-left' و 'clear-right' المطورين من جعل العناصر المحددة تتحرك أسفل أي عناصر عائمة لليسار أو لليمين في الحاوية. ومع ذلك ، في بعض الأحيان ، يرغب المستخدمون في تعطيل أي مسح مطبق على عناصر معينة والسماح لهم بالظهور بجوار العناصر العائمة. في مثل هذه الظروف ، يمكن استخدام الأداة المساعدة 'clear-none' لتحديد القيمة الافتراضية للعنصر.
ستوضح هذه المقالة الإجراء الخاص بتعطيل جميع عمليات المسح المطبقة في Tailwind CSS.
كيف يتم تعطيل كل عمليات التصفية التطبيقية في Tailwind؟
لتعطيل جميع عمليات المسح المطبقة في Tailwind ، أنشئ ملف HTML وأضف ' لا شيء واضح 'فئة الأداة المساعدة مع العنصر المطلوب في برنامج HTML. تعيد هذه الأداة المساعدة تعيين أي 'مسح' يتم تطبيقه على عنصر معين وتحدد القيمة الافتراضية.
بناء الجملة
< عنصر فصل = 'لا شيء واضح' > ... عنصر >
مثال
في هذا المثال ، سنستخدم ' لا شيء واضح 'مع' 'لإعادة تعيين عمليات المسح المطبقة والسماح لها بالطفو على الجانبين الأيمن والأيسر:
< جسم >
< شعبة فصل = 'h-96 mx-10 p-8 bg-sky-500' >
< IMG src = 'tailwindcss_img.png' فصل = 'تعويم اليسار p-3 w-28 h-24' كل شئ = 'صورة' />
< IMG src = 'tailwindcss_img.png' فصل = 'تعويم يمين p-3' كل شئ = 'صورة' />
< ص فصل = 'لا شيء واضح' > يوفر Tailwind CSS ملفات 'واضح' أدوات للتحكم في التفاف المحتوى حول عنصر.
سيوضح هذا المثال كيفية تعطيل جميع عمليات المسح المطبقة على العناصر. لإعادة تعيين أي تطبيق يتم مسحه إلى عنصر معين ، فإن ملف 'لا شيء واضح' يتم استخدام المنفعة. ص >
شعبة >
جسم >
هنا:
- ' تعويم: اليسار 'class يطفو عنصر
إلى الجانب الأيسر من الحاوية.
- ' تعويم اليمين 'class يطفو عنصر
في الجانب الأيمن للحاوية.
- ' لا شيء واضح 'class تعطل أي مسح مطبق على العنصر
وتسمح للعنصر بالطفو على كلا الجانبين.
انتاج |
في صفحة الويب أعلاه ، يمكن ملاحظة أن المحتوى يتحرك على جانبي الحاوية. يشير هذا إلى أنه تم تعطيل جميع عمليات المسح المطبقة من العنصر المحدد.
خاتمة
لتعطيل جميع عمليات المسح المطبقة في Tailwind ، استخدم ' لا شيء واضح 'فئة الأداة المساعدة مع العنصر المطلوب في برنامج HTML. تعيد هذه الأداة المساعدة تعيين أي مسح يتم تطبيقه على عنصر معين وتحدد القيمة الافتراضية. للتحقق ، انتقل إلى صفحة الويب واعرض التغييرات. لقد أوضحت هذه المقالة مثالاً لتعطيل جميع عمليات المسح المطبقة في Tailwind CSS.