⚡️خب بچه ها در ادامه مباحث TailwindCss رسیدیم به جاهایی که وقتشه کارای حرفه‌ای تر بکنیم

ببینین ما تا الان یسری کلاس هایی رو باهم کار کردیم که خب خیلی نیازهامون رفع میشه ولی هنوز کلی کار هست که نمیتونیم انجام بدیم!

بحث امروز رسپونسیو کردن با استفاده از تیلویند هست و میخایم بریک پوینت هاشو یاد بگیریم و استفاده کنیم

◀️خب اول از همه این لیستش رو ببینین که داخلش بریک پوینت های تیلویند رو با سایزی که دارن ( Mofile First هستن ) نشون دادیم:

sm : 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

این بریک پوینت ها خب اصولا تو اکثر فریمورک های Css هستش و زیاد گنگ نیست براتون😠

حالا بریم سراغ نحوه استفادش
ببینین داخل مباحث قبلی گفتیم که اره وقتی میخایم بگیم این المنت ما وقتی مثلا هاور شد فلان استایل رو بگیره اینطوری عمل میکردیم:

class="bg-red-500 hover;bg-green-500"

حالا برای اینکه کلاس های رسپونسیو هم اعماد کنیم دقیقا با استفاده از بریک پونت ها همچین کاریو پیش میبریم:

class="bg-red-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-black xl:bg-blue-500 2xl:bg-white"

اینم بگم که بریک پوینت های تیلویند از سایز موبایل شروع میشه و بهش میگن Mobile First پس استایل های دیفالت از کوچیک ترین سایز اسکرین هستن

حالا فرض کنین ما کلی استایل های المنتمون رو میخایم تو سایز lg تغییر بدیم:

class="w-full h-24 border lg:w-1/2 lg:h-96 lg:border-0

اینطوری چند بار مینویسیم و خب اره یکم شلوغ و طولانی میشه
♾فقط امیدواریم تو اپدیت های بعدی تیلویند اینم درست کنن که مثلا به جاش بیایم اینکارو کنیم یه بار بریک پوینت رو بنویسیم و بعدش یه لیست از کلاس هارو بزنیم جلوش

اما اینم بگم همین الانشم خیلی خفنه و کارمون رو خیلی خوب جلو میبره

💎در آینده وقتی رفتیم سراغ کانفیگ های تیلویند بهتون میگم که چطوری سایز و بریک پوینت های جدید هم اضافه کنین یا اسم اینارو عوض کنین

#tailwind #tailwind_12
☕️ @CodeExplore