[Tailwind] Extending Tailwind with Responsive Custom Utility Classes

          <section>
            <div>
              <h2 class="banana hover:chocolate">
                some text here
              </h2>
            </div>
          </section>

  @variants hover, focus {
    .banana {
      color: yellow;
    }
    .chocolate {
      color: brown;
    }
  }

.banana {
  color: yellow;
}
.chocolate {
  color: brown;
}
.focus\:banana:focus {
  color: yellow;
}
.focus\:chocolate:focus {
  color: brown;
}
.hover\:banana:hover {
  color: yellow;
}
.hover\:chocolate:hover {
  color: brown;
}