🔹 Screens توی Tailwind چیه؟

Screens همون breakpoints هستن (نقاط شکست برای طراحی ریسپانسیو).
به صورت پیش‌فرض اینا توی Tailwind وجود دارن:

// پیش‌فرض
{
  sm: "640px",   // موبایل بزرگ
  md: "768px",   // تبلت
  lg: "1024px",  // لپ‌تاپ
  xl: "1280px",  // دسکتاپ بزرگ
  "2xl": "1536px", // نمایشگر خیلی بزرگ
}

📌 مثال استفاده:

<div class="text-base md:text-lg lg:text-xl">
  متن با سایز متفاوت در صفحه‌های مختلف
</div>

🔹 اضافه کردن Breakpoint جدید

می‌تونی breakpoint جدید تعریف کنی:

module.exports = {
  theme: {
    extend: {
      screens: {
        xs: "480px",   // موبایل خیلی کوچک
        "3xl": "1920px", // مانیتور خیلی بزرگ
      },
    },
  },
}

📌 استفاده:

<p class="text-sm xs:text-base 3xl:text-2xl">
  متن در سایزهای مختلف
</p>

🔹 Breakpoints شرطی (max-width)

Tailwind به صورت پیش‌فرض min-width هست (یعنی از اون سایز به بالا).
اما می‌تونی max-width هم بسازی:

module.exports = {
  theme: {
    extend: {
      screens: {
        "max-md": { max: "768px" }, // فقط برای کوچکتر از 768px
      },
    },
  },
}

📌 استفاده:

<div class="bg-blue-500 max-md:bg-red-500">
  رنگ قرمز میشه وقتی صفحه کوچیک‌تر از 768px باشه
</div>

🔹 ترکیب min و max

می‌تونی بازه (Range) هم تعریف کنی:

module.exports = {
  theme: {
    extend: {
      screens: {
        tablet: { min: "640px", max: "1023px" },
      },
    },
  },
}

📌 استفاده:

<div class="bg-green-500 tablet:bg-yellow-500">
  فقط بین 640px تا 1023px زرد میشه
</div>

🔹 نکته مهم

• پیش‌فرض min-width هست (mobile-first).

• با { max: "..." } می‌تونی max-width بسازی.

• با { min: "...", max: "..." } بازه مشخص می‌کنی.

• می‌تونی هر تعداد breakpoint دلخواه اضافه کنی.