Classes in the @layer 'components' override utility classes

[ofreivogel]

Hi dear community
I have an angular 19 project. I have migrated from v3 to v4. In v4 my custom button classes in the component layer have higher priority than the styling in the utility classes in the final build:

When I use the development mode of angular the priority of the styles is correct. Someone has an idea how to fix it?

Here my css:

@import 'tailwindcss';

@layer components {
  .btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-left: --spacing(2);
    padding-right: --spacing(2);
    border-radius: calc(infinity * 1px);
    color: var(--color-black);
    background-color: var(--color-neutral-50);
    &:enabled {
      &:hover,
      :active {
        @apply brightness-90;
      }
    }
  }

  .btn-filled {
    padding-left: --spacing(2);
    padding-right: --spacing(2);
    border-radius: calc(infinity * 1px);
    color: var(--color-white);
    background-color: var(--color-lime-600);
    border: 1px solid var(--color-lime-600);
    &:enabled {
      &:hover {
        background-color: var(--color-lime-700);
        border-color: var(--color-lime-700);
      }
      &:active {
        background-color: var(--color-lime-500);
        border-color: var(--color-lime-500);
      }
    }
  }

  .btn-outlined {
    padding-left: --spacing(2);
    padding-right: --spacing(2);
    border-radius: calc(infinity * 1px);
    color: var(--color-lime-700);
    background-color: inherit;
    border: 1px solid var(--color-lime-700);
    &:enabled {
      &:hover {
        background-color: --alpha(var(--color-lime-500) / 0.10);
      }
      &:active {
        background-color: --alpha(var(--color-lime-500) / 0.20);
        border-color: var(--color-lime-400);
        color: var(--color-lime-600);
      }
    }
  }
}
/* ... base layer */

[ofreivogel]

update: the problem seems to be, that in the final css, the layer "base" gets duplicated (the base from tailwind and my base declaration) and therefor the browsers (tested with safari, firefox and chrome) do not interpret the layer priority declaration @layer theme,base,components,utilities; correctly.