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.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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.
Дякуємо за ваш відгук!
