Tailwind رائع حقاً، لكنني سأتوقف عن استخدامه.

MMaximilian Schwarzmüller
Computing/SoftwareSmall Business/StartupsAdult EducationInternet Technology

Transcript

00:00:00بالنسبة لبعض المشاريع الجديدة التي أعمل عليها، بل لمعظم مشاريعي الجديدة الحالية،
00:00:05لقد توقفت بالفعل عن استخدام Tailwind. لم أعد أعتمد عليه في تلك المشاريع،
00:00:11وبالتالي لم أعد أستخدم Shadcn أيضًا. وهناك سبب لذلك، وليس لأن Tailwind سيئ،
00:00:18بالطبع لا، بل على العكس تمامًا؛ فهي مكتبة رائعة، وأريد أن أكون واضحًا جدًا بشأن ذلك.
00:00:22أشعر بنوع من الذنب لإنتاج هذا الفيديو أو هذه الحلقة لأنني،
00:00:27منذ بضعة أسابيع فقط، تحدثت عن المشاكل المالية الكبيرة التي كانت تواجه Tailwind آنذاك.
00:00:32منذ ذلك الحين، ولحسن الحظ، تحسنت الأمور كثيرًا وانضم العديد من الرعاة الجدد. وأعتقد الآن
00:00:38أنهم في وضع مالي أفضل بكثير. وبطبيعة الحال، Tailwind أداة مذهلة.
00:00:43وهناك أشخاص يعملون بشغف وطاقة كبيرة على هذا المشروع. وما أقصده ليس
00:00:49أنه سيئ، ولا أحاول إقناع أي شخص بعدم استخدامه. أنا فقط أستخدم هذه القناة
00:00:56لمشاركة أفكاري وآرائي وبعض الأفكار حول طريقة عملي، وظننت أن هذا قد يكون ممتعًا.
00:01:01إذًا، لماذا لا أستخدم Tailwind إذا كنت أراه رائعًا؟ حسنًا، علي أن أعود خطوة للوراء.
00:01:07قبل بضع سنوات، قبل ثورة الذكاء الاصطناعي، أو قبل أن يصبح الذكاء الاصطناعي بارعًا في البرمجة،
00:01:15كنت أستخدم Tailwind مثل معظم المطورين في كل مكان، لسبب رئيسي واحد،
00:01:21وهو أنه سمح لي بتطوير الكود وتعديله بسرعة. لم أستخدم Figma أبدًا
00:01:28أو أي أدوات مشابهة، وذلك لأنني غالبًا ما أعمل بمفردي.
00:01:34وعندما أعمل بمفردي على مشاريعي، لا أحتاج حقًا لاستخدام أدوات التصميم تلك. فبالنسبة لي،
00:01:40كان من الأسرع دائمًا تجربة التصاميم مباشرة داخل الكود.
00:01:45ومع Tailwind، وبما أن فئات التنسيق (classes) تكون مدمجة في الـ DOM أو كود JSX، يمكنك
00:01:50تحديث الكود والأنماط بسرعة وتجربة خيارات مختلفة، مثل تعديل الهوامش (margin) بدقة.
00:01:57كان ذلك يمثل سير عمل فعالًا للغاية. وكان هذا هو السبب الرئيسي لي ولربما
00:02:04لمطورين آخرين في استخدام Tailwind. وأعلم أن بالنسبة لعدد لا بأس به من المطورين،
00:02:10وربما الغالبية، هناك سبب قوي آخر وهو كرههم للـ CSS. أعلم أن CSS ليس محبوبًا
00:02:17بين مطوري الويب، وأفهم السبب؛ فقد يبدو معقدًا للغاية بوجود مئات وآلاف
00:02:23الخصائص والقيم، نعم، قد يكون الأمر مربكًا. لكن، يجب أن أقول إن CSS الحديث
00:02:31قطع شوطًا طويلاً، وأصبحت الكثير من الأمور أسهل الآن مما كانت عليه في الماضي. Flexbox ليس
00:02:37جديدًا على الإطلاق، لكنه سهّل الكثير. وفكر في Flexbox وفي مجالات أخرى
00:02:44مثل استخراج الألوان الذي أصبح أسهل بكثير، حيث تتوفر الآن ميزة الألوان النسبية في CSS.
00:02:51وبالمناسبة، أطلقت على قناتي “Akatamine” بضعة فيديوهات أتحدث فيها عن مميزات المتصفحات
00:02:55وCSS الحديثة، مثل الألوان النسبية أو “container queries” المذهلة حقًا
00:03:01لبناء مكونات تتغير أحجامها ديناميكيًا ولا تعتمد على مساحة الشاشة (viewport)، بل على المساحة
00:03:08المتاحة للمكون نفسه. لذا، فقد تطور CSS كثيرًا. والنقطة هي أنه يمكنك استخدام كل هذه
00:03:14المميزات الحديثة مع Tailwind أيضًا، لكن يمكنك أيضًا كتابة CSS خام (vanilla)،
00:03:23وأصبح القيام بذلك أسهل الآن باستخدام الذكاء الاصطناعي، فحتى لو كنت تكره CSS،
00:03:28يكفي أن تكون على دراية ببعض الميزات ودعم المتصفحات لها. يمكنك توجيه الذكاء الاصطناعي
00:03:34نحو الميزات التي تريد استخدامها، وتزويده ببعض الوثائق أو مقالات MDN، وسيقوم هو بكتابة الكود.
00:03:39قد تتساءل: لماذا أفعل ذلك؟ لماذا لا أستخدم Tailwind فحسب؟ فهو
00:03:45يحتوي على كل هذه الميزات الحديثة أيضًا. هناك سبب ونصف لهذا، على الأقل بالنسبة لي.
00:03:51السبب الأقل أهمية هو أن Tailwind قد لا يدعم دائمًا أحدث الميزات فور صدورها،
00:03:58والأهم من ذلك، أن الذكاء الاصطناعي لا يعرف بالتأكيد كل ميزات Tailwind. فبالرغم من ميزاته الكثيرة،
00:04:05إلا أن الذكاء الاصطناعي لا يستخدمها جميعًا، بل يستخدم نفس الفئات المتكررة وغالبًا ما يستخدم
00:04:13صيغة قديمة للفئات، مما يجعلك تفوت بعض الميزات. وبالطبع، قد يحدث نفس الشيء
00:04:17إذا كنت تستخدم CSS الخام؛ فإذا لم تطلب من الذكاء الاصطناعي استخدام ميزة معينة،
00:04:22فقد لا يفعل. ولكن يمكنك تعلم أهم ميزات CSS التي تريدها
00:04:29وتطلب منه استخدامها. وبالطبع أفهم وجهة نظرك، يمكنك فعل الشيء نفسه مع Tailwind
00:04:34وتطلب منه استخدام ميزات محددة، لكن قد يكون من الأسهل تسمية ميزات CSS رئيسية بدلاً من فئات Tailwind.
00:04:40لكن مجددًا، ليست هذه نقطتي الأساسية. نقطتي الأساسية هي
00:04:48أنني أحاول دائمًا تقليل عدد المكتبات التي أستخدمها في مشاريعي،
00:04:53والسبب في ذلك مزدوج. أولاً، أنا أصنع محتوى تعليميًا، لذا اعتدت على
00:05:01اعتبار المكتبات الخارجية أو الإضافية أمرًا سيئًا؛ فإذا كنت أقدم دورة عن React،
00:05:07واستخدمت فيها Tailwind، وحدث تغيير جذري في Tailwind،
00:05:12ستتعطل أجزاء كثيرة من الكود أو الدورة التدريبية فجأة، وسأتلقى الكثير من الأسئلة من الطلاب،
00:05:17رغم أن الموضوع الرئيسي وهو React لم يتغير. أدرك أن هذه مشكلة خاصة جدًا تؤثر عليّ،
00:05:23ولكنها لا تؤثر على معظم المواقع. ومع ذلك، حتى لو كنت تبني موقعًا عاديًا،
00:05:29أعتقد أن تقليل المكتبات الخارجية قدر الإمكان وبشكل معقول هو فكرة جيدة.
00:05:38لا أقول إنه يجب الاستغناء عن كل المكتبات قسرًا، فهناك أسباب وجيهة لاستخدام بعضها.
00:05:44فمثلاً، إذا كنت تبني موقعًا يحتوي على محرر نصوص غني (rich text editor)،
00:05:50فإن استخدام شيء مثل TipTap منطقي جدًا، لأنه يمكنك من بناء محررك الخاص.
00:05:54باستخدام الذكاء الاصطناعي، أصبح الأمر أسهل من ذي قبل إلى حد ما،
00:05:59لكنك ستواجه أيضًا الكثير من الحالات الخاصة أو المشاكل التي سيتعين عليك حلها بنفسك.
00:06:06نعم، سيساعدك الذكاء الاصطناعي، لكنه لا يصيب في كل شيء دائمًا، وأنت تعرف ذلك إذا جربته.
00:06:11لذا هناك أسباب لاستخدام مكتبات خارجية. لكنني أقول فقط إن التنسيق (styling)
00:06:16هو شيء يمكن استبداله بالفعل. ولا أقول إن على الجميع فعل ذلك،
00:06:21لكن بالنسبة لي، هذا التوجه يعمل بشكل جيد. وبالتالي، هذه مكتبة يمكنني التخلص منها
00:06:28لأنني لا أمانع مراجعة كود CSS الذي يعطيه لي الذكاء الاصطناعي وإصلاح مشاكل التنسيق
00:06:37باستخدام CSS الخام عندما تسوء الأمور، وبالتأكيد ستسوء في مرحلة ما عند استخدامه.
00:06:44لكنني لا أمانع ذلك. أما إذا كنت تكره تمامًا النظر إلى أكواد CSS، فهذا الخيار لن يناسبك.
00:06:50لكن بالنسبة لي، يمكنني الاستغناء عن مكتبة Tailwind، وعن Shadcn أيضًا
00:06:56لأنني أبني مكوناتي الخاصة. و Shadcn بالطبع ليس مكتبة تقليدية،
00:07:00لكنه يستخدم RADIX UI في الخلفية، وهي مكتبة وضع صيانتها الآن يثير التساؤلات حسب علمي.
00:07:08وهنا تكمن المشكلة الحقيقية في رغبتي بتجنب المكتبات، حتى بعيدًا عن فكرة المحتوى التعليمي.
00:07:16فكل مكتبة تضيفها لمشروعك قد تصبح عبئًا إذا توقفت صيانتها.
00:07:21في تلك اللحظة، قد لا تُحل الثغرات الأمنية أو الأخطاء البرمجية، حتى أخطاء التنسيق
00:07:29في Tailwind مثلاً. وقد لا تُضاف ميزات جديدة. فإذا ظهرت ميزة جديدة في CSS
00:07:35ولم تعد Tailwind تحت الصيانة -وهي تحت الصيانة حاليًا بالطبع- فلن تتمكن أبدًا من استخدامها.
00:07:41وكدنا نقترب من ذلك مع Tailwind. في الفيديو الذي تحدثت فيه عن مشاكلهم،
00:07:46كان هناك منشور للمبتكر الرئيسي لـ Tailwind يقول فيه إنهم إذا لم يجدوا حلاً لمشكلة التمويل،
00:07:52فقد تصبح Tailwind مشروعًا مهجورًا. ربما كان ذلك مبالغًا فيه لجذب الانتباه،
00:07:58لكن على أي حال، إحدى المشاكل الدائمة مع معظم المكتبات الخارجية هي أنها قد لا تحظى
00:08:03بالصيانة في المستقبل، اعتمادًا على من يعمل عليها أصلاً.
00:08:11وهذا هو السبب الذي يجعلني أفضل استخدام CSS الخام مجددًا، وهذا أمر مهم
00:08:17لأنني كنت أفعل ذلك دائمًا. ولا يسعني إلا أن أؤكد مجددًا أنني أتمنى الأفضل لـ Tailwind
00:08:22وما زلت أستخدمها في الكثير من المشاريع، فأنا لا أكرهها.
00:08:28الأمر مجرد تجربة لعدم استخدامها في بعض المشاريع. وسواء كان الأمر يتعلق بـ Tailwind
00:08:35أو أي شيء آخر، سأفكر دائمًا مرتين قبل استخدام أي مكتبة خارجية،
00:08:41رغم وجود أسباب وجيهة لاستخدامها؛ مثل “Better Auth” للمصادقة، فهي مذهلة وسأستخدمها بالتأكيد.
00:08:46لكن إذا كانت هناك مكتبة يمكنك استبدالها، فقد يستحق الأمر إعادة النظر فيها.
00:08:53before using a third-party library. There are many good reasons to use them. For example, better auth
00:08:57for authentication is amazing. I would definitely do that. But if there is a library you can replace,
00:09:04it might be worth a second look or thought, I guess.

