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

Responsive Design

Container Query و Breakpoint سفارشی

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

محتوای درس Container Query و Breakpoint سفارشی

Container Query و 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="@container rounded-xl border p-4">
  <article class="flex flex-col gap-4 @md:flex-row">
    <img class="h-40 w-full rounded-lg object-cover @md:w-48" src="/cover.webp" alt="" />
    <div class="grow">محتوای کارت</div>
  </article>
</div>

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

کارت بر اساس عرض Container از ستونی به افقی تبدیل می‌شود.

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

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

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

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

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