Handling Hover,Focus and Other States

• Using utilities to style elements on hover, focus, and more.

• Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.

• For example, to apply the bg-sky-700 class on hover, use the hover:bg-sky-700 class:

Example 1:

<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>

Traditional CSS

.btn-primary {
  background-color: #0ea5e9;
}
.btn-primary:hover {
  background-color: #0369a1;
}

Pseudo classes - Hover, focus and active

• Style elements on hover, focus, and active using the hover, focus, and active modifiers:

• Tailwind also includes modifiers for other interactive states like :visited, :focus-within, :focus-visible, and more.

Reference

https://tailwindcss.com/docs/hover-focus-and-other-states