Tailwind CSS: إطار عمل CSS وواجهة برمجة تطبيقات أول منفعة للتصميم السريع والاستجابة

إطار عمل Tailwind CSS

بينما أتعمق في التكنولوجيا على أساس يومي ، لا أحصل على الكثير من الوقت كما أرغب في مشاركة عمليات التكامل والأتمتة المعقدة التي تنفذها شركتي للعملاء. كذلك ، ليس لدي الكثير من وقت الاكتشاف. معظم التكنولوجيا التي أكتب عنها هي شركات تبحث عنها Martech Zone تغطيتها ، ولكن بين الحين والآخر - خاصة عبر Twitter - أرى بعض الضجة حول تقنية جديدة أحتاج إلى مشاركتها.

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

أطر المغلق

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

  • التمهيد - إطار عمل تم تطويره على مدار عقد من الزمان ، تم تقديمه لأول مرة بواسطة Twitter. يقدم ميزات لا حصر لها. إنه يحتوي على جوانب سلبية ، يتطلب SASS ، ويصعب تجاوزه ، ويعتمد على JQquery ، وهو ضخم جدًا للتحميل.
  • [بولما] - إطار عمل نظيف صديق للمطورين ولا يعتمد على JavaScript.
  • كريم أساس - إطار عمل CSS أكثر عمومية وقابلية للاستخدام يحتوي على الكثير من المكونات التي يمكن تخصيصها بسهولة. بالإضافة إلى ذلك ، هناك مؤسسة البريد الإلكتروني و Motion UI للرسوم المتحركة.
  • مجموعة واجهة المستخدم - مزيج من HTML و JavaScript و CSS لتطوير الواجهة الأمامية بسرعة وسهولة.

إطار عمل Tailwind CSS

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

فيما يلي بعض الأمثلة الرائعة حقًا:

شبكات CSS

أعمدة شبكات بدء العمود css

تدرجات CSS

تدرجات css

CSS لدعم الوضع الداكن

الوضع المظلم css

تمتلك Tailwind أيضًا ملف التمديد متاح لـ VS Code بحيث يمكنك بسهولة تحديد الفئات وإدراجها من محرر التعليمات البرمجية من Microsoft.

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

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.