يوسف المطيري | مبرمج ويب
يوسف المطيري | مبرمج ويب

@yousef_almotiri

7 تغريدة Apr 08, 2023
صحيح اني توي بادي استكشف tailwindcss
لكن لاحظت امر قد يكون مسبب للبعض اشكال
البعض نصحني ان ابدا بالشاشات الصغيره
وان الـ tailwindcss هذي طريقته
قد يكون الامر صحيح
لكن
انا لا احب هذي الطريقه
وقلت هي كلها كلاسات ومقاسات الشاشه اوضفها مثل ما اريد
فلما رأيت طريقة كتابة مقاسات الشاشات عرفت المشكله
اي شخص سبق عمل على الـ bootstrap
سيحدث عنده هذا الشكال
لانه عكس الـ tailwindcss
اضرب لكم مثال للتضح الصوره
في الـ bootstrap
لو اردنا نعمل بعض الخصائص للشاشات الوسط كنا نكتب
max-width:991px
هذا يعني انه سيطبق على الشاشات من 991 واقل
اما في الـ tailwindcss
فتكون قيمة الشاشات الوسط هي
min-width:768px
وهذا يعني انه سيطبق على المقاس
768 واعلى
اما الشاشات الصغيره فهي من 640 واعلى
مثال لو كتبنا
sm:bg-red-500
سيطبق على الشاشات من 640 واعلى
اما التي اقل من هذا المقاس فلن يطبق عليها
واذا اردنا يطبق على الشاشات اللتي اقل نكتب
bg-red-500
مثال اخر
لوكتبنا
bg-green-500 md:bg-red-500 sm:bg-blue-500
الشاشات من 768 واعلى سيكون لون الخلفيه احمر
الشاشات من 640 الى 767 سيكون لو الخلفيه ازرق
اما الشاشات اللتي اقل من 640 سكون لون الخلفيه اخضر
اتمنى يكون الشرح واضح

جاري تحميل الاقتراحات...