السبب الحقيقي وراء الجدل الدائر حول Tailwind CSS v4

الجدل حول Tailwind CSS v4 في كل مكان. معظم الناس يتجادلون حول الأمر الخاطئ.

السؤال الحقيقي ليس حول فئات المنفعة (utility classes) مقابل الأنماط المضمنة (inline styles). بل يتعلق الأمر بمكان وجود التنسيقات الخاصة بك ومن يتحمل التكلفة الذهنية.

ينقل Tailwind v4 الإعدادات إلى ملف CSS الخاص بك. ستستخدم @theme بدلاً من ملف إعدادات JavaScript. هذا يجعل سير العمل أكثر سلاسة.

لكن هذا ليس سبب الجدل. الجدل ينبع من الطريقة التي يجعل بها الإصدار الرابع نمطين مختلفين أسهل في الاستخدام.

النمط 1: فئات المنفعة (Utility classes) في مكوناتك. تكتب الفئات مباشرة في HTML أو JSX. هذا يخبرك بالضبط كيف يبدو العنصر.

النمط 2: نهج @apply. تقوم بإنشاء فئات دلالية (semantic classes) مثل .alert أو .alert--error في ملف CSS. هذا يخبرك ماهية العنصر.

كلا الطريقتين تعملان. ولا توجد طريقة خاطئة بينهما. فهما تتبعان فلسفات مختلفة.

المجموعة (أ) تؤمن بمبدأ التواجد المشترك (co-location). كل شيء يبقى في مكان واحد. المجموعة (ب) تؤمن بالأسماء الدلالية (semantic names). هم يريدون أسماء تصف الغرض من العنصر.

عندما يقوم المصمم بتغيير لون الخطأ من الأحمر إلى البرتقالي، تبحث المجموعة (أ) في ملفات الكود. بينما تقوم المجموعة (ب) بتغيير سطر واحد في ملف CSS.

يجعل Tailwind v4 نهج @apply يبدو أكثر طبيعية، مما يزيد من حدة التوتر.

إليك كيفية الاختيار بناءً على حجم فريقك:

  • الفرق الصغيرة: استخدم فئات المنفعة (utility classes). لن تحتاج إلى قضاء الوقت في تسمية الفئات. ستتحرك بشكل أسرع عندما يعمل الجميع على نفس الملفات.

  • مكتبات المكونات: استخدم @apply أو متغيرات CSS. لا ينبغي لمستخدميك معرفة رموز التصميم (design tokens) الداخلية الخاصة بك.

  • الشركات الكبيرة: استخدم نموذجاً هجيناً. اترك لفريق نظام التصميم (design system) مسؤولية امتلاك الفئات الدلالية، واترك لمطوري التطبيقات استخدام فئات المنفعة للتخطيطات السريعة.

لا تستخدم @apply لمجرد تجنب قراءة سلاسل الفئات الطويلة. هذه ليست استراتيجية، بل هي تهرب.

غالباً ما يحارب النقاد الأكثر صخباً أدواتهم بدلاً من إطار العمل نفسه. إذا كان المحرر الخاص بك يفتقر إلى IntelliSense أو كان فريقك يفتقر إلى نظام رموز التصميم (design token system)، فسيشعر الجميع بأن سير العمل معطل.

أصلح سير عملك قبل أن تلوم إطار العمل.

يعد Tailwind v4 إصداراً قوياً. الإعدادات القائمة على CSS أولاً (CSS-first config) هي الأفضل. والجدل ليس سوى علامة على أن الفرق بحاجة إلى اتخاذ قرارات واضحة.

اتخذ قراراً. وثّقه. وامضِ قدماً.

ما هو نهج فريقك؟ هل تستخدم فئات المنفعة (utility classes) أم @apply؟

المصدر: https://dev.to/enjoy_kumawat/the-real-reason-everyones-fighting-about-tailwind-css-v4-4o0g