🔹 چرا Responsive Design مهمه؟

امروزه کاربرا با دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) وارد سایت میشن.
طراحی واکنش‌گرا باعث میشه ظاهر سایت در هر اندازه صفحه درست نمایش داده بشه.

🔹 سیستم Breakpoints در Tailwind

Tailwind یک سری پیش‌فرض breakpoint داره:

• sm → ≥ 640px

• md → ≥ 768px

• lg → ≥ 1024px

• xl → ≥ 1280px

• 2xl → ≥ 1536px

📌 هر کلاس وقتی با Prefix این Breakpointها بیاد، فقط در اون اندازه و بالاتر فعال میشه.

🔹 مثال ساده

<div class="text-base md:text-lg lg:text-xl">
  متن واکنش‌گرا
</div>

✅ در موبایل → text-base
✅ در تبلت → text-lg
✅ در دسکتاپ → text-xl

🔹 طراحی Layout واکنش‌گرا

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4">ستون ۱</div>
  <div class="bg-green-200 p-4">ستون ۲</div>
  <div class="bg-red-200 p-4">ستون ۳</div>
</div>

📌

• در موبایل → یک ستون

• در تبلت → دو ستون

• در دسکتاپ → سه ستون

🔹 مثال در دکمه‌ها

<button class="bg-blue-500 text-white px-2 py-1 sm:px-4 sm:py-2 md:px-6 md:py-3 rounded">
  Button
</button>

✅ دکمه در صفحه‌های بزرگ‌تر بزرگ‌تر و راحت‌تر میشه.

🔹 نکته مهم

• Tailwind از Mobile First استفاده می‌کنه → یعنی استایل پیش‌فرض برای موبایل تعریف میشه و بعد کم‌کم برای سایزهای بزرگ‌تر تغییر می‌دی.

• هر Utility رو می‌تونی با Prefix مربوط به breakpoint تغییر بدی.

• با همین سیستم می‌تونی همه‌ی بخش‌های سایت رو واکنش‌گرا کنی.