Pseudo classes and @apply

[owzim]

The docs explicitly state that this won't work:

/* 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;
  }
}

My question is why? Is it difficult to implement with many implications I can't think of or is it just against tailwind's philosophy? I think this would be very useful.

[adamwathan]

Just really difficult to implement and haven't had the time to dedicate the 40-80 hours to it that it would take to really do properly.

[adamwathan]

Some discussion about it here, although some of the challenging details still only live in my head:

https://github.com/tailwindcss/tailwindcss/issues/313#issuecomment-423747303

[zaydek]

I’m also looking forward to this functionality but it doesn’t seem like that big of a deal to just use explicit media queries/px for now.

Is my thinking correct that @media (min-width: <px>px) is the only way to support custom logic in media queries right now?