Tailwind JIT not updating styles when using styleUrls
- Lenguaje dominante
- TypeScript
- Estrellas
- 27k
- Forks
- 11.8k
- Merge medio
- 14 h 23 min
- PR fusionados (30 d)
- 162
Descripción
### Command
serve
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
When using `styleUrls` to specify the path to the tailwind css entrypoint file separately, the JIT will not detect changes properly.
To clarify:
```ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss', '../tailwind.css'] // notice tailwind is separated here
})
```
Now if I try to use any class that is not already used in the HTML, the changes will not propagate properly. Only killing `ng serve` and restarting it will work.
I have attached a simple repro.
### Minimal Reproduction
Repro at:
https://github.com/andreialecu/angular-tw-jit-repro
Run
```
yarn
yarn start
```
Open `http://localhost:4200/` in the browser.
Then go into `app.component.html` and try to change `bg-green-200` to `bg-red-200`, you will see that the background disappears because `bg-red-200` does not exist.
If you ctrl+c then run `yarn start` again, the background will update.
### Exception or Error
_No response_
### Your Environment
```text
Angular CLI: 13.3.10
Node: 16.14.2
Package Manager: yarn 1.22.19
OS: darwin arm64
Angular: 13.3.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1303.10
@angular-devkit/build-angular 13.3.10
@angular-devkit/core 13.3.10
@angular-devkit/schematics 13.3.10
@angular/cli 13.3.10
@schematics/angular 13.3.10
rxjs 7.5.7
typescript 4.6.4
```
### Anything else relevant?
Possibly related:
https://github.com/angular/angular-cli/issues/21749
https://stackoverflow.com/a/73446036
Guía de contribución
Línea de trabajo
Comienza con la reproducción mínima enlazada: ejecuta yarn y después yarn start, y edita app.component.html mientras tailwind.css aparece por separado en styleUrls. Observa el estilo de fondo generado antes y después de reiniciar el proceso de serve. Está terminado cuando cambiar una clase de Tailwind que antes no se utilizaba actualiza los estilos servidos sin reiniciar.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, tailwindcss, typescript
- Área
- build-system, frontend
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 45/100