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

تمتلك هذه الفئات إمكانات هائلة لتبسيط سير عمل التطوير، وتعزيز جماليات واجهات الويب، وزيادة الإنتاجية.

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

فئة الحاوية

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

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

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

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

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

فيما يلي مثال يوضح فئة الحاوية:

  
Container Class
  

    This is a demonstration of the container class in Tailwind CSS. The
    container is centered and scales its size based on the viewport size.
  
  

    
      Click Me
    
  

عندما تتحقق من النتيجة في متصفحك، يجب أن يكون لديك شيء مثل هذا:

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

فائدة الحجم

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

توفر الأداة المساعدة للحجم مجموعة متنوعة من الخيارات، بما في ذلك أحجام البكسل الثابتة مثل size-48 لحجم بكسل محدد، والأحجام المحددة مسبقًا من إعداد Tailwind، مثل size-2، الذي يطبق العرض والارتفاع بناءً على المقياس المحددة في تكوين Tailwind الخاص بك.

إليك كيفية استخدام الأداة المساعدة للحجم:

  

    

      
Size 48
    
    

      
Size 64
    
    

      
Size 80
    
  

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

عندما تتحقق من النتيجة في متصفحك، يجب أن يكون لديك شيء مثل هذا:

فائدة الفضاء

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

يوفر Tailwind فئتين أساسيتين لإدارة المساحة: space-x للتباعد الأفقي وspace-y للتباعد الرأسي. يمكن تطبيق هذه الفئات على عنصر الحاوية لتطبيق التباعد تلقائيًا بين عناصره الفرعية المباشرة.

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

في ما يلي مثال على كيفية استخدام أداة المساحة لإضافة مسافات أفقية بين الأزرار داخل الحاوية المرنة:

  

    

      

        
Card 1 Title
        

          Card 1 description or additional information.
        
      
    
    

      

        
Card 2 Title
        

          Card 2 description or additional information.
        
      
    
    

      

        
Card 3 Title
        

          Card 3 description or additional information.
        
      
    
  

في الكود أعلاه، تطبق الأداة المساعدة space-y-4 تباعدًا رأسيًا بين العناصر الفرعية لكل بطاقة، وبالتالي إنشاء عناصر تباعد متسقة داخل كل بطاقة.

عندما تتحقق من النتيجة في متصفحك، يجب أن يكون لديك شيء مثل هذا:

فائدة خط المشبك

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

في ما يلي مثال على بطاقة تستخدم الأداة المساعدة line-clamp للتحكم في النص:

  
  

    
Card Title
    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor
      et velit aliquam efficitur. Sed velit nisi, lacinia eu nisl id, lacinia
      lacinia nisl.
    
  
  

    #tag1
    #tag2
  

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

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

عندما تتحقق من النتيجة في متصفحك، يجب أن يكون لديك شيء مثل هذا:

فائدة الدائري

يتم استخدام الأداة المساعدة الحلقية لتطبيق حد حول عنصر ما. كما يوفر أيضًا طريقة لإضافة ظلال المخطط التفصيلي أو حلقات التركيز إلى العناصر. يعد هذا بديلاً جيدًا لفئات Shadow-outline وshadow-xs الأقدم، مما يسمح بحالات تركيز أكثر قابلية للتخصيص. 

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

فيما يلي مثال لكيفية استخدام الأداة المساعدة للحلقة:

  

    
      Button 1
    
    
      Button 2
    
    
      Button 3
    
  

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

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

يسمح هذا الأسلوب بتصميمات تفاعلية ويمكن الوصول إليها من خلال تقديم تعليقات مرئية للمستخدمين عند تفاعلهم مع الأزرار.

عندما تتحقق من النتيجة في متصفحك، يجب أن يكون لديك شيء مثل هذا:

اقتطاع الأداة المساعدة

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

يضمن ذلك عدم خروج النص من المنطقة المخصصة له، والحفاظ على مظهر نظيف واحترافي. إنه يوفر الوقت عن طريق منع مشكلات التخطيط الناتجة عن فائض النص.

يوجد أدناه مثال يوضح كيفية استخدام الأداة المساعدة للاقتطاع:

  
Card Title
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc
    at cursus pellentesque, nisl eros pellentesque quam, a faucibus nisl nunc id
    nisl.
  

يتم تطبيق فئة الاقتطاع على العلامة

لاقتطاع النص بعلامة القطع إذا تجاوزت الحاوية الخاصة به.

عندما تتحقق من النتيجة في متصفحك، يجب أن يكون لديك شيء مثل هذا:

وهذا ختام!

خاتمة

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

يمكن أن يساعدك فهم فئات الأدوات المساعدة هذه في التركيز بشكل أكبر على إنشاء تصميمات فريدة وعملية بدلاً من قضاء وقت زائد في مهام ترميز CSS المتكررة.