فصل 9 از 27 درس 1 از 2

Responsive Design

Mobile-First و Breakpointها

بخشی از آموزش جامع Tailwind CSS

محتوای درس Mobile-First و Breakpointها

Mobile-First و Breakpointها را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Tailwind به‌صورت Mobile-First عمل می‌کند: Utility بدون Prefix حالت پایه است و md یا lg از آن عرض به بالا اعمال می‌شود. Container Query برخلاف Breakpoint به عرض والد Component واکنش نشان می‌دهد.

روش پیاده‌سازی

  1. ابتدا تجربه کامل موبایل را بدون Prefix پیاده کنید.
  2. فقط تغییرهای لازم را در sm، md و lg اضافه کنید.
  3. برای Component مستقل از صفحه از @container و Variantهای @md استفاده کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<div class="flex flex-col gap-6 md:flex-row">
  <aside class="w-full md:w-72">Sidebar</aside>
  <main class="min-w-0 flex-1">Content</main>
</div>

خروجی مورد انتظار

در موبایل ستونی و از md به بالا افقی.

نکات مهم و خطاهای رایج

  • Breakpoint را بر اساس مدل دستگاه انتخاب نکنید؛ شکست واقعی محتوا معیار است.
  • ترتیب Variantها را از کوچک به بزرگ نگه دارید.

تمرین پیشنهادی

مثال را در عرض‌های 320، 768 و 1280 پیکسل و داخل والد باریک بررسی کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS