Responsive modifiers for components not working in tailwind 4

[KonstantinVlasov]

What version of Tailwind CSS are you using?
v4.1.7

Describe your issue
Hi! Thank you for your big work with tailwind 4.

We have a problem with responsive modifiers for our components using tailwind 4.
Example usage: <div class="button is-small sm:is-big">example</div>

With tailwind 3 it's very easy to implement:

@layer components {
    .button {
        @apply h-10;
        &.is-small { @apply h-8; }
        &.is-big { @apply h-12; }
    }
}

How we can achive this using tailwind 4? @utility don't working as expected

[wongjn]

You could do something like:

@layer components {
  .button {
    @apply h-10;
    &.is-small { @apply h-8; }
}

@utility is-big {
  @layer components {
    &.button {
      @apply h-12;
    }
  }
}