States

There is a hover, focus, & active state for all the utility classes in this library.

Usage examples:

Hover:

<h1 class="font-6xl text-black-100 hover:text-gray-300 transition-1">
  My New App
</h1>

Focus:

<button type="submit" class="focus:font-bld uppercase">Click Me</button>

Active:

<p>
  Please visit
  <a
    href="https://www.mycoolwebsite.com"
    class="active:scale-110 active:text-red-400"
    >my cool website.</a
  >
</p>

Simply append hover, focus, or active to the front of any class using a colon ":" character to style each state accordingly.

Effects & Animations