Resize

📌 مفهوم

  • Resize مشخص می‌کند که آیا یک عنصر قابل تغییر اندازه توسط کاربر است یا نه.

  • معمولاً برای عناصر textarea یا div قابل تغییر استفاده می‌شود.

📑 کلاس‌های Tailwind

کلاستوضیح
resize-noneعنصر غیرقابل تغییر اندازه است (غیرفعال)
resizeاجازه تغییر اندازه به صورت پیش‌فرض (هر دو جهت)
resize-xفقط امکان تغییر اندازه در افقی (X) وجود دارد
resize-yفقط امکان تغییر اندازه در عمودی (Y) وجود دارد
resize-autoرفتار پیش‌فرض مرورگر را برای تغییر اندازه اعمال می‌کند

📌 مثال

<textarea class="resize-none border p-2">
  نمی‌توانم اندازه‌ام را تغییر دهید
</textarea>

<textarea class="resize-y border p-2 mt-4">
  فقط می‌توانم ارتفاعم را تغییر دهم
</textarea>

<textarea class="resize border p-2 mt-4">
  می‌توانم عرض و ارتفاعم را تغییر دهم
</textarea>

  • textarea اول غیرقابل تغییر است.

  • textarea دوم فقط ارتفاعش قابل تغییر است.

  • textarea سوم هم عرض و هم ارتفاعش قابل تغییر است.

📌 نکات

  • استفاده از resize همراه با overflow-auto معمولاً بهتر است تا محتوا به هم نریزد.

  • عناصر غیر فرم (مثل div) معمولاً با تغییر اندازه توسط کاربر کار نمی‌کنند مگر CSS مخصوص اعمال شود.