Hover, Focus, Active, Visited in Tailwind CSS

1. Hover State

Use hover: to style elements when hovered:

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

2. Focus State

Use focus: to style focused form elements:

3. Active State

Use active: for when an element is pressed:

4. Visited State

Use visited: to change the style of links after visiting:

5. Best Practices

• Use focus: styles for accessibility and keyboard navigation.
• hover: helps indicate interactivity on buttons and links.
• active: provides tactile feedback.
• Don't rely only on color for state indication — add icons, shadows, etc.

Conclusion

Tailwind makes it easy to apply interactive states through simple prefixes. With consistent use of hover:, focus:, active:, and visited:, you can enhance user interaction and accessibility.