[Tailwind] Style Elements on hover and focus with Tailwind’s State Variants

In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered.

 

  <p class="mb-4">
    I am a <a class="text-purple hover:text-orange focus:bg-yellow" href="#">text link</a>.
  </p>
  <button class="block w-full py-2 px-4 rounded-sm mb-2 text-white bg-purple-light hover:bg-black" tabindex="0">
    Click me
  </button>