Tailwind CSS — تنسيق لا يستطيع الانحراف عن العلامة

ما هي Tailwind؟

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

ويقلب Tailwind ذلك. فتُركَّب الأنماط من مجموعة ثابتة من الأدوات المولّدة من ملف إعداد — ملف إعدادك أنت، حاملًا سلّم مسافات علامتك وألوانها ودرجات خطها. فيكتب المطوّر p-6 لا padding: 23px، لأن 23px ليست في النظام ولا سبيل لكتابتها سهوًا.

ويجرّد البناء كل أداة لا يستخدمها المشروع، فلا يحتوي ملف الأنماط المُرسَل إلا ما تشير إليه الصفحات فعلًا — بضعة كيلوبايت عادةً مهما كبرت قاعدة الكود.

متى نختار Tailwind

في أي مشروع بأكثر من مطوّر واحد ونظام تصميم يستحق الحماية. فالإلزام هو المقصد: نظام تصميم موثّق في ملف PDF اقتراح، ونظام تصميم مُترجَم داخل الأدوات قيد.

وهو الخيار الصحيح أيضًا حين يواصل العميل بناء شاشات بعد تسليمنا. فصفحة جديدة مركّبة من الأدوات نفسها تبدو كبقية الموقع افتراضيًا، دون أن يكون من بناها قد قرأ دليل العلامة.

متى لا نستخدم Tailwind

حين يكون التصميم مخصصًا فعلًا لكل صفحة لا نظاميًا — موقع تحريري لكل مقال فيه إخراجه الفني. فالأدوات تصارع ذلك، وCSS المكتوبة يدويًا تعبّر عنه أفضل.

ولم نستخدمه في هذا الموقع أيضًا. فقد وصل نظام تصميم RSX كطبقة رموز مكتوبة يدويًا بأصناف مكوّنات خاصة به، وإضافة Tailwind فوقه كانت ستكرر الرموز وترسل إعادة تهيئة ثانية. فحين يوجد نظام تصميم متماسك أصلًا، يصبح تبني إطار لإعادة التعبير عنه عملًا بلا ناتج.

ما الذي نبنيه بـ Tailwind

أنظمة تصميم مُترجَمة من علامتك

يصبح سلّم مساحاتك ولوحتك ودرجات خطك وأنصاف أقطارك القيمَ الوحيدة المتاحة. فتكون كل شاشة تُبنى لاحقًا متسقة مع العلامة بحكم البناء، ولا يجد المصمم المراجع لصفحة جديدة ما يصححه لأن الخطأ لم يكن ممكنًا.

صفحات تسويقية سريعة التغيّر

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

أنظمة تصميم تصمد بعد التسليم

المسافات والألوان والخطوط تُعرَّف مرة كرموز، فتبدو صفحة جديدة يبنيها مطوّر آخر بعد ستة أشهر كبقية الموقع. وذلك الاتساق هو المخرج الفعلي لا أصناف الأدوات.

تخطيطات من اليمين بلا ورقة أنماط ثانية

الخصائص المنطقية في Tailwind تعكس التخطيط للعربية تلقائيًا، فتوجد ورقة أنماط واحدة لا اثنتان تتباعدان. وهذا الموقع يستخدم ذلك النهج بالضبط.

كيف نطلق مشاريع Tailwind

يُولَّد الإعداد من رموز العلامة لا من افتراضيات Tailwind. فالإطلاق باللوحة الجاهزة يعني موقعًا منسّقًا كأي موقع Tailwind آخر، وهو أشيع نقد يوجَّه إليه وهو ذاتي التسبب تمامًا.

والقيم الاعتباطية — منفذ الهروب الذي يتيح كتابة أي رقم مباشرة — تُؤشَّر في المراجعة. فكل واحدة ثقب في النظام، وقاعدة كود مليئة بها تحمل إسهاب الأدوات بلا اتساقها.

ما تكلّفك Tailwind

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

كما يفترض وجود خطوة بناء. فموقع يجب أن يكون قابلًا للتحرير بإسقاط HTML على خادم، بلا أدوات، لا يستطيع استخدامه — إذ تُولَّد الأدوات عند البناء ولا يحتوي ملف الأنماط إلا ما كان موجودًا حين جرى البناء.

توجد كلفة تعلّم حقيقية لمطوّر لم يستخدمه قط، نحو أسبوع قبل أن يكف عن الشعور بأنه معكوس. وسيجد مصمم يقرأ HTML متابعته أصعب من أسماء أصناف دلالية.

وهو أيضًا الأداة الخطأ إن كنت تبني مكتبة مكوّنات ستستهلكها فرق أخرى في تطبيقاتها. فهناك ينتقل CSS العادي بأسماء أصناف جيدة أفضل، لأن المستهلك لا يضطر لتبني إعداد البناء لديك لاستخدام مكوّناتك.

أسئلة تُطرح علينا عن Tailwind