📌 مفهوم

• appearance یک خاصیت CSS است که تعیین می‌کند چطور مرورگر، ظاهر پیش‌فرض یک عنصر فرم (input, button, select, ...) را رندر کند.

• Tailwind CSS کلاس‌های آماده برای کنترل appearance ارائه می‌دهد.

📑 کلاس‌های Tailwind

🔹 استفاده اصلی: وقتی می‌خوای custom input یا button بسازی و نمی‌خوای سبک پیش‌فرض مرورگر نمایش داده شود، appearance-none را می‌گذاری.

📌 مثال ساده

<input type="text" class="appearance-none border rounded p-2">

• appearance-none → ظاهر مرورگر حذف می‌شود

• border rounded p-2 → حالا می‌توانی ظاهر فرم را کاملاً شخصی‌سازی کنی

📌 مثال برای select

<select class="appearance-none bg-white border p-2 rounded">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

• ظاهر پیش‌فرض فلش select حذف شد و می‌توانیم با Tailwind CSS استایل دلخواه اضافه کنیم.

✨ نتیجه: appearance در Tailwind CSS باعث می‌شود عناصر فرم کاملاً قابل شخصی‌سازی باشند و سبک‌های پیش‌فرض مرورگر مزاحم طراحی نشوند.