[Tailwind] Extending Tailwind with Responsive Custom Utility Classes

You are able to extend the custom css with hover, focus, group-hover, responsive variants class in tailwind.

https://tailwindcss.com/docs/functions-and-directives/#variants

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

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

 

Tailwind will generate css for you:

.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;
}