Hover, Focus & Active Pseudo-Class States

Interactive State Modifiers

In Tailwind, styling any interactive state is as simple as adding a modifier prefix:

<button class="bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 text-white font-bold py-2.5 px-5 rounded-xl shadow-md transition-all">
    Get Started Free
</button>

Group Hover Modifier (group and group-hover:)

Style a child element when hovering over its parent container:

<a href="#" class="group block p-4 bg-slate-900 rounded-2xl hover:bg-indigo-950/40 border border-slate-800 transition-colors">
    <h3 class="text-white group-hover:text-indigo-400 font-bold">PHP Masterclass</h3>
    <p class="text-slate-400 text-xs">Click to read full tutorial &rarr;</p>
</a>