Interaction States
Pyyhkäise näyttääksesi valikon
Tailwind provides utility classes to style elements based on user interaction.
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.
Disabled State
<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.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Interaction States
Tailwind provides utility classes to style elements based on user interaction.
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.
Disabled State
<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.
Kiitos palautteestasi!
