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.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 8

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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>