The update with Angular 19 fails

[rudyhadoux]

I upgrade to v4 but a lot of errors like this
✘ [ERROR] Cannot apply unknown utility class: py-0.5 [plugin angular-sass]

node_modules/tailwindcss/dist/lib.js:17:296:
  17 │ ...r,{onInvalidCandidate:x=>{throw new Error(`Cannot apply unknown...
     ╵                                    ^

at onInvalidCandidate

[wongjn]

Perhaps you need to use the @reference directive somewhere?

[rudyhadoux]

It is very strange because it works sometimes and sometimes not.
It fails for usual css classes...
Very strange.

[philipp-spiess]

Hey! It seems like you're using @apply in something like a CSS modules file without pointing it to a Tailwind CSS theme. In that case the compiler will not know how to resolve certain values (e.g. spacing values) since no --spacing var is defined. As @wongjn you will have to add @reference '../path/to/your/tailwind/config.css'; to the files using @apply.

See #15778 for more infos. Thanks!

[rudyhadoux]

It is not the main problem. ANGULAR 19 and TAILWINCSS 4 fail together ABSOLUTELY.
And an Angular Tailwindcss issue is still opened.
angular/angular-cli#28938

[rudyhadoux]

I use Tailwindcss for a long time and I never had problem with @apply.

[philipp-spiess]

@rudyhadoux Tailwind CSS v4 is not supported by the Angular CLI yet. It works if you do npm install with the --force flag but you will get a dependency error when you install it without --force. That's what the linked Angular CLI issue is about.

@apply changed behavior in v4 and you will have to add a @reference now to point it to your CSS config, see: https://tailwindcss.com/docs/functions-and-directives#reference-directive This is changed behavior in v4, that's why you haven't had issues with it before.

[rudyhadoux]

OK thanks, I am going to try with @reference "tailwindcss";
It would be nice if this could be taken care of automatically.

[rudyhadoux]

With Angular there is no use of <style></style>.
Every css or scss is in styles.scss or in component.scss.

[rudyhadoux]

If I set @reference "tailwindcss", it fails too...

Application bundle generation failed. [4.415 seconds]

✘ [ERROR] Cannot apply unknown utility class: bg-opacity-50 [plugin angular-sass]

node_modules/tailwindcss/dist/lib.js:17:296:
  17 │ ...r,{onInvalidCandidate:x=>{throw new Error(`Cannot apply unknown...

[philipp-spiess]

@rudyhadoux bg-opacity-* classes no longer exist in v4, please refer to the upgrade guide for more info: https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities

[rudyhadoux]

=> It seems that class does not exist any more indeed.
Sorry.

[sheikalthaf]

There is one strange behaviour i'm facing in Angular v19 and tailwind v4. default styles take priority then the tailwind css styles.

/* You can add global styles to this file, and also import other style files */
@use "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
  --color-primary: oklch(0.72 0.11 178);
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
}

.dark {
  --color-primary: red;
}

<a class="text-primary" href="/">Home</a>
<a class="text-primary" href="/about">About</a>

as you can see in the image that the text-primary is not applied as default color is used.

How to fix this issue?

[rudyhadoux]

I don't use @theme.

I use in styles.scss
@use "tailwindcss";

And
@register "tailwindcss";
For css components.

Maybe @philipp-spiess can help you...

[rudyhadoux]

@philipp-spiess it seems that Tailwind CSS IntelliSense does not work with v4 ?
Very useful extension...