تلوند سي إس إس

تلوند سي إس إس هو إطار عمل CSS مفتوح المصدر، بعكس الأطر الأخرى، مثل Bootstrap فإنه ليس عبارة عن مجموعة جاهزة من الفئات (clasess) المحددة مسبقًا للعناصر كالأزرار أو الجداول. بدلاً من ذلك، فإنه ينشئ مجموعة من فئات CSS "الخدمية" (utility) التي يمكن استخدامها لتصميم كل عنصر عن عبر مزجها مع بعضها البعض. 

على سبيل المثال، في بقية إطارات سي إس إس التقليدية، يكون هناك  من الفئة (class) تُطابق لون خلفية أصفر ونصًا غامقًا. لتحقيق هذه النتيجة في Tailwind، تستعمل مجموعة من الفئات (clesses) التي توفرها تلوند:  و  .

اعتبارًا من 5 أغسطس 2024، حصل Tailwind CSS على أكثر من 81000 نجمة على GitHub . 

 المميزات 
نظرًا لاختلاف المفاهيم الأساسية فيما يتعلق بإطارات CSS التقليدية الأخرى مثل Bootstrap، فمن المهم معرفة الفلسفة التي تم إنشاء Tailwind من خلالها، بالإضافة إلى استخدامها الأساسي.

 فئات الخدمية (Utility classes) 
يشير مفهوم "utility-first" إلى الجوهر الذي يتميز به Tailwind.  فبدلاً من إنشاء فئات لأجل المكونات (button, panel, menu, textbox...)، يتم بناء الفئات حول عنصر نمط محدد (اللون الأصفر، الخط الغامق، النص كبير جدًا، عنصر المركز ...). كل واحدة من هذه الفئات تسمى Utility classes.

هناك العديد من الفئات الخدمية المساندة في Tailwind CSS التي تمكن من التحكم في عدد كبير من خصائص CSS مثل الألوان والحدود ونوع العرض ( العرض ) وحجم الخط والخط والتخطيط والظل...
+مثال: إشعار أصفر نتيجة500x500بك|Example Tailwind yellow warning.png الكود البرمجي <div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
 <p>Please be careful when feeding the birds.</p>
</div>الفئات (Classes) تلوند سي إس إس المقابل في سي إس إس  margin: 1rem;  padding: 1rem;  background-color: rgb(254 240 138);  font-weight: 700;  border-radius: 0.5rem;

 الأشكال المختلفة (Variants) 
يقدم Tailwind إمكانية تطبيق فئات خدمية (Utility classes) في بعض المواقف من خلال استعلامات الوسائط (media queries)، والتي تسمى variants. الاستخدام الرئيسي للالأشكال المختلفة هو تصميم واجهة مستجيبة لأحجام شاشات مختلفة.  توجد أيضًا أشكال المختلفة للحالات المختلفة التي يمكن أن يتخذها العنصر، مثل  عند التحويم، أو  عند تحديد لوحة المفاتيح أو  عند الاستخدام،  أو عندما يكون الوضع الداكن ممكّنًا في المتصفح أو نظام التشغيل. 

تتكون Variants من جزأين: الشرط الذي يجب استيفاؤه والفئة التي يتم تطبيقها إذا تم استيفاء الشرط. على سبيل المثال، سوف يطبق المتغير  الفئة  إذا كان حجم الشاشة هو على الأقل القيمة المحددة لـ  .

طُور Tailwind CSS باستخدام JavaScript ، ويتم تشغيله عبر Node.js ، ويتم تثبيته باستخدام مديري حزم البيئة مثل npm أو yarn . 

 الإعدادات والثيمات 
يمكن إعداد الفئات (Classes) والأشكال المختلفة (Variants) التي يقدمها Tailwind من خلال ملف الإعدادات (configuration file) يسمى عادةً  . من خلال الإعداد يمكن تعيين قيم الفئات الخدمية، مثل الألوان أو الأحجام بين العناصر للهوامش.

 الإصدارات 
يستخدم Tailwind CSS إصدارات دلالية لتحديد توافق إصداراته.

 انظر أيضا 
 إطار عمل CSS
 جي كويري موبايل
 إطار عمل جافا سكريبت
 مكتبة جافا سكريبت
 بوتستراب

 المراجع 

 روابط خارجية 

 وثائق Tailwind الرسمية
 ملعب تيلوند
 مستودع Github

تصنيف:التصميم المستجيب لمواقع الويب
تصنيف:برمجيات تستخدم رخصة إم آي تي
تصنيف:صفحات الطرز المتراصة