ما هو Tailwind CSS؟
Tailwind CSS إطار CSS مفتوح المصدر تطوّره شركة Tailwind Labs، ويتبع نهج «الفئات المساعدة أولًا» (utility-first). فبدلًا من تسمية كل عنصر وكتابة ملف تنسيق منفصل، تُجمع داخل HTML مباشرة فئات صغيرة تؤدي كل منها وظيفة واحدة، مثل flex وpt-4 وtext-center. ولا يأتي الإطار بمكوّنات جاهزة، ويمكن استبدال قيمه الافتراضية للألوان والمقاسات بقيم العلامة التجارية.
يعيش نظام التصميم في مكان واحد: تُعرَّف الألوان والمسافات وأحجام الخطوط ونقاط التحول كمتغيرات للسمة، وتتحول أيضًا إلى متغيرات CSS قياسية. وتكيّف البادئات أي فئة مع حالة بعينها، كالشاشات الأعرض ومرور مؤشر الفأرة والوضع الداكن والنصوص من اليمين إلى اليسار. وعند بناء الموقع يفحص Tailwind الشيفرة ولا يولّد CSS إلا للفئات المستخدمة فعلًا.
Tailwind CSS مجاني بموجب ترخيص MIT. وقد نقل الإصدار 4.0، الصادر في يناير 2025، الإعدادات إلى ملف CSS نفسه، وجاء بمحرك أسرع مبني على ميزات CSS حديثة مثل طبقات التتالي (cascade layers). ويعمل مع HTML العادي كما يعمل مع مشاريع React وVue وNext.js وAstro.
أين نستخدم Tailwind CSS
عبر Tailwind ننقل التصميم من Figma إلى الشيفرة دون أن تضيع تفاصيله. ونستخدمه خصوصًا في:
من Figma إلى الشيفرة
تتحول الألوان ومقاييس الخطوط والمسافات وانحناءات الزوايا المتفق عليها في نظام التصميم إلى متغيرات سمة في Tailwind، فيستخدم الموقع المبرمج القيم نفسها الموجودة في التصميم.
تخطيطات متجاوبة
يُكتب كل مكوّن للهاتف أولًا، ثم تكيّفه بادئات نقاط التحول مع الأجهزة اللوحية والشاشات العريضة. ويُقرأ سلوك العنصر في كل مقاس من مكان واحد.
صفحات عربية من اليمين إلى اليسار
تضبط الفئات المنطقية المسافات بحسب اتجاه القراءة لا بحسب اليسار واليمين، فتنعكس النسخة العربية بشكل صحيح، وتتولى بادئة rtl التفاصيل المتبقية.
مكوّنات قابلة لإعادة الاستخدام
تُبنى الأزرار والبطاقات والنماذج وقوائم التنقل مرة واحدة كمكوّنات React أو Vue أو Astro بفئات Tailwind، وتستخدمها كل صفحة جديدة، فيبقى الموقع متناسقًا من أوله إلى آخره.
لماذا Tailwind CSS؟
التناسق جزء من البنية
تأتي كل مسافة ولون وحجم خط من المقياس المشترك، فلا يبقى مكان للقيم العشوائية التي تُضعف التصميم شيئًا فشيئًا.
ملف CSS خفيف
لا يدخل الملف النهائي إلا ما يستخدمه الموقع من فئات، فلا تتراكم بقايا الصفحات القديمة، ويبقى ملف التنسيق صغيرًا مهما كبر الموقع.
تعديل آمن
تبقى التنسيقات بجوار المكوّن الذي تخصه، فتعديل بطاقة لا يُفسد صفحة أخرى على نحو غير متوقع، وتصبح التحديثات بعد الإطلاق أسرع وأكثر أمانًا.
كيف نعمل على مشروعك
يبدأ العمل في Figma حيث يُعرَّف نظام التصميم. ننقل قيمه إلى متغيرات السمة في Tailwind، ونبني المكوّنات الأساسية أولًا، ثم نركّب الصفحات منها، ونقارن كلًّا منها بالتصميم على عروض شاشة مختلفة.
قبل التسليم نقارن الصفحات المبرمجة بشاشات Figma، ونراجع التخطيط العربي من اليمين إلى اليسار والوضع الداكن إن كان التصميم يتضمنه، ونتأكد من أن ملف CSS النهائي لا يحتوي إلا ما يستخدمه الموقع. ثم نقيس الصفحات عبر Lighthouse.
