Hover State

<button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Hover me
</button>

hover:bg-blue-700: changes background on hover.

Focus State

<input className="border p-2 focus:border-blue-500 outline-none" />

focus:border-blue-500: changes border when focused.

<button className="bg-gray-400 text-white px-4 py-2 rounded disabled:opacity-50" disabled>
  Disabled
</button>

disabled:opacity-50: reduces opacity when disabled.

Use state prefixes like hover:, focus:, and disabled: to style interactive elements.

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 8

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Tailwind provides utility classes to style elements based on user interaction.

<button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
  Hover me
</button>