[v4] Problems upgrading in NX Monorepo with Angular to Tailwind 4.0

[eliotis]

After following instructions for the Angular upgrade to Tailwind 4.0 I get a bunch of this:

[ERROR] Cannot apply unknown utility class: bg-white [plugin angular-sass]

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

    at onInvalidCandidate (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:17:297)
    at ee (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:12:116086)
    at /home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:17:260
    at D (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:3:3502)
    at D (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:3:3742)
    at Ce (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:17:150)
    at jr (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:33:800)
    at async Ur (/home/takis/Code/eliotis/node_modules/tailwindcss/dist/lib.js:33:1053)
    at async nt (/home/takis/Code/eliotis/node_modules/@tailwindcss/node/dist/index.js:10:3251)
    at async p (/home/takis/Code/eliotis/node_modules/@tailwindcss/postcss/dist/index.js:8:3200)

  This error came from the "onLoad" callback registered here:

    node_modules/@angular-devkit/build-angular/node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:
      125 │                 build.onLoad({ filter: language.fileFilter, names...

for many utility classes that previously worked fine. I created the .postcssrc.json file as instructed (not building without it) What am I missing?

[wongjn]

Perhaps you need to use the @reference directive?

[eliotis]

Yes @wongjn, I finally realized I had to do add @reference to every single stylesheet including all my connected libs. I thought I could do it with @source in the main css file but couldn't get it to work. Maybe I'll find a better way some day.

[EinfachHans]

Is "some day" already? 😃

[Sieabah]

I think this is the 2nd time tailwind has just ignored upgrading for frameworks. Not everyone can "just use css", especially when you have a ton of ui components already.

Continually these utility frameworks time and time again prove that you can't rely on them if you want to be productive. Every now and then it's "well, just do it this way. I don't care about your use case. No we won't be supporting it". Time to rewrite everything without tailwind!

[cspritchard]

@eliotis Im facing this exact error upgrading my teams Nx repo to use tailwind v4 with Angular 19.

I have installed the necessary packages,
npm install tailwindcss @tailwindcss/postcss postcss

Added the .postcssrc.json to the root of my repo
{ "plugins": { "@tailwindcss/postcss": {} } }

And updated my import in my shared base.scss
@import "tailwindcss";

This is where im facing the error now. How or where does the @reference come in?

[wongjn]

See the documentation on @reference, you need to include it in the CSS blocks where you use @apply.

[cspritchard]

When I add @reference to any of my .scss or component files my IDE highlights it as an unknown rule, so im not sure if its being applied or not.

I am only using @apply in a handful of places,

• A overrides.scss file which is imported into my base.scss, and I have added the @reference "tailwindcss"; to the top of that file.
• Inside two component templates to define an inline stylesheet

styles: `
  @reference "tailwindcss";
  .selected {
    @apply font-bold bg-neutral text-neutral-content;
  }
`

I still receive those errors. I am using daisyUI as a plugin for my ui components, and I have upgraded to their latest beta version and followed the install steps as well.

[wongjn]

As per the documentation (emphasis mine):

use the @reference directive to import your main stylesheet for reference

You should be passing the path to main CSS file in your project that has the @import "tailwindcss" and any @theme directives, et al.

[cspritchard]

Apologies if I'm not fully understanding. My styles setup in the Nx repo is like so:
I have a common tailwind.config.js which sets up my base styles and plugins

const plugin = require("tailwindcss/plugin");

module.exports = {
  darkMode: 'media',
  important: true,
  plugins: [
    require('@tailwindcss/typography'),
    require("daisyui"),
    ...
  ],
  theme: { ... },
    extend: { ... }
  },
  safelist: [ ... ],
  daisyui: {
    themes:[ ... ]
  },
};

This is then imported into each apps/<app-name>/tailwind.config.js

module.exports = {
  presets: [sharedTailwindConfig],
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
};

The base.scss is shared just like the tailwind config and sets up the imports

@import "tailwindcss";
@plugin "daisyui";
@import "overrides/tailwind-overrides";

And each apps/<app-name>/src/styles.scss imports the base

@import "libs/core/styles/src/base";

You're saying I should be passing the reference path to base.scss to my components that use @apply?

[wongjn]

Yes, though I'm not sure if @reference works with .scss files.

[vinnyo]

@eliotis Which upgrade instruction did you follow?
I am also trying to upgrade tailwind in a NX monorepo with angular 19 but can't figure out how to properly setup postcss in a NX workspace.
I added a .postcssrc.json file to my project but still getting this error:

NX It looks like you're trying to use tailwindcssdirectly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install@tailwindcss/postcss and update your PostCSS configuration.

[raska-vilem]

Hi @vinnyo, I faced similar issues when migrating to DaisyUI v5 (depends on TW4) in my Angular/NX monorepo. Finally solved by this PR: https://github.com/ODZ-UJF-AV-CR/GAPP/pull/1/files. Hope it might help you.

Tailwind upgrade guide

[vinnyo]

Hey @raska-vilem, I managed to figure out that the issue for my case was that I'm using the build executor @nx/angular:webpack-browser that is causing the issue.
Thanks for sharing your solution though as it might be useful for others.

[MrTob]

Im using a nx Monorepo with Angular and PrimeNG and facing the same issue when upgrading to v4. I created a postcss.config.js in the root of my project but still the same error

[raska-vilem]

Hi, try this:

1. Make sure you are using css insted of scss
2. Move the postcss.config.js from project root to Angular app root
3. Rename it from postcss.confg.js to .postcssrc.json
4. Install @tailwindcss/postcss package. [more info]
5. Update the config file to reference installed package:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

At least, this worked for me.

[sandrumirceaioan]

Anyone managed to add tailwind v4 to Angular applications (that use scss) inside NX Monorepo? I can confirm that in Angular 19 with scss it works, but not inside NX Monorepo :(

[runner-action]

having the exact same problem. are there any solutions?. i found a blog post about it but it did not solve my problem.
https://medium.com/@abdulkhader_95798/adding-primeng-and-tailwind-css-to-an-angular-19-nx-project-0e98c0814e53

[Sieabah]

It's mentioned on the tailwind repo in some of the issues relating to this that scss isn't supported by tailwind v4 and they have no intention to. You must use css, as far as they care.

[sandrumirceaioan]

Yet, this is not correct since it works perfectly with Angular 19 and SCSS. The issue is with the exact same setup but inside a NX Monorepo. For now I had no choice but use Tailwindcss 3.4.1 which works fine.

[vinnyo]

Check in your project's project.json - Is your project using @nx/angular:webpack-browser as the build executor?
I found this was the issue for me and switching to @nx/angular:browser-esbuild worked for my project.
It is an es-build executor though which might not work if your project is dependant on webpack.
For context - My project is angular 19 using .scss in an NX monorepo.
Also note that in tailwind v4, you can include the tailwind config file in your main stylesheet (https://tailwindcss.com/docs/functions-and-directives#config-directive)