[v4] Tailwind CSS v4 Beta does not work with Angular 16 after migration

[dcheglakov]

What version of Tailwind CSS are you using?
4.0.0-beta.4

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

What version of Node.js are you using?
20.14.0

What browser are you using?
Chrome, Safari, Arc

What operating system are you using?
macOS 15.1.1

Reproduction URL
https://github.com/dcheglakov/angular-tailwind

Describe your issue
I attempted to migrate from Tailwind CSS v3 to v4 following the documentation using npx @tailwindcss/upgrade@next. The process completed without errors, but the styles are no longer applied after the migration.

Initially, I suspected the issue might be related to the prefix configuration, so I created a separate branch (no-prefix) to test the migration without a prefix. Unfortunately, the result was the same.

Here are the relevant branches in the reproduction repository:

• main: Stable working version on Tailwind v3
• tailwind-4: Migrated to Tailwind v4 (non-functional)
• no-prefix: Migrated to Tailwind v4 without prefix (non-functional)

Steps to reproduce:

1. Clone the repository: https://github.com/dcheglakov/angular-tailwind.
2. Check out the tailwind-4 or no-prefix branch.
3. Build and serve the Angular app.
4. Notice that the styles are not applied.

Expected behavior:
The styles should work as they did in Tailwind CSS v3 after the migration process.

Additional Context
I followed the migration steps provided in the Tailwind CSS upgrade guide. Both the tailwind-4 and no-prefix branches demonstrate the issue. If any further information is needed, feel free to ask.

[whistleEmil]

I'll echo this also does not work on a completely new Angular 19 project; issue is the same as described, that no styles are applied.

[philipp-spiess]

Heya! Been looking into this and there seem to be an invalid setup for postcss in your example:

• Tailwindcss v3 is somehow integrated into Angular so the existance of a Tailwind JS config file will enable it in your build. That's how it works in your current v4 branch.
• However, v4 isn't in core yet (see Support tailwind v4 angular/angular-cli#28938) so you will have to enable it via PostCSS. To do this though, the postcss config need to be a JSON file named postcss.config.json.

I was able to get it working in a new project with the following JSON postcss config file:

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

(Here's the code I used if you're curious: https://github.com/philipp-spiess/tailwindcss-playgrounds/tree/main/angular. This uses local builds of the next beta release we're just testing but it also works with beta 4)

So overall this does not seem like a Tailwind CSS bug but rather a restriction of how the Angular CLI works. 👍 Going to close this issue but let us know if you run into any other issues.

[dcheglakov]

Heya! Been looking into this and there seem to be an invalid setup for postcss in your example:

• Tailwindcss v3 is somehow integrated into Angular so the existance of a Tailwind JS config file will enable it in your build. That's how it works in your current v4 branch.
• However, v4 isn't in core yet (see Support tailwind v4 angular/angular-cli#28938) so you will have to enable it via PostCSS. To do this though, the postcss config need to be a JSON file named postcss.config.json.

I was able to get it working in a new project with the following JSON postcss config file:

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

(Here's the code I used if you're curious: https://github.com/philipp-spiess/tailwindcss-playgrounds/tree/main/angular. This uses local builds of the next beta release we're just testing but it also works with beta 4)

So overall this does not seem like a Tailwind CSS bug but rather a restriction of how the Angular CLI works. 👍 Going to close this issue but let us know if you run into any other issues.

Hi @philipp-spiess

I’ve tried following your approach with the postcss.config.json file and enabling Tailwind CSS via PostCSS for my Angular 16 project. Unfortunately, it didn’t resolve the issue for me.

[philipp-spiess]

@dcheglakov Hm, this issue on the Angular CLI project suggests that you have to use something like an application build mode. Have you tried that? We're not super deep into Angular so I'm not sure how I can help further here, other than verifying our postcss plugin works as expected. I suggest you ask about your specific Angular setup in the linked issue of the Angular CLI project.

[dcheglakov]

@philipp-spiess Thank you for the suggestion! I appreciate your help so far. My Angular project is already set up as an application project, so I believe that part is configured correctly. I’ll take your advice and ask about this in the linked Angular CLI issue to see if there’s something specific to Angular 16 that I might be missing.

Thanks again for your time and support! 🙏

[sharathdaniel]

@dcheglakov: You need tailwind.config.js in your root directory. Even though for tailwind 4 it is not needed, but for Angular to work with tailwind, you still need it.

This is how my tailwind.config.js looks like

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}"
  ],
  plugins: [],
}

Also the config file should be loaded in the main css file like this.

[dcheglakov]

@sharathdaniel thanks. I managed to use Tailwind 4 with Angular, but to do so, I had to upgrade to Angular 18.

[NahuelVega1913]

Did you followed any docs?, i am in angular 18 and i have the same problem

[rudyhadoux]

Hi everybody.
With a brand new Angular 19 project it works.
But i do not manage to upgrade for my old main project.
A lot of errors like this :
✘ [ERROR] Cannot apply unknown utility class: text-red-500 [plugin angular-sass]