`@apply` cannot be used with either cannot be found, or its actual definition includes a pseudo-selector like

/* Hey! This is explained here in the docs: */

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

/* It's important to understand that @apply will not work
 for inlining pseudo-class or responsive variants of another utility.
 Instead, apply the plain version of that utility into the appropriate
 pseudo-selector or a new media query: */

/* Won't work: */
.btn {
  @apply block bg-red-500;
  @apply hover:bg-blue-500;
  @apply md:inline-block;
}

/* Do this instead: */
.btn {
  @apply block bg-red-500;
}
.btn:hover {
  @apply bg-blue-500;
}
@screen md {
  .btn {
    @apply inline-block;
  }
}