تعريف عام بإطار العمل.
توجد العديد من أُطُر العمل لـ CSS تسهل وتسرع عملية التصميم، ولعل Bootstrap هو الأشهر من بينها، اذن فما الذي يميز Tailwind ؟
Tailwind يختلف عن معظم أطر العمل الشهيرة بكونه Utility-First CSS Framework، بينما باقي أطر العمل المعروفة كـ Bootstrap هي عبارة عن Component-Based CSS Frameworks.
الفرق بين هذين النوعين من الإطارات يمكن تلخيصه لو ألقيت نظرة بسيطة على التوثيق الرسمي الخاص بـ Bootstrap، والتوثيق الرسمي الخاص بـ Tailwind، ستجد أن Bootstrap يركز على مكونات صفحات الويب ويقدمها لك بشكل جاهز، فستجد تصميمات جاهزة للـ Buttons أو حتى لمكونات الـ Forms بشكل عام، كما ستجد بعض المكونات كالـ Alerts أو navbars وغيرها.
اذن فـ Bootstrap أو أي إطار عمل يعتمد على المكونات ( Component Based ) يقدم لك فعليا عددا كبيرا من مكونات صفحات الويب بأسلوب تصميم موحد، يمكنك حتى البدء باستخدامها دون استخدام CSS أبدا، بل استخدام الكلاسات الجاهزة التي توفرها لك أطر العمل من هذا النوع.
بينما أطر العمل كـ Tailwind لا تقدم Components جاهزة أبدا، فلو بحثت في التوثيق الرسمي، قد تجد أمثلة لطريقة عمل Button بشكل معين، لكن لا يوجد كلاس خاص للـ Buttons يمكنك استخدامه، بل لن تجد أي Component جاهز في إطار العمل، إنما يقوم إطار العمل بإزالة أي Style افتراضي للمكونات، فستجد ال Button دون خلفية أو حدود أو غيرها، حتى تلك التي يضيفها المتصفح، يقوم Tailwind بازالتها حتى يترك لك الحرية بتخصيصها كما شئت، فبدلا من أن يقدم لك كلاسات تقوم بإعطاء شكل محدد للـ Component يقوم إطار العمل بتزويدك بكلاسات خدمية ( Utilities ) فهي تبدو وكأنها خصائص CSS عادية. فستجد مثلا كلاسات لعمل Padding، وأخرى لتغيير لون الخلفية وهكذا، لكن ما الفائدة؟ إن كان الأمر كذلك لم لا أستخدم CSS مباشرة بدل اللجوء لاستخدام Tailwind؟
السبب ببساطة هو أن Tailwind تقدم لكن طريقة رائعة لعمل نظام تصميم ( Design System ) خاص بك، فهو يجهز صفحة الويب لتكون خالية من أي تصميم مسبق، ويزودك بملف جافاسكربت تجد فيه جميع إعدادات إطار العمل، فيتم توليد الكلاسات بحسب الإعدادات التي تقدمها له في هذا الملف. مما يمكنك من عمل نظام تصميم خاص بك باستخدام جافاسكربت.
فمثلا يمكنك من خلال إعدادات جافاسكربت تحديد أحجام الشاشات التي ستقوم بتغيير في الستايل عندها لجعل التصميم متوافق مع مختلف الأحجام مثلا، فلو حددت في ملف الإعدادات حجمين، وسميتهم sm و lg، وحددت له انك بحاجة لتغيير الـ Padding بحسب حجم الشاشة، فستجد ان Tailwind سيقوم تلقائيا بعمل كلاسات padding لكل حجم شاشة، فمثلا ستجد كلاس باسم ( sm:p-1 ) وستجد في نفس الوقت كلاس آخر باسم ( lg:p-1 ) فهو يأخذ الإعدادات التي تضعها له، ويولد بحسبها الكلاسات المناسبة.
هذه مقارنة بين Bootstrap كمثال على الـ Component-Based Framework وبين Tailwind كمثال على الـ Utility-First Framework، المزايا والعيوب نسبية، فما تراه ميزة قد يراه غيرك عيبا، المقارنة تأتي من وجهة نظري الشخصية فقط لمساعدتك على اختيار الإطار الأنسب لك.
لاحظ الكلاسات التي قمنا بأضافتها، لاحظ عدم وجود أي كلاس يدل على Component محدد، انما كلها ستايلات عادية من تغيير للون الخلفية، او عمل margin أو كلاسات متعلقة بالـ Flexbox، ففعليا يمكنك تصميم صفحات كبيرة جدا دون الحاجة لكتابة css مخصص إلا في حالات قليلة، هذه الكلاسات كلها تم توليدها بحسب ملف الإعدادات الخاص بـ Tailwind، في هذا المثال لم أقم بتعديل أي شيء في الملف، لكن يمكنك تعديل الإعدادات بما يناسب تصميمك كما وضحنا في القسم السابق من المقال.
للتعرف على وظيفة الكلاسات المستخدمة، أو البحث عن طريقة عمل شيء محدد باستخدام Tailwind راجع التوثيق الرسمي:
وهذه صورة للناتج:
استخراج المكونات.
صار واضحا أن Tailwind لا يُلزِمك بأي مكونات أو Components تم تصميمها مسبقا، إلا أنه يراعي وجود الحاجة لعمل Components ويوفر طريقة سهلة لذلك، فكما تلاحظ، اسماء وترتيب الكلاسات فيه رائعة جدا وتسهل العمل ولا تضطرك لاستخدام css في كل شيء وعمل class او id لكل جزء من أجزاء التصميم، لكن في المقابل، ستجد أنك بحاجة لعمل بعض الـ Components لترتيب الكود أكثر، وللتقليل من التكرار، ففي المثال السابق، ستلاحظ أننا قمنا بتكرار نفس الكلاسات الخاصة بالـ input مرتين، وكان الأفضل والأسهل عمل كلاس آخر للـ input بشكل عام، حتى لا نضطر لنسخ مجموعة كبيرة من الكلاسات كل مرة، ولتقصير الكود ومنع الاكثار من التكرار، كذلك الأمر بالنسبة للـ Button، فلا بد أن موقعك سيحتوي على عدد كبير من الـ Buttons ومعظمها بنفس التصميم، وكما نعلم فإن Tailwind يشجعك على انشاء نظام التصميم الخاص بك، فبدلا من أن تستخدم إطار عمل كـ Bootstrap يوفر لك عددا كبيرا من الـ Components بتصميمات جاهزة، يشجعك Tailwind على انشاء الـ Components التي تلزمك فقط، وبالتصميم الذي تريده.