السلام عليكم ورحمة الله تعالى وبركاته أولا أوجه شكري 
لأخي هشام @hichem2h الذي استعاد هيبة ومكانة مجتمعنا المتواضع بعد مدة زمنية لأنه في الأيام الماضية أصابنا الخمول والكسل لذا سأبدأ ان شاء الله بشرح مكتبة ال TailwindCSS
لنكن متفقين لقد بحثت على الأشياء الأساسية فيها لذا مزيد من التفاصيل يرجى التوجه الى الموقع الرسمي للمكتبة.
1-ماهي ال TailwindCSS
اذن الـTailwindCSS هي عبارة عن اطار عمل للـCSS لا تعتمد على المكونات Component Based كباقي أطر العمل الأخرى كـ Bootstrap و Foundation تعتمد عليه بشكل كبير.والجميل في هذا اطار العمل أنه يوفر لك أساسيات أولية لما تحتاجه لتصميم صفحات الويب أو بالأحرى يوفر لك نظام تصميم خاص بك مثل الهوامش ، والأحجام ، والألوان …الخ، وهذا النوع من الأشياء. لن تجد مكونات جاهزة مثل الأزرار وعلامات التنقل - الأمر متروك لك في استخدام Tailwind لإنشاء مكوناتك الخاصة. هذا يعطي حرية هائلة حيث العديد من الأطر الحديثة تقيد فقط ما تبنيه ؛ ليست هناك حاجة لتجاوز أي شيء.
2-طريقة تثبيت Tailwind
1. قم بانشاء مجلد جديد ثم قم بكتابة الأمر التالي:
> npm install tailwindcss
2. أنشئ ملف الـcss الرئيسي لتضع الستايل الخاص بك
من أجل استخدام كلاسات Tailwind يجب عليك استدعائها من خلال هذه الأوامر:
> @tailwind base;
>
> @tailwind components;
>
> @tailwind utilities;
3. أنشئ ملف تهيئة Tailwind بمعنى:
إذا كنت ترغب في تخصيص تثبيت Tailwind ، يمكنك إنشاء ملف تهيئة لمشروعك باستخدام الأداة المساعدة
Tailwind CLI المضمنة عند تثبيت حزمة tailwindcss npm لأنه يعتمد هذا اطار العمل على ملف js والذي يحتوي على اعداداته عبر الأمر التالي:
> npx tailwindcss init
3-مقارنة بين Tailwindو Bootstrap:
مايلي مقارنة بسيطة بين المكتبتين هنا رابط لمقالة عربية يقوم بوضع مقارنة بينهما.
مكتبة Bootstrap:
-
اذا كنت تريد تصميم جيد وأنت مستعجل توفرلك Bootstrap مكونات جاهزة دون تصميم أي شيء.
-
يعتمد Bootstrap على منهجية Object Oriented CSS التي أصبحت واحدة من أكثر الطرق الشائعة لإدارة stylesheets وclasses.
-
يستخدم أيضا معالجات CSS الأكثر شعبية ، وهي Sass.
مكتبة Tailwind:
-
هنا لايلزمك نظام تصميم محدد بل يقوم ازالة كافة الستايلات مما يكون لديك نظام تصميم خاص بك.
-
طريقة كتابته تكون في كلاسات عناصر الـHtml بدلا من كتابة الكثير في CSS.
-
هناك ميزة رائعة وهي يمكنك تعيين حالات hover, active و focus باستخدام الـclasses.
4-مثال تطبيقي باستخدام CSS و Tailwind
بواسطة CSS:
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>
بواسطة Tailwind:
<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="ml-6 pt-1">
<h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
<p class="text-base text-gray-600 leading-normal">You have a new message!</p>
</div>
</div>
لرؤية مثال آخر اضغط هنا الى التطبيق الأصلي.
وفي الأخير أتمنى أن تستفيدوا ولو قليلا وحفظكم الله ورعاكم 
أظن أنه سيكون سقوط حر للـبوتستراب
.
أتمنى أن تكون هناك تقنيات مثل هذه لتسهل عليّ المهمة 
