🔹 Visibility چیه؟

ویژگی visibility در CSS مشخص می‌کنه که یک المان دیده بشه یا نه.
برخلاف display: none، وقتی المان invisible میشه، هنوز فضا و جای خودش رو توی صفحه نگه می‌داره.

🔹 کلاس‌های Visibility در Tailwind

• visible → المان دیده میشه (پیش‌فرض).

• invisible → المان مخفی میشه ولی فضای خودش رو نگه می‌داره.

• collapse → برای ردیف‌ها/ستون‌های جدول استفاده میشه (ردیف یا ستون حذف میشه).

🔹 مثال (visible vs invisible)

<div class="space-y-2">
  <div class="visible bg-green-300 p-2">این المان دیده میشه ✅</div>
  <div class="invisible bg-red-300 p-2">این المان مخفی هست ❌</div>
  <div class="bg-blue-300 p-2">این المان بعدی</div>
</div>

📌 در حالت invisible، متن قرمز دیده نمیشه ولی فاصله‌اش باقی می‌مونه.

🔹 مثال (collapse در جدول)

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border p-2">ردیف ۱</td>
  </tr>
  <tr class="collapse">
    <td class="border p-2">ردیف ۲ (collapse)</td>
  </tr>
  <tr>
    <td class="border p-2">ردیف ۳</td>
  </tr>
</table>

📌 collapse باعث میشه ردیف وسطی کاملاً ناپدید بشه و جاش هم گرفته نشه.

🔹 نکته مهم

• از invisible وقتی استفاده میشه که بخوای چیزی مخفی باشه ولی layout بهم نریزه.

• اگه بخوای هم مخفی بشه و هم جاش خالی نمونه، باید از hidden یا display: none استفاده کنی (در Tailwind کلاس hidden).

• برای جدول‌ها collapse خیلی کاربردیه.