Key Takeaway

يرى المتحدث أن الاعتماد على CSS الحديث والذكاء الاصطناعي يقلل الحاجة للمكتبات الخارجية مثل Tailwind، مما يعزز استقلالية المشروع ويقلل مخاطر توقف الصيانة.

Highlights

التحول من استخدام Tailwind CSS و Shadcn نحو استخدام CSS الخام (Vanilla CSS) في المشاريع الجديدة.

دور الذكاء الاصطناعي في تسهيل كتابة وفهم كود CSS الحديث وتطبيق الميزات المتقدمة.

تطور ميزات CSS الحديثة مثل Container Queries والألوان النسبية التي تغني عن بعض فوائد المكتبات.

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

التحديات الخاصة بصناع المحتوى التعليمي عند استخدام مكتبات تابعة لجهات خارجية قد تتغير جذرياً.

ضرورة الموازنة بين الحاجة لمكتبات معقدة (مثل المحررات) وبين الأمور التي يمكن بناؤها يدوياً مثل التنسيق.

Timeline

قرار التوقف عن Tailwind ومكانة المكتبة الحالية

يبدأ المتحدث بإعلان قراره بالتوقف عن استخدام Tailwind CSS و Shadcn في معظم مشاريعه الجديدة الحالية. يوضح أن هذا القرار لا يعود لضعف في المكتبة، بل يصفها بأنها أداة مذهلة ورائعة ويدعم القائمين عليها. يتطرق إلى الوضع المالي للمشروع وكيف تحسن مؤخراً بانضمام رعاة جدد بعد فترة من القلق. يؤكد أن الهدف من الفيديو هو مشاركة تجربته الشخصية وطريقة عمله وليس إقناع الآخرين بترك الأداة. هذا القسم يمهد الطريق لفهم الدوافع المهنية وراء هذا التحول الجذري.

لماذا كان Tailwind ضرورياً في الماضي؟

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

تطور CSS الحديث ومميزاته الجديدة

يناقش هذا الجزء تحسن لغة CSS نفسها وكيف أصبحت الكثير من الأمور المعقدة سابقاً أسهل الآن بكثير. يذكر المتحدث ميزات مثل Flexbox، والألوان النسبية، و Container Queries التي تسمح ببناء مكونات تجاوبية بناءً على مساحتها الخاصة وليس شاشة العرض. يوضح أن كره المطورين لـ CSS نابع من تعقيداتها القديمة، لكن المتصفحات الحديثة تدعم الآن خصائص قوية جداً. يرى أن تعلم هذه الأساسيات يغني عن الطبقات الإضافية التي توفرها المكتبات الخارجية في كثير من الأحيان. يؤكد أن الـ CSS الخام أصبح خياراً منافساً بقوة بفضل هذه التحديثات التقنية المتسارعة.

دور الذكاء الاصطناعي في كتابة الكود

يشرح المتحدث كيف غير الذكاء الاصطناعي قواعد اللعبة، حيث يمكنه الآن كتابة كود CSS معقد بناءً على تعليمات بسيطة. يلاحظ أن الذكاء الاصطناعي قد يعاني أحياناً مع Tailwind لأنه يكرر أنماطاً قديمة أو لا يدرك كافة الميزات الحديثة للمكتبة. في المقابل، يسهل توجيه الذكاء الاصطناعي لاستخدام ميزات CSS معيارية بمجرد تزويده بالوثائق المناسبة مثل مقالات MDN. هذا يعني أن المبرمج لم يعد مضطراً لحفظ كل خصائص CSS، بل يكفي فهم المفاهيم وتوجيه الآلة لتنفيذها. يمثل هذا الانتقال نقطة تحول لمن كانوا يخشون صعوبة كتابة التنسيقات يدوياً.

مخاطر المكتبات الخارجية واستدامة المشاريع

يركز المتحدث هنا على فلسفته في تقليل عدد المكتبات الخارجية لضمان استقرار المشاريع على المدى الطويل. بالنسبة لصناع المحتوى التعليمي، أي تغيير في مكتبة تابعة لجهة خارجية قد يؤدي لتعطل دروس كاملة، مما يسبب إرباكاً للطلاب. كما يشير إلى أن أي مكتبة قد تتوقف صيانتها مستقبلاً، مما يترك المشروع عرضة لثغرات أمنية أو أخطاء برمجية غير محلولة. يضرب مثالاً بمكتبة Radix UI والقلق المحيط بحالتها الحالية كدليل على تقلبات بيئة المكتبات. الخلاصة هي أن الاعتماد على التقنيات المعيارية (الخام) يحمي الكود من تقادم الأدوات الخارجية.

الخلاصة: متى تستخدم المكتبات ومتى تتجنبها؟

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

Community Posts

View all posts