📱 مفهوم Responsive در Tailwind

✔️ Tailwind به‌صورت Mobile First طراحی شده
• استایل پایه → موبایل
• استایل‌های بزرگ‌تر → با breakpointها

📐 Breakpointهای پیش‌فرض Tailwind 3.4

✔️ Breakpointها داخل Media Query تعریف شده‌اند:

• sm → ≥ 640px
• md → ≥ 768px
• lg → ≥ 1024px
• xl → ≥ 1280px
• 2xl → ≥ 1536px

📌 استفاده:
• md:text-center
• lg:flex
• xl:grid-cols-4

✔️ ساختار کلی:
• breakpoint:utility

🔹 مثال مفهومی:
• md:bg-red-500
• lg:text-lg
• xl:hidden

📌 نکته:
• ترتیب breakpoint مهم نیست
• مرورگر خودش شرط را بررسی می‌کند

✔️ مسیر تنظیم:
• tailwind.config.js
• بخش theme.screens

🔹 امکان‌ها:
• تغییر مقدار breakpointها
• اضافه کردن breakpoint جدید
• حذف breakpointهای پیش‌فرض

📌 مثال کاربردی:
• تعریف breakpoint مخصوص لپ‌تاپ
• breakpoint سفارشی برای مانیتور بزرگ

✔️ می‌توان breakpoint دلخواه ساخت:
• اسم دلخواه
• مقدار دلخواه (px, em, rem)

📌 کاربرد:
• طراحی خاص برای دستگاه‌های خاص
• کنترل دقیق Responsive

✔️ اگر breakpoint هم‌نام تعریف شود:
• مقدار پیش‌فرض Override می‌شود

✔️ امکان تعریف breakpoint معکوس:
• فقط تا یک اندازه خاص

📌 کاربرد:
• استایل مخصوص موبایل
• محدود کردن نمایش در سایز خاص