Tailwind فريم ورك حديث وقوي لـ CSS. في حال أنک لم تستخدمه حتى الآن، أقترح عليك استخدامه في مشروعك الآتي.

بداية الأفضل أنک کونک مبتدئ تستخدم CSS خالصا من دون فريم ورك، لكن بعد ما تعلمت الـ  CSS الأفضل أن تستخدم فريم وركات مختلفة للسهولة بتطوير تصاميمك.

أحد الفريم وركات التي نستخدمها لهذا الهدف، Tailwind وسنتحدث حول مواصفاتها وإمكانياتها الرائعة.

عادة يقارنون Tailwind بـ  BootStrapعلى الرغم من اختلافهما الأساسي. لكن المواصفة المهمة لـ Tailwind ، إمكانية بناء تصميم/ ديزاين جديد بأقصر وقت، على عكس الفريم وركات الأخرى التي تعطينا فقط تصاميم مبنية و كاملة.

للمزيد اقرأ: (Cascading Style Sheets (CSS

 لكن ما هي أهم المزايا لاستخدام Tailwind CSS  التي قررنا التحدث عنها:

أهم مزايا إستخدام Tailwind CSS

1.CSS المتقدمة

إذا جرّبت إنشاء بعض التصاميم أو الميزات بالـ CSS، فبالتأكيد تعرف أن عليک تدوين عدة سطور على أقل تقدير لتصل إلى تصميم بسيط.

لكن فريم ورك Tailwind  يوفر لنا إمكانيات متقدمة من الـ CSS التي بإمكانك كتابتها بأبسط حالة ممكنة باستخدام فئات جاهزة.

مثلا:
في قسم الأنيميشن من هذا الفريم ورك، لدينا إمكانيات كثيرة؛ على سبيل المثال ممكن نصمم Spin أو دوّار، بكود بسيط. ويستخدم هذا الدوّار للمتصفح ومؤشر التحميل أو أي مكان آخر نحتاجه مثل الصورة التي تشاهدها الآن.

هذا الكود البسيط يكفي لنصمم هذا الـ Spin.

ومثلها نتمکن من تصميم أنيميشنات مختلفة، مثل مؤشر الـ Ping أو الـ Bounce.

أيضا يوجد كلس ترنسفورم في هذا الفريم ورك. هنا لدينا إمكانيات مختلفة، مثلscale, rotate, translate, matrix وإمكانيات أخرى. في الـ Tailwind يمکننا استخدام هذه الإمكانيات كفئة جاهزة.

لدينا تدرج لوني في التيلويند.

يمکننا تحديد أن يبدأ هذا التدرج من أي لون وينتهي بأي لون.

بهذه السهولة! دعونا نشاهد كم مثال:

هنا، کما تشاهد الكود، لدينا كلس:

bg-gradient-to-r

to right

أي أن التدرج يحدث من اليسار إلى اليمين أو بإمکانک أن تكتب عكسها، أي من اليمين إلى اليسار.

from-green-400 to-blue-500

فيبدأ تدرجنا اللوني من لون الأخضر بالدرجة المحددة وينتهي باللون الأزرق کما تشاهد.

لكن روائع الـ tailwind لا تنتهي هنا.

للتردج اللوني، إمكانية اختيار لون وسط أيضا. على سبيل المثال للتدرج الذي تشاهده الآن، نكتب هذا الكود:

bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 ...

2. فئات لحالات خاصة

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

يكفي تكتب dark : و بعدها تكتب الميزة التي تريدها.

بهذا الشكل، كل ما المستخدم ینشط وضع الدارك مود، يتم تنشيط هذاي الفيچرز الذي كتبناها للدارك.

لدينا حالات مختلفة بالـ tailwind التي يمکننا استخدامها، فدعنا نتکلم عن الـ hover و الـ focus مثلا.

لكتابة الـ hover باللغات أو الفريم وركات الأخرى -کما قلنا سابقا- نحتاج إلى كتابة كود على الأحرى لعدة سطور. لكن يمکننا باستخدام هذا الفريم ورك أن نصممه بكود بسيط.

على سبيل المثال شاهد هذه الصورة:

كتبنا اللون الأساسي فقط، hover، وبعده اللون الذي نريد عرضه بحالة الـ hover. أو أي ميزة أخرى مثل border، text color وغيرها.

أو للـ focus بهذا الشكل أيضا.

لكن الميزة الأخرى من هذا الفريم ورك الذي سنتلكم عنها هي:

3. أقل حجم ممكن

الميزة الأساسية لهذا الفريم ورك، إمكانية خفض الحجم باستخدام tailwind. فيمكن لأداة PurgeCSS التقليل من حجم الملف لحد كبير. لكن کيف يتم تقليل الحجم؟ نعم! PurgeCSS يزيل الفئات التي لم نستخدمها. فمن الأفضل أننستخدم هذه الأداة. أيضا یزداد حجم ملف الـ CSS بازدياد حجم الموقع. لكن باستخدام Tailwind يبقى حجم الملف قليلا. باستخدام هذا الفريم ورك، يمکن أن نكتب الكود بسهولة وبوقت أقصر بالنسبة للطريقة العادية.

4. إمكانية بناء تخطيطات Responsive بِحرية

باستخدام فريم ورك Tailwind CSS بإمكانك تبني تصاميم Responsive في الـ HTML.

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

الخاتمة

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

أقترح عليك قراءة المزيد من المعلومات حول Tailwind CSS على موقع Tailwind الرسمي.

سنتكلم بالمقاطع الآتية حول الفريم وركات والتكنولوجيات الأخرى للبرمجة. تابعونا على منصة كرسي.

للمزيد شاهد: أفضل فریم وركات

Related video
phaser game engine
05:22 Minutes

فريم ورك Phaser

فردوس مزرعاوي

يستخدم فيزر Canvas أو WebGL Render بدون ما نحتاج إلی أي مكتبة خارجية. ویستطیع ینتقل بينهن تلقائيًا بناءً على دعم المتصفح. هذا الإمکان يسمح بالعرض السريع عن طریق الدسکتاپ أو الجوال.

Golang vs Python
Minutes

مقارنة لغة البرمجة GO مع Python

فردوس مزرعاوي

عندما كانت لغة go في طريقها نحو التطور، اختارت گوگل أهم مكتابتها كمكتبات داخلية للغة go. لكن هذه المكتبات أقل عددا بالنسبة لپايثون. لأنها حديثة. أما، بايثون مشهورة أكثر ولها مجتمع أكبر.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة