إطار العمل TailwindCSS وهو إطار عمل لـ CSS يسهل التصميم بشكل سريع ومنظم. الإطار يقدم مفهوما مختلفا عن باقي أطر العمل المعروفة كـ Bootstrap أو Foundation وغيرها.
1. تعريف عام بإطار العمل.
توجد العديد من أُطُر العمل لـ 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، المزايا والعيوب نسبية، فما تراه ميزة قد يراه غيرك عيبا، المقارنة تأتي من وجهة نظري الشخصية فقط لمساعدتك على اختيار الإطار الأنسب لك.
2. إنشاء مشروع جديد وتثبيت إطار العمل.
قم بانشاء مجلد جديد للمشروع، ثم ثبت TailwindCSS باستخدام الأمر التالي:
npm install tailwindcss
قم الآن بانشاء ملف الـ CSS الرئيسي الذي ستضع فيه الستايلات الخاصة بك.
لتتمكن من استخدام كلاسات Tailwind داخل هذا الملف ستحتاج لاستدعاءها، ضع أوامر الاستدعاء في بداية الملف:
@tailwind base;
@tailwind components;
@tailwind utilities;
ذكرنا في بداية المقال أن Tailwind يعتمد بشكل أساسي على ملف Javascript يحوي على جميع إعداداته، لتوليد هذا الملف نفذ الأمر التالي في سطر الأوامر:
npx tailwind init --full
الخيار full ليس إلزاميا، وظيفته أن يقوم بإنشاء الملف بالإعدادات الافتراضية الخاصة بـ Tailwind، فستجد في هذا الملف الألوان الافتراضية وقياسات الـ Padding والـ Margin وغيرها من الإعدادات، إضافة إلى تفعيل الـ utilities والإضافات، عدم استخدام هذا الخيار سينشئ ملف إعدادات فارغ حتى تقوم بوضع الإعدادات التي تناسبك، شخصيا أفضل استخدام هذا الخيار ثم تعديل الإعدادات بما يناسبني عوضا عن كتابة الإعدادات من الصفر.
هكذا نكون قد أنهينا التثبيت.
