Angular compile scss on html change

Question

I want to know if there is a way to tell the Angular compiler to compile a components style file when the template file is modified?

For example, when I change app.component.html then app.component.scss should also be compiled.

The reason is, I want to use tailwind in a component which set its encapsulation to ViewEncapsulation.ShadowDom, so when I set a new tailwind class in my app.component.html then nothing happens until I also save my app.component.scss file which contains my tailwind imports.

Code example

app.component.html

<div class="text-5xl">Hello World</div>

app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class AppComponent {
  title = 'Test';
}

app.component.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

I looked up if there is a flag which can be set in angular.json or tsconfig.json and I found the flag allowEmptyCodegenFiles, but it didn't work. Maybe it can be done through webpack, but my webpack knowledge is very limited.