[V4.1] Angular - SCSS - HMR not working with imported scss files.

[nawlbergs]

What version of Tailwind CSS are you using?

4.1.8

What build tool (or framework if it abstracts the build tool) are you using?

Angular (VITE) "@angular/build:application",

What version of Node.js are you using?

20.19.2

What browser are you using?

Chrome (latest)

What operating system are you using?

MacOs

Reproduction URL

Describe your issue

Have an angular project going with tailwind. needed to add scss. now HMR will not work correctly for any imported styles sheets.

HMR works again if I comment out @import "tailwindcss";
Reverting to css also makes HMR work again.

Bare-bones repo url attached. Two-branches...

• main branch: has the scss broken version.
• css-only: non-scss version that seems to work fine.

I also crated the issue over on the angular repo

I will also be posting this in the angular issues forum as Im not sure who needs to look at this:
https://github.com/angular/angular/issues/61906

[wongjn]

Tailwind isn't built to be used with Sass. As per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

[nawlbergs]

@wongjn Thanks for the quick response!
Could the install guide call that out better?
HMR is recently new to angular and this will certainly wreck some peoples day when stumble onto this. It took me several hours of farting around... made a test repo etc etc..

Maybe a big red danger alert component on: https://tailwindcss.com/docs/installation/framework-guides/angular. about HMR not playing nice with scss?

My project just needed scss to setup the angular material theme... so keeping everything css... and just using scss when you need it seems to work fine.

@import "./../../../libs/js-core/styles/core-styles.css";   // <!--- still works fine
@import "./../../../libs/ng-core/features/material/material.theme.scss";  // <!--- HMR broke :(

[Vika142]

I guess I ahve same issue. All was ok on v19, once I updated - each time I change something in cmp, I have to rerun app