Tailwind JIT not updating styles when using styleUrls

Offen

#24,469 erstellt am 27.12.2022 6 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 4/5
Geschätzter Aufwand: 3-5 Tage
Anfängerfreundlichkeit: 45/100

Issue-Typ: Bug
Klarheit: Größtenteils klar
Aktivitätsstatus: Veraltet
Tech-Stack: angular, tailwindcss, typescript
Bereich: build-system, frontend

Rechercherichtung

Beginne mit der verlinkten minimalen Reproduktion: Führe yarn und anschließend yarn start aus und bearbeite app.component.html, während tailwind.css separat in styleUrls aufgeführt ist. Beobachte den generierten Hintergrundstil vor und nach dem Neustart des serve-Prozesses. Erledigt ist es, wenn das Ändern einer zuvor nicht verwendeten Tailwind-Klasse die bereitgestellten Styles ohne Neustart aktualisiert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area: @ngtools/webpack freq1: low severity3: broken type: bug/fix

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:

@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

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

Vorherrschende Sprache: TypeScript
Sterne: 27k
Forks: 11.8k
Ø Merge: 17 Std. 25 Min.
Gemergte PRs (30 T.): 183

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/angular-cli

Can't use an array of hostnames in --allowedHosts cli parameter in @angular/build:dev-server Offen

area: @angular/build gemini-triaged

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 74/100

angular/angular-cli#33955 · Erstellt am 28.8.2026
Allow tests to pass without any test files (e.g. via Vitest `passWithNoTests`) Offen

area: @angular/cli gemini-triaged

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100

angular/angular-cli#33055 · 1 Kommentar · 3 Reaktionen · Erstellt am 26.4.2026
library builder: tslib is not added to the output package.json Offen

angular/build:library area: @angular/build gemini-triaged

angular/angular-cli#34131 · 1 zugewiesene Person · Erstellt am 20.9.2026
library builder: a name re-exported through two "export *" paths is dropped from the bundle Offen

angular/build:library area: @angular/build gemini-triaged

angular/angular-cli#34130 · 1 zugewiesene Person · Erstellt am 20.9.2026
library builder: entry points a/b and a-b are built into the same bundle Offen

angular/build:library area: @angular/build gemini-triaged

angular/angular-cli#34128 · 1 zugewiesene Person · Erstellt am 19.9.2026

Alle Issues in angular/angular-cli