📌 place-items (در Tailwind / CSS Grid)

● place-items مخصوص Grid هست (روی Flex اثری نداره)
● ترکیب دو مفهوم مهمه:

• align-items (عمودی)
• justify-items (افقی)

● کاربرد اصلی:

• سنتر کردن محتوا همزمان افقی + عمودی
• خیلی تمیزتر و کوتاه‌تر از نوشتن دوتا کلاس جدا

● کلاس‌های مهم:

• place-items-center ⭐ (پرکاربردترین)
• place-items-start
• place-items-end
• place-items-stretch

● نکته مهم:

• فقط روی container هایی که grid هستن کار می‌کنه

   

📌 group (در Tailwind)

● group برای زمانی استفاده می‌شه که:

• hover روی parent
• ولی افکت روی child اعمال بشه

● بدون group:

• hover: فقط روی خود المان کار می‌کنه

● با group:

• hover والد → تغییر فرزند

● ساختار استاندارد:

<div class="group">
  <span class="group-hover:scale-150"></span>
</div>

📌 تفاوت group با CSS خالص

● CSS خالص:

div:hover > span { ... }

● Tailwind:

• selector نمی‌نویسه
• رفتار رو داخل کلاس‌ها نگه می‌داره
• refactor امن‌تر
• خوانایی HTML بیشتر

● Tailwind فلسفه‌اش:

• Utility-first
• نه Selector-first

📌 نکات حرفه‌ای و کاربردی

● group ترتیب DOM رو عوض نمی‌کنه
● group فقط trigger hover رو منتقل می‌کنه
● برای hover پیچیده روی کارت‌ها، منوها، dropdownها عالیه
● اگر فقط روی خود المان افکت داری → hover: کافیه
● اگر hover والد مهمه → group لازمه ⭐

🧠 جمع‌بندی سریع

✔️ place-items → سنتر سریع محتوا در Grid
✔️ group → hover والد، افکت روی فرزند
✔️ hover خالی ≠ group-hover
✔️ Tailwind به‌جای selector، رفتار رو میاره توی HTML