The double, nested @responsive problem. Is there any way to solve?

[gremo]

I'm trying to solve a "double, nested" @responsive problem. Here is it:

@responsive {
  /* row flex layout, nothing special but with wrapping */
  .flex-x {
    @apply flex flex-wrap;
  }

  /* horizontal center for row flex layout */
  .flex-x.flex-x-center {
    @apply justify-center;
  }

  /* vertical center for row flex layout */
  .flex-x.flex-y-center {
    @apply items-center;
  }
}

The above code generate an utility class .flex-x along with responsive variants like .md:flex-x. The other two classes are just "shortcuts" to center items, only when the .flex-x class is present and at specific breakpoints. This is working fine without the responsive behavior:

<!-- the teal box is centered both vertically and horizontally -->
<div class="flex-x flex-x-center flex-y-center" style="height: 400px">
  <div class="h-24 w-24 bg-teal-700"></div>
</div>

The problem is when using breakpoints:

<!-- not working! -->
<div class="md:flex-x md:flex-x-center md:flex-y-center" style="height: 400px">
  <div class="h-24 w-24 bg-teal-700"></div>
</div>

This is not working because .md:flex-x-center will be applied only with the .flex-x class, but not when .md-flex-x class is present.

Seems I need to generate all the possible responsive combinations between .flex-x and .flex-x-center. Is there any option to to something like this?