Bootstrab ام Tailwind أفيدونى

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

يستعمل Bootstrap بشكل عام لعمل تصاميم سريعة لتوفير العناء على المبرمج، حيث أن Bootstrap يوفر الكثير من المكونات الجاهزة بأكوادها وطريقة التعديل عليها في الموقع الرسمي، كما هناك الكثير من المكونات التي قام بإنشائها المستخدمون والتي يمكن العثور عليها في مواقع مثل bootsnipp الذي يوفر مئات من المكونات الجاهزة للإستعمال مباشرة. هذا بالإضافة إلى أن Bootstrap يوفر بعض الأصناف الأساسية لتغير بعض خصائص CSS البسيطة مثل Padding و Margin و Text-Size .. إلخ، وهذا الأمر يجعل من عملية التعديل على مكونات Bootstrap أسهل قليلًا.

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

لذلك لا يمكن أن نقول أن تقينة أو مكتبة معينة أفضل من تقنية أو مكتبة أخرى، فلكلِ منها إستعمالها. أما ما يجب عليك أن تستعمله فهو ببساطة ما تحتاجه، إن كنت في حاجة إلى تصميم بسيط ولا تريد أن تبذل مجهود في عملية إنشاء واجهة المستخدم Frontend فيفضل أن تستعمل Bootstrap، أما إن كنت تريد عمل تصميم مختلف أو كان الموقع يتبع Design System مختلف عن شكل وخصائص Bootstrap فيفضل أن تستعمل Tailwind لجعل الأمر أسهل.

كما وضح سامح في التعليق السابق أنه لكل تقينية إستعمالاتها ولا توجد تقنية واحدة تستعمل في كل شيء

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

• bootstrap يوفر لك مكونات جاهزة مثل ال navbars وما إلى ذلك
• أما بالنسبة ل Tailwind فهو يحتوي على كمية كبيرة ومتنوعة من ال classes التي توفر لك تنسيقات css

وهذا هو الفرق الجوهري بين الإطارين ولتوضيح هذا الفرق قم بالإطلاع على الكود التالي

<button class="button">Buy</button>
<button class="btn btn-primary">Buy</button>
<!--Tailwind  الكود التالي ل   -->
<button class="bg-purple hover:bg-purple-dark text-white font-bold py-2 px-4 rounded">Buy</button>
 

وهناك أيضاً بعض المزايا ل Tailwind مثل

• القيام بحذف الكود غير المستخدم من خلال بعض المعالجة بواسطة PurgeCSS
• يوفر لك إمكانية التحكم في ال state مثل hover وما إلى ذلك
• يوفر لك إمكانية تنسيق ال before و ال after

ويوفر العديد من المزايا الأخرى ويمكنك القراءة عنها ولكن ربما تجد أن كتابة الكثير من ال classes في ال html يجعل الكود غير مرتب لذلك قلت لك أنه حسب تفضيلك