`@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;
}
}