Magdy Atef Zahran

الـ Responsiveness (Breakpoints & Media Queries) في Tailwind

لو فاكر في المستوى الأول إحنا بدأنا نستخدم الـ utility classes عادي… دلوقتي هنزود عليها البُعد التاني: إزاي نخلي الموقع Responsive لكل الشاشات من غير ما نكتب media queries بإيدينا.

فكرة الـ Breakpoints في Tailwind

Tailwind جهزلك breakpoints جاهزين مبنيين على mobile-first design.
يعني الكلاسات اللي بتكتبها بتتطبق دايما على الموبايل الأول وبعدها بتقدر تزود سلوك مختلف للشاشات الأكبر

الـ breakpoints الافتراضية:

sm = min-width: 640px
md = min-width: 768px
lg = min-width: 1024px
xl = min-width: 1280px
2xl = min-width: 1536px

إزاي تستخدمهم؟

كل breakpoint بتكتبه قبل الكلاس اللي عاوز يشتغل عليه.

<div className="text-sm md:text-base lg:text-lg xl:text-xl"> Responsive Text </div>

📱 على الموبايل = text-sm
💻 على التابلت (md) = text-base
🖥️ على اللابتوب (lg) = text-lg
🖥️+ على الشاشات الكبيرة (xl) = text-xl

مثال عملي: Grid Responsive

خلي بالك من دي لأنها من أكتر الحاجات اللي هتستخدمها:

موبايل = عمود واحد
تابلت = عمودين
لابتوب = 3 أعمدة
شاشة كبيرة = 4 أعمدة

مثال عملي: Hide & Show

Tailwind مديك أدوات إنك تخفي أو تظهر عناصر على شاشات معينة بسهولة:

<p className="block md:hidden">أنا ظاهر بس على الموبايل</p> <p className="hidden md:block">أنا ظاهر من أول الـ md وفوق</p>

تخصص Breakpoints بتاعتك

ممكن تعدل أو تزود breakpoints جديدة من خلال tailwind.config.js:

module.exports = { theme: { extend: {}, screens: { 'xs': '480px', // كسر جديد للموبايل الصغير ...defaultTheme.screens, }, }, }

الخلاصه:

Tailwind مبني mobile-first.
كل breakpoint بتضيفه قبل الكلاس.
تقدر تتحكم في الـ layout، الـ text، الألوان… أي حاجة بالـ responsiveness.
تقدر تعدل أو تزود breakpoints على مزاجك

✍️ كدا خلصنا أول درس في المستوى التاني: إزاي نخلي الموقع Responsive من غير ما نكتب media queries يدوي.
في الدرس الجاي هندخل على Pseudo Classes (Hover, Focus, Active, Group, Peer) 👀