nested scss is not working with angular 18 with tailwind

I am trying to get nested scss to work but can't with angular. Can someone take a look at my sample repo?

Here is my scss and I am expecting my card to have a green background.

SCSS

.card {
    @apply flex flex-col bg-neutral-700 border shadow-sm rounded-xl p-4 md:p-5 m-1 md:m-3 text-white;

    .primary {
        @apply bg-green-500;
    }

    .card-body {
        @apply flex flex-col -m-1.5 overflow-x-auto p-1.5 min-w-full align-middle overflow-hidden;
    }
}

HTML

<div class="card primary">  
  <div class="card-body">
      I should be green background
  </div>

</div>

https://github.com/rontran/angular-nested/tree/main

Currently your SCSS converted to CSS is

.card {}
.card .primary {}
.card .card-body {}

You need to use the & operator to say "copy the content of the parent into this selector" :

.card {
  &.primary {}
  .card-body {}
}

That then gives

.card {}
.card.primary {}
.card .card-body {}