🔹 Display چیه؟

خاصیت display در CSS مشخص می‌کنه که یک المان چطور در صفحه نمایش داده بشه (block, inline, flex و …).
Tailwind همه‌ی حالت‌های مهم رو به صورت کلاس آماده داره.

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

🟦 حالت‌های پایه

• block → عنصر به صورت بلوکی (کل عرض رو می‌گیره)

• inline → عنصر به صورت خطی (کنار بقیه عناصر میاد)

• inline-block → ترکیب inline و block (کنار عناصر ولی می‌تونی width/height بدی)

• hidden → مخفی کردن عنصر (کلاً نمایش داده نمیشه)

🟩 حالت‌های Layout

• flex → فعال کردن Flexbox

• inline-flex → Flexbox خطی (کنار بقیه عناصر)

• grid → فعال کردن Grid Layout

• inline-grid → Grid خطی (کنار بقیه عناصر)

🟨 حالت‌های خاص

• contents → فقط فرزندان عنصر نشون داده میشن (خود عنصر مثل اینکه وجود نداره)

• table → مثل جدول HTML

• inline-table → جدول خطی

• table-row, table-cell, table-caption, table-column → حالت‌های جزئی جدول

🔹 مثال (block vs inline vs inline-block)

<div class="space-y-2">
  <span class="block bg-blue-200">block</span>
  <span class="inline bg-green-200">inline</span>
  <span class="inline-block bg-pink-200 w-24">inline-block</span>
</div>

🔹 مثال (flex و grid)

<div class="flex space-x-2 bg-gray-200 p-2">
  <div class="bg-blue-300 p-2">۱</div>
  <div class="bg-blue-300 p-2">۲</div>
  <div class="bg-blue-300 p-2">۳</div>
</div>

<div class="grid grid-cols-3 gap-2 bg-gray-200 p-2 mt-4">
  <div class="bg-green-300 p-2">۱</div>
  <div class="bg-green-300 p-2">۲</div>
  <div class="bg-green-300 p-2">۳</div>
</div>

📌 اولی با Flexbox، دومی با Grid ساخته شده.

🔹 مثال (hidden)

<div class="bg-yellow-200 p-2">این بخش دیده میشه</div>
<div class="hidden bg-red-200 p-2">این بخش مخفی شده</div>

🔹 نکته مهم

• hidden عنصر رو کلاً از صفحه حذف می‌کنه (نه مثل opacity یا visibility).

• بیشتر مواقع برای layout از flex و grid استفاده میشه.

• Tailwind برای responsive design هم اجازه میده display رو تغییر بدی:

  • md:flex → فقط از سایز md به بالا flex بشه

  • lg:hidden → از سایز lg به بالا مخفی بشه