0

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.

Yusuf Ipek
  • 166
  • 1
  • 11
  • 2
    I'm using a project with tailwind and my styles do get recompiled when the html changes. I'm not sure if i did anything specific to make that happen. What tailwind version are you using? In your `tailwind.config.js`, do you have `*.html` listed in your `content` field? – BizzyBob Dec 28 '22 at 16:53
  • My tailwindcss version is 3.2.4. Yes I have *.html in the content field. Interesting is when I import tailwind base, components and utilities into styles.scss, it works without any problems. The reason is probably that styles.scss is always compiled, but the component scss file is not. – Yusuf Ipek Dec 29 '22 at 07:28
  • I added a code example, when I change for example the class **text-5xl** to **text-6xl** then it doesn't work, only when I go to app.component.scss and save it, then the change works. – Yusuf Ipek Dec 29 '22 at 07:34

0 Answers0