🔹 چرا Stateها مهمن؟

وقتی با کاربر تعامل داری (مثل وقتی روی دکمه میره، یا کلیک می‌کنه)، باید ظاهر المان تغییر کنه.
Stateها (مثل hover, focus, active, disabled و …) برای همین کار هستن.

🔹 ساختار کلی در Tailwind

در Tailwind فقط کافیه قبل از Utility اصلی، State رو بنویسی:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

📌 اینجا وقتی ماوس روی دکمه بره (hover)، رنگ پس‌زمینه از آبی روشن به آبی تیره تغییر می‌کنه.

🔹 مثال با Focus

<input class="border-2 border-gray-300 focus:border-blue-500 rounded px-3 py-2" placeholder="Enter text">

✅ وقتی روی Input کلیک کنی (Focus)، رنگ Border تغییر می‌کنه.

🔹 مثال با Active و Disabled

<button class="bg-green-500 active:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded" disabled>
  Submit
</button>

📌 این دکمه وقتی فعال (active) میشه رنگش تغییر می‌کنه، و وقتی غیرفعال (disabled) باشه نصفه شفاف میشه و کلیک‌پذیر نیست.

🔹 مثال چند State همزمان

<a class="text-gray-600 hover:text-blue-600 focus:text-red-600 visited:text-purple-600" href="#">
  Link Example
</a>

✅ تغییر رنگ لینک بر اساس:

• Hover → آبی

• Focus → قرمز

• Visited → بنفش

🔹 نکته مهم

• ترتیب نوشتن مهمه: state:utility

• می‌تونی چند State رو با هم ترکیب کنی.

• Tailwind تقریباً همه‌ی Pseudo-classها رو پشتیبانی می‌کنه (hover, focus, active, visited, disabled و …